Fronteers 2009 , 2009 - PowerPoint PPT Presentation

Рассказ о конференции Fronteers 2009 Степан Резников, 2009

Molly Holzschlag Peter-Paul Koch What’s New With The The Mobile Web, Or The Mobile Web Masochist's Guide To Gleeful Self-flagellation

Chris Heilmann Stephen Hay Of Hamsters, Feature The Future State of Layout Creatures And Missed Opportunities

John Resig Steve Souders Understanding Even Faster Web Sites JavaScript Testing

Douglas Crockford Ajax Security

Pete LePage Jonathan Snook Using HTML5 The Type We Want: Using Features In IE8 Fonts On The Web

Thomas Fuchs Nicole Sullivan Roll Your Own Effects Object Oriented CSS Framework

Dion Almaer & Ben Galbraith The Future Of Web Applications

Christian Heilmann Of Hamsters, Feature Creatures And 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

atom csv feed select * from html json microformats rss xml

Заголовки новостей Яндекса select title from rss where url="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 where url="http://company.yandex.ru/job/vacancies/" and xpath="//table[contains(@class,'b-vacancy-list')]//ul/li/a"

Также можно добавить свои данные, описав их в простом XML. Open Data Table Community Open Data Tables for YQL datatables.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 Hay The 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-columns grid-rows columns columns-width column-gap float float-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-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-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)