Fronteers 2009 , 2009 - - PowerPoint PPT Presentation

▶
fronteers 2009
SMART_READER_LITE
LIVE PREVIEW

Fronteers 2009 , 2009 - - PowerPoint PPT Presentation

Mar 04, 2024 410 likes •1.28k views

Fronteers 2009 , 2009 Molly Holzschlag Peter-Paul Koch Whats New With The The Mobile Web, Or The Mobile Web Masochist's Guide To Gleeful Self-flagellation Chris

slide-1
SLIDE 1

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

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

slide-2
SLIDE 2

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

slide-3
SLIDE 3

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

slide-4
SLIDE 4

John Resig Understanding JavaScript Testing Steve Souders Even Faster Web Sites

slide-5
SLIDE 5

Douglas Crockford Ajax Security

slide-6
SLIDE 6

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

slide-7
SLIDE 7

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

slide-8
SLIDE 8

Dion Almaer & Ben Galbraith The Future Of Web Applications

slide-9
SLIDE 9

Christian Heilmann Of Hamsters, Feature Creatures And Missed Opportunities

slide-10
SLIDE 10

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

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

Информация!

slide-14
SLIDE 14

APIs

slide-15
SLIDE 15
slide-16
SLIDE 16

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

slide-17
SLIDE 17

Сотни APIs Изучить документацию Получить developer keys ...

slide-18
SLIDE 18

YQL!

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

slide-19
SLIDE 19

Фотки из Flickr

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

slide-20
SLIDE 20

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

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

slide-21
SLIDE 21

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

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

slide-22
SLIDE 22

Поиск сразу в трех поисковиках: 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" '

slide-23
SLIDE 23

Запостить в Twitter

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

slide-24
SLIDE 24

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

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

slide-25
SLIDE 25

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

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

Not yet, sorry

slide-26
SLIDE 26

select * from

atom csv feed html json microformats rss xml

slide-27
SLIDE 27

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

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

slide-28
SLIDE 28

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

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

slide-29
SLIDE 29

Scraping HTML with YQL

Можно достать данные из любого HTML-документа. Фиксит документ, пропуская его через HTML Tidy. Позволяет достать любую часть документа с помощью Xpath!

slide-30
SLIDE 30

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

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

slide-31
SLIDE 31

Также можно добавить свои данные, описав их в простом XML. Open Data Table Community Open Data Tables for YQL datatables.org

slide-32
SLIDE 32

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>

slide-33
SLIDE 33

Ограничения

10 тыс. хитов в час 100 тыс. хитов в день Данные кешируются на 15 минут (скоро можно будет настроить) Ограничение времени исполнения — 30 секунд

slide-34
SLIDE 34

YQL

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

slide-35
SLIDE 35

Stephen Hay The Future State of Layout

slide-36
SLIDE 36

CSS3

slide-37
SLIDE 37

Потрясающе!

Media queries More selectors Font stuff ... !

slide-38
SLIDE 38

Decoration

backgrounds shadows rounded corners

slide-39
SLIDE 39

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

slide-40
SLIDE 40

Layout

slide-41
SLIDE 41

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

slide-42
SLIDE 42

Почему это важно?

Разделение представления и структуры Независимость от порядка в исходном коде Переносимость данных в другие среды

slide-43
SLIDE 43

Layout

slide-44
SLIDE 44

hasNoLayout

slide-45
SLIDE 45

Прошлое: Tables

slide-46
SLIDE 46

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

slide-47
SLIDE 47

What is grid layout?

slide-48
SLIDE 48

A grid is not a table.

slide-49
SLIDE 49

This is a grid.

slide-50
SLIDE 50

And this is a table.

slide-51
SLIDE 51

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

slide-52
SLIDE 52

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

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

Явная сетка

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

slide-53
SLIDE 53

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

slide-54
SLIDE 54

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/

slide-55
SLIDE 55

Grid Positioning Module (Microsoft)

slide-56
SLIDE 56

Units

slide-57
SLIDE 57

Units vs. Columns

slide-58
SLIDE 58

Grid Positioning: свойства

grid-columns grid-rows columns columns-width column-gap float float-offset

slide-59
SLIDE 59

Grid Positioning: синтаксис

div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; }

slide-60
SLIDE 60

Grid Positioning: grid units

slide-61
SLIDE 61

Grid Positioning: columns

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

slide-62
SLIDE 62

Grid Positioning: columns

slide-63
SLIDE 63

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

Для того, чтобы матчить grid units

slide-64
SLIDE 64

Grid Positioning: gr

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

slide-65
SLIDE 65

Grid Positioning: gr

slide-66
SLIDE 66

Grid Positioning

простой синтаксис *-syntax gr unit явная сетка

slide-67
SLIDE 67

Grid Positioning

Можно попробовать? Нет :( Пока нет известных имплементаций.

slide-68
SLIDE 68

Flexible Box Layout Module (Mozilla)

slide-69
SLIDE 69

A small part of XUL, ported to CSS.

slide-70
SLIDE 70

Flexible Box: свойства

box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack

slide-71
SLIDE 71

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%; }

slide-72
SLIDE 72

Свойство box-flex «заполнить доступное пространство»

#child3 { box-flex: 1; }

slide-73
SLIDE 73

#child2 { box-flex: 2; } #child3 { box-flex: 1; }

slide-74
SLIDE 74

Flexible Box

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

slide-75
SLIDE 75

Flexible Box

Можно попробовать? Да! В Firefox, используя префикс -moz (демонстрация)

slide-76
SLIDE 76

Template Layout Module (W3C)

slide-77
SLIDE 77

Template Layout: новое

Новые значения для свойства display Новые значения для свойства position Псевдо-элемент ::slot() Единица измерения gr

slide-78
SLIDE 78

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; }

slide-79
SLIDE 79

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; }

slide-80
SLIDE 80

Template Layout: псевдо-элемент ::slot()

::slot() позволяет применить стили к слоту вне зависимости от содержимого слота body::slot(a) { background-color: red; }

slide-81
SLIDE 81

Template Layout

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

slide-82
SLIDE 82

Template Layout

Можно попробовать? Да! Alexis Deveria's jQuery implementation: http://code.google.com/p/css-template-layout/ (демонстрация)

slide-83
SLIDE 83

Media queries and CSS3 Layuot

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

slide-84
SLIDE 84

Что будет?

slide-85
SLIDE 85

Я не знаю.

slide-86
SLIDE 86

Спасибо за внимание! Вопросы?