Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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
Мы перестали пытатьсясделать все сами.
Много вещей сделанных другимина основе которых мы можемстроить свое.
Сложность системы возрастаетс количеством используемых API.
У разных API разные способы аутентификации, они принимают разные параметры и возвращают данные в разных форматах.
YQL!SQL-подобный язык запросов для получения,фильтрации и комбинирования данныхиз различных источников
Превращает всю сеть в гигантскую базу данных
Заголовки 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")
Ду ю спик инглиш? Дую, но плохо :)
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 секунд
Почему это важно? Разделение представления и структуры
Независимость от порядка в исходном коде
Переносимость данных в другие среды
Не явная сеткаСоздается не явно при добавленииэлементов на страницу.
Явная сетка
Создается явно до добавленияэлементов на страницу.
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: columns div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; columns: 3; column-gap: 12px;}
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%;}
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 Можно попробовать?
Да!
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" ; }}