Рассказ о конференции Fronteers 2009 fileMolly Holzschlag What’s New With The Mobile Web Peter-Paul Koch The Mobile Web, Or The Masochist's Guide To Gleeful Self-flagellation

Рассказ о конференции Fronteers 2009

Степан Резников, 2009

Molly Holzschlag

What’s New With The Mobile Web

Peter-Paul Koch

The Mobile Web, Or The Masochist's Guide To Gleeful Self-flagellation

Chris Heilmann

Of Hamsters, Feature Creatures And Missed Opportunities

Stephen Hay

The Future State of Layout

John Resig

UnderstandingJavaScript Testing

Steve Souders

Even Faster Web Sites

Douglas Crockford

Ajax Security

Pete LePage

Using HTML5Features In IE8

Jonathan Snook

The Type We Want: Using Fonts On The Web

Thomas Fuchs

Roll Your Own Effects Framework

Nicole Sullivan

Object Oriented CSS

Dion Almaer & Ben Galbraith

The Future Of Web Applications

Christian HeilmannOf Hamsters, Feature CreaturesAnd Missed Opportunities

Мы перестали пытатьсясделать все сами.

Много вещей сделанных другимина основе которых мы можемстроить свое.

Информация!

APIs

Сложность системы возрастаетс количеством используемых API.

У разных API разные способы аутентификации, они принимают разные параметры и возвращают данные в разных форматах.

Сотни APIs

Изучить документацию

Получить developer keys

...

YQL!SQL-подобный язык запросов для получения,фильтрации и комбинирования данныхиз различных источников

Превращает всю сеть в гигантскую базу данных

Фотки из Flickr

select * from flickr.photos.search where text="moscow"

Заголовки New York Times

select * from nyt.article.search where query="Putin"

Заголовки New York Times на русском

select * from google.translate where q in (select title from nyt.article.search where query="Putin") and target="ru"

Поиск сразу в трех поисковиках:Bing, Google и Yahoo

select * from query.multi where queries=' select * from microsoft.bing where query="Putin" and source in ("web"); select * from google.search where q="Putin"; select * from search.web where query="Putin"'

Запостить в Twitter

use 'http://www.yqlblog.net/samples/twitter.status.xml';insert into twitter.status (status,username,password)values ( "Рассказываю в Яндексе про YQL", "stepanvr", "12345")

Обновить весь интернет

delete from internet where user_agent="MSIE" and version < 8;

Обновить весь интернет

delete from internet where user_agent="MSIE" and version < 8;

Not yet, sorry

select * from

atomcsvfeedhtmljsonmicroformatsrssxml

Заголовки новостей Яндекса

select title from rss whereurl="http://company.yandex.ru/news/news.rss"

Ду ю спик инглиш? Дую, но плохо :)

select * from google.translate where q in ( select title from rss where url="http://company.yandex.ru/news/news.rss") and target="en"

Scraping HTML with YQL Можно достать данные из любого HTML-документа.

Фиксит документ, пропуская его через HTML Tidy.

Позволяет достать любую часть документас помощью Xpath!

Вакансии Яндекса

select content from html whereurl="http://company.yandex.ru/job/vacancies/" andxpath="//table[contains(@class,'b-vacancy-list')]//ul/li/a"

Также можно добавить свои данные, описав их в простом XML.

Open Data Table

Community Open Data Tables for YQLdatatables.org

http://www.datatables.org/bitly/bit.ly.shorten.xml<table> <meta> <author>Nagesh Susarla</author> <documentationURL> http://code.google.com/p/bitly-api/wiki/ApiDocumentation </documentationURL> </meta> <bindings> <select itemPath="" produces="XML"> <urls> <url>http://api.bit.ly/shorten?version=2.0.1&format=xml</url> </urls> <inputs> <key id="login" type="xs:string" paramType="query" required="true"/> <key id="apiKey" type="xs:string" paramType="query" required="true"/> <key id="longUrl" type="xs:string" paramType="query" required="true"/> <key id="history" type="xs:string" paramType="query"/> </inputs> </select> </bindings></table>

Ограничения 10 тыс. хитов в час

100 тыс. хитов в день

Данные кешируются на 15 минут(скоро можно будет настроить)

Ограничение времени исполнения — 30 секунд

YQL

http://developer.yahoo.com/yql/

Stephen HayThe Future State of Layout

CSS3

Потрясающе! Media queries

More selectors

Font stuff

... !

Decoration backgrounds

shadows

rounded corners

Все это нужно и важно,но нам очень нужнавозможность описывать...

Layout

Одна из ключевых проблем веб-разработки — отсутствие хорошего механизма лейаутов.

Почему это важно? Разделение представления и структуры

Независимость от порядка в исходном коде

Переносимость данных в другие среды

Layout

hasNoLayout

Прошлое: Tables

Настоящее: Floats & Positioning

What is grid layout?

A grid is not a table.

This is a grid.

And this is a table.

A grid is the underlying geometrical framework which defines the visual structure of the canvas.

Не явная сеткаСоздается не явно при добавленииэлементов на страницу.

Явная сетка

Создается явно до добавленияэлементов на страницу.

Три рабочих драфта

CSS Grid Positioning Module (Microsoft)http://www.w3.org/TR/css3-grid/

Flexible Box Layout Module (Mozilla)http://www.w3.org/TR/css3-flexbox/

CSS Template Layout Module (W3C)http://www.w3.org/TR/css3-layout/

Grid Positioning Module (Microsoft)

Units

Units vs. Columns

Grid Positioning: свойства grid-columnsgrid-rows

columnscolumns-widthcolumn-gap

floatfloat-offset

Grid Positioning: синтаксис div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *;}

Grid Positioning: grid units

Grid Positioning: columns div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; columns: 3; column-gap: 12px;}

Grid Positioning: columns

Единица измерения grДля того, чтобы матчить grid units

Grid Positioning: gr img { float: top left column; float-offset: 1gr 4gr; width: 7gr;}

Grid Positioning: gr

Grid Positioning простой синтаксис

*-syntax

gr unit

явная сетка

Grid Positioning Можно попробовать?

Нет :(

Пока нет известных имплементаций.

Flexible Box Layout Module (Mozilla)

A small part of XUL, ported to CSS.

Flexible Box: свойства box-alignbox-directionbox-flexbox-flex-groupbox-linesbox-ordinal-groupbox-orientbox-pack

Flexible Box: синтаксис <div id="parent"> <p id="child1">First</p> <p id="child2">Second</p> <p id="child3">Third</p></div>

#parent { display: box; box-orient: horizontal; width: 100%;}

Свойство box-flex

«заполнить доступное пространство» #child3 { box-flex: 1;}

#child2 { box-flex: 2;}

#child3 { box-flex: 1;}

Flexible Box простой синтаксис

независимость от порядка в исходном коде

неявная сетка

Flexible Box Можно попробовать?

Да!

В Firefox, используя префикс -moz

(демонстрация)

Template Layout Module (W3C)

Template Layout: новое Новые значения для свойства display

Новые значения для свойства position

Псевдо-элемент ::slot()

Единица измерения gr

Template Layout: синтаксис

<div id="header">Header</div><div id="content">Content</div><div id="navigation">Navigation</div><div id="footer">Footer</div>

body { display: "aaa" "bcc" "ddd" ;}#header { position: a; }#navigation { position: b; }#content { position: c; }#footer { position: d; }

Template Layout: синтаксис

<div id="header">Header</div><div id="content">Content</div><div id="navigation">Navigation</div><div id="footer">Footer</div>

body { display: "a.a.a" / 150px "....." / 20px "b.c.@" / * "....." / 20px "d.d.d" / 80px 200px 20px * 20px *;}#header { position: a; }#navigation { position: b; }#content { position: c; }#footer { position: d; }

Template Layout:псевдо-элемент ::slot() ::slot() позволяет применить стили к слотувне зависимости от содержимого слота

body::slot(a) { background-color: red; }

Template Layout простой синтаксис

визуально

независимость от порядка в исходном коде

явная сетка

Template Layout Можно попробовать?

Да!

Alexis Deveria's jQuery implementation:http://code.google.com/p/css-template-layout/

(демонстрация)

Media queries and CSS3 Layuot

body { display: "aaa" "bcc" "ddd" ;}

@media all and (max-width: 400px) { body { display: "a" "b" "c" "d" ; }}

Что будет?

Я не знаю.

Спасибо за внимание!

Вопросы?