Submit Search
Upload
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
â˘
15 likes
â˘
15,064 views
Robert Nyman
Follow
Going through HTML5 and CSS3 possibilities with a mobile perspective
Read less
Read more
Technology
Entertainment & Humor
Report
Share
Report
Share
1 of 83
Download now
Download to read offline
Recommended
HTML5 and CSS3 â exploring mobile possibilities - Frontend Conference ZĂźrich
HTML5 and CSS3 â exploring mobile possibilities - Frontend Conference ZĂźrich
Robert Nyman
Â
Blog skins396734
Blog skins396734
pantangmrny
Â
HTML5 and CSS3 â exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 â exploring mobile possibilities - Dynabyte event
Robert Nyman
Â
HTML5 workshop, forms
HTML5 workshop, forms
Robert Nyman
Â
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Matteo Magni
Â
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
Â
CSS3 vs jQuery
CSS3 vs jQuery
Web Essentials Co., Ltd.
Â
Insertcustomer
Insertcustomer
amirthalingam m
Â
Recommended
HTML5 and CSS3 â exploring mobile possibilities - Frontend Conference ZĂźrich
HTML5 and CSS3 â exploring mobile possibilities - Frontend Conference ZĂźrich
Robert Nyman
Â
Blog skins396734
Blog skins396734
pantangmrny
Â
HTML5 and CSS3 â exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 â exploring mobile possibilities - Dynabyte event
Robert Nyman
Â
HTML5 workshop, forms
HTML5 workshop, forms
Robert Nyman
Â
HTML5 e Css3 - 7 | WebMaster & WebDesigner
HTML5 e Css3 - 7 | WebMaster & WebDesigner
Matteo Magni
Â
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
Â
CSS3 vs jQuery
CSS3 vs jQuery
Web Essentials Co., Ltd.
Â
Insertcustomer
Insertcustomer
amirthalingam m
Â
Code Tops Comments
Code Tops Comments
Mr Giap
Â
Coding part
Coding part
Sanjay Gupta
Â
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
Â
Java script
Java script
Sanjay Gunjal
Â
Using jQuery to Extend CSS
Using jQuery to Extend CSS
Chris Coyier
Â
Theme 23
Theme 23
bellaandzendaya
Â
Angular js animate shashikant bhongale -20-7-16
Angular js animate shashikant bhongale -20-7-16
Shashikant Bhongale
Â
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
Â
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
psstoev
Â
Document
Document
Naveed Anjum
Â
Anko芌éŁäź
Anko芌éŁäź
susan335
Â
Html5 and web technology update
Html5 and web technology update
Doug Domeny
Â
course js day 3
course js day 3
Georgyi Grigoryev
Â
Formato encuesta
Formato encuesta
Angie Padilla
Â
JavaFXă§éăć°ä¸äťŁGUI
JavaFXă§éăć°ä¸äťŁGUI
Yuichi Sakuraba
Â
Example wsdl file
Example wsdl file
venkatme83
Â
Start your app the better way with Styled System
Start your app the better way with Styled System
Hsin-Hao Tang
Â
SĂŠminaire Web Services
SĂŠminaire Web Services
e-Xpert Solutions SA
Â
Horario
Horario
1wwefan
Â
[Quality Meetup] M. GĂłrski, M. BoĹ - Testy UI w Espresso z farmÄ w tle
[Quality Meetup] M. GĂłrski, M. BoĹ - Testy UI w Espresso z farmÄ w tle
Future Processing
Â
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman
Â
Database Administration
Database Administration
Bilal Arshad
Â
More Related Content
What's hot
Code Tops Comments
Code Tops Comments
Mr Giap
Â
Coding part
Coding part
Sanjay Gupta
Â
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Robert Nyman
Â
Java script
Java script
Sanjay Gunjal
Â
Using jQuery to Extend CSS
Using jQuery to Extend CSS
Chris Coyier
Â
Theme 23
Theme 23
bellaandzendaya
Â
Angular js animate shashikant bhongale -20-7-16
Angular js animate shashikant bhongale -20-7-16
Shashikant Bhongale
Â
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
Â
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
psstoev
Â
Document
Document
Naveed Anjum
Â
Anko芌éŁäź
Anko芌éŁäź
susan335
Â
Html5 and web technology update
Html5 and web technology update
Doug Domeny
Â
course js day 3
course js day 3
Georgyi Grigoryev
Â
Formato encuesta
Formato encuesta
Angie Padilla
Â
JavaFXă§éăć°ä¸äťŁGUI
JavaFXă§éăć°ä¸äťŁGUI
Yuichi Sakuraba
Â
Example wsdl file
Example wsdl file
venkatme83
Â
Start your app the better way with Styled System
Start your app the better way with Styled System
Hsin-Hao Tang
Â
SĂŠminaire Web Services
SĂŠminaire Web Services
e-Xpert Solutions SA
Â
Horario
Horario
1wwefan
Â
[Quality Meetup] M. GĂłrski, M. BoĹ - Testy UI w Espresso z farmÄ w tle
[Quality Meetup] M. GĂłrski, M. BoĹ - Testy UI w Espresso z farmÄ w tle
Future Processing
Â
What's hot
(20)
Code Tops Comments
Code Tops Comments
Â
Coding part
Coding part
Â
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Â
Java script
Java script
Â
Using jQuery to Extend CSS
Using jQuery to Extend CSS
Â
Theme 23
Theme 23
Â
Angular js animate shashikant bhongale -20-7-16
Angular js animate shashikant bhongale -20-7-16
Â
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Â
Polymer - pleasant client-side programming with web components
Polymer - pleasant client-side programming with web components
Â
Document
Document
Â
Anko芌éŁäź
Anko芌éŁäź
Â
Html5 and web technology update
Html5 and web technology update
Â
course js day 3
course js day 3
Â
Formato encuesta
Formato encuesta
Â
JavaFXă§éăć°ä¸äťŁGUI
JavaFXă§éăć°ä¸äťŁGUI
Â
Example wsdl file
Example wsdl file
Â
Start your app the better way with Styled System
Start your app the better way with Styled System
Â
SĂŠminaire Web Services
SĂŠminaire Web Services
Â
Horario
Horario
Â
[Quality Meetup] M. GĂłrski, M. BoĹ - Testy UI w Espresso z farmÄ w tle
[Quality Meetup] M. GĂłrski, M. BoĹ - Testy UI w Espresso z farmÄ w tle
Â
Viewers also liked
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Robert Nyman
Â
Database Administration
Database Administration
Bilal Arshad
Â
Database Administration
Database Administration
Bilal Arshad
Â
Introduction to oracle database (basic concepts)
Introduction to oracle database (basic concepts)
Bilal Arshad
Â
Introduction to Html5
Introduction to Html5
www.netgains.org
Â
CBSE XII Database Concepts And MySQL Presentation
CBSE XII Database Concepts And MySQL Presentation
Guru Ji
Â
Dbms
Dbms
sevtap87
Â
html5.ppt
html5.ppt
Niharika Gupta
Â
Php mysql ppt
Php mysql ppt
Karmatechnologies Pvt. Ltd.
Â
Types of databases
Types of databases
PAQUIAAIZEL
Â
Html Ppt
Html Ppt
vijayanit
Â
MySQL partitions tutorial
MySQL partitions tutorial
Giuseppe Maxia
Â
Introduction to HTML
Introduction to HTML
MayaLisa
Â
Database administrator
Database administrator
Tech_MX
Â
Basic DBMS ppt
Basic DBMS ppt
dangwalrajendra888
Â
Dbms slides
Dbms slides
rahulrathore725
Â
Ch8
Ch8
Bilal Arshad
Â
Fundamentals of Database ppt ch01
Fundamentals of Database ppt ch01
Jotham Gadot
Â
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
SlideShare
Â
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
SlideShare
Â
Viewers also liked
(20)
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Â
Database Administration
Database Administration
Â
Database Administration
Database Administration
Â
Introduction to oracle database (basic concepts)
Introduction to oracle database (basic concepts)
Â
Introduction to Html5
Introduction to Html5
Â
CBSE XII Database Concepts And MySQL Presentation
CBSE XII Database Concepts And MySQL Presentation
Â
Dbms
Dbms
Â
html5.ppt
html5.ppt
Â
Php mysql ppt
Php mysql ppt
Â
Types of databases
Types of databases
Â
Html Ppt
Html Ppt
Â
MySQL partitions tutorial
MySQL partitions tutorial
Â
Introduction to HTML
Introduction to HTML
Â
Database administrator
Database administrator
Â
Basic DBMS ppt
Basic DBMS ppt
Â
Dbms slides
Dbms slides
Â
Ch8
Ch8
Â
Fundamentals of Database ppt ch01
Fundamentals of Database ppt ch01
Â
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
Â
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
Â
Similar to HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
CSS3 Takes on the World
CSS3 Takes on the World
Jonathan Snook
Â
Html5 intro
Html5 intro
Wilfred Nas
Â
HTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Ivano Malavolta
Â
Repaso rĂĄpido a los nuevos estĂĄndares web
Repaso rĂĄpido a los nuevos estĂĄndares web
Pablo Garaizar
Â
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
Â
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Eduardo Shiota Yasuda
Â
Jarv.us Showcase â SenchaCon 2011
Jarv.us Showcase â SenchaCon 2011
Chris Alfano
Â
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
Â
This is a test
This is a test
cmailhotos4
Â
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
Â
CSS3 and jQuery
CSS3 and jQuery
psophy
Â
Core CSS3
Core CSS3
Rachel Andrew
Â
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas
Â
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
Â
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Codemotion
Â
Responsive Websites
Responsive Websites
Joe Seifi
Â
HTML5, the new buzzword
HTML5, the new buzzword
FrĂŠdĂŠric Harper
Â
SVG overview
SVG overview
Satoshi Watanabe
Â
Rapid Prototyping
Rapid Prototyping
Even Wu
Â
Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
Â
Similar to HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
(20)
CSS3 Takes on the World
CSS3 Takes on the World
Â
Html5 intro
Html5 intro
Â
HTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
Â
Repaso rĂĄpido a los nuevos estĂĄndares web
Repaso rĂĄpido a los nuevos estĂĄndares web
Â
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Â
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Â
Jarv.us Showcase â SenchaCon 2011
Jarv.us Showcase â SenchaCon 2011
Â
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Â
This is a test
This is a test
Â
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Â
CSS3 and jQuery
CSS3 and jQuery
Â
Core CSS3
Core CSS3
Â
Making Links Magical Again with CSS
Making Links Magical Again with CSS
Â
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
Â
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Â
Responsive Websites
Responsive Websites
Â
HTML5, the new buzzword
HTML5, the new buzzword
Â
SVG overview
SVG overview
Â
Rapid Prototyping
Rapid Prototyping
Â
Introduccion a HTML5
Introduccion a HTML5
Â
More from Robert Nyman
Have you tried listening?
Have you tried listening?
Robert Nyman
Â
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Robert Nyman
Â
Introduction to Google Daydream
Introduction to Google Daydream
Robert Nyman
Â
Predictability for the Web
Predictability for the Web
Robert Nyman
Â
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
Robert Nyman
Â
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Robert Nyman
Â
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Robert Nyman
Â
Google tech & products
Google tech & products
Robert Nyman
Â
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Robert Nyman
Â
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Robert Nyman
Â
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Robert Nyman
Â
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Robert Nyman
Â
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Robert Nyman
Â
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Robert Nyman
Â
Google, the future and possibilities
Google, the future and possibilities
Robert Nyman
Â
Developer Relations in the Nordics
Developer Relations in the Nordics
Robert Nyman
Â
What is Developer Relations?
What is Developer Relations?
Robert Nyman
Â
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Robert Nyman
Â
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Robert Nyman
Â
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Robert Nyman
Â
More from Robert Nyman
(20)
Have you tried listening?
Have you tried listening?
Â
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Â
Introduction to Google Daydream
Introduction to Google Daydream
Â
Predictability for the Web
Predictability for the Web
Â
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
Â
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Â
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
Â
Google tech & products
Google tech & products
Â
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Â
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Â
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
Â
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
Â
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
Â
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
Â
Google, the future and possibilities
Google, the future and possibilities
Â
Developer Relations in the Nordics
Developer Relations in the Nordics
Â
What is Developer Relations?
What is Developer Relations?
Â
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
Â
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
Â
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Â
Recently uploaded
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
Â
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
Â
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
apidays
Â
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
Â
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Â
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Â
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Â
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Â
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
Overkill Security
Â
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Â
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Â
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Â
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Jago de Vreede
Â
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
danishmna97
Â
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Â
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
Â
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vĂĄzquez
Â
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Â
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Â
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Â
Recently uploaded
(20)
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Â
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Â
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Â
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Â
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Â
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Â
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Â
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Â
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
Â
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Â
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Â
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Â
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Â
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
Â
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Â
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
Â
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Â
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Â
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Â
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Â
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
1.
HTML5 and CSS3:
Exploring Mobile Possibilities
2.
3.
4.
5.
6.
7.
CSS Media Queries
8.
width
color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
9.
min-width max-width orientation
10.
<link rel="stylesheet"
href="pretty.css" media="screen and (min-width: 500px)">
11.
.nav {
width: 150px; } @media screen and (min-width: 500px) { .nav { width: 300px; } }
12.
@media screen and
(min-width: 500px) and (max-width: 1024px) { .nav { width: 200px; } }
13.
@media screen and
(min-width: 100px), @media handheld { .nav { width: 350px; } }
14.
@media only screen
and (min-width: 100px) { .nav { width: 350px; } }
15.
@media not screen
and (min-width: 100px) { .nav { width: 100%; } }
16.
@media screen and
(orientation: landscape) { .nav { float: left; width: 20%; } .main { float: right; width: 80%; } }
17.
@media screen and
(orientation: portrait) { .nav { width: 100%; } .main { width: 100%; } }
18.
<meta name="viewport"
content="width=device-width, maximum-scale=1.0">
19.
CSS3 Media Queries
and creating adaptive layouts
20.
http://mediaqueri.es/
21.
CSS Flex Box
22.
<div class="flex-container">
<section class="col-1">I am column 1</section> <section class="col-2">I am column 2</section> <section class="col-3">I am column 3</section> </div>
23.
.flex-container {
display: -moz-box; display: -ms-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -ms-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; }
24.
.col-1 {
-moz-box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .col-2 { -moz-box-flex: 1; -ms-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .col-3 { -moz-box-flex: 2; -ms-box-flex: 2; -webkit-box-flex: 2; box-flex: 2; }
25.
.col-1 {
-moz-box-ordinal-group: 2; -ms-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; box-ordinal-group: 2; } .col-2 { -moz-box-ordinal-group: 3; -ms-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; box-ordinal-group: 3; } .col-3 { -moz-box-ordinal-group: 1; -ms-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; box-ordinal-group: 1; }
26.
ďŹex- instead of
box-
27.
CSS Transitions
28.
/* Shorthand version
*/ #hello { display: inline-block; height: 20px; opacity: 0.3; -moz-transition: height 1s ease-out, opacity 1s ease; -ms-transition: height 1s ease-out, opacity 1s ease; -o-transition: height 1s ease-out, opacity 1s ease; -webkit-transition: height 1s ease-out, opacity 1s ease; transition: height 1s ease-out, opacity 1s ease; } #hello:hover { height: 40px; opacity: 1; }
29.
/* Shorthand version
*/ .menu-item { position: relative; display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; text-decoration: none; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; } .menu-item:hover { opacity: 1; -moz-transform: scale(2) rotate(30deg) translate(50px); -ms-transform: scale(2) rotate(30deg) translate(50px); -o-transform: scale(2) rotate(30deg) translate(50px); -webkit-transform: scale(1.2) rotate(30deg) translate(50px); transform: scale(2) rotate(30deg) translate(50px); }
30.
31.
.love-me {
-webkit-transform: translate3d(0, 0, 0); }
32.
CSS Animations
33.
.animation-container {
height: 60px; padding: 10px; -moz-animation-name: movearound; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-timing-function: ease; -webkit-animation-name: movearound; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease; } @-moz-keyframes movearound { from { width: 200px; background: #f00; opacity: 0.5; -moz-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -moz-transform: scale(1) rotate(0deg); } }
34.
@-webkit-keyframes movearound {
from { width: 200px; background: #f00; opacity: 0.5; -webkit-transform: scale(0.5) rotate(15deg); } to { width: 400px; background: #ffffa2; opacity: 1; -webkit-transform: scale(1) rotate(0deg); } }
35.
CSS box-shadow and
text-shadow
36.
37.
38.
text-overďŹow: ellipsis
39.
40.
41.
HTML5 Forms
42.
New form types <input
type="color"> <input type="range"> <input type="date"> <input type="search" results="5" <input type="datetime"> autosave="saved-searches"> <input type="datetime-local"> <input type="tel"> <input type="email"> <input type="time"> <input type="month"> <input type="url"> <input type="number"> <input type="week">
43.
44.
45.
46.
47.
48.
New form attributes <input
type="text" autocomplete="off"> <input type="text" autofocus> <input type="submit" formaction="http://example.org/save" value="Save"> <input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"> <input type="submit" formmethod="POST" value="Send as POST"> <input type="submit" formnovalidate value="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window">
49.
<input type="text" list="data-list"> <input
type="range" max="95"> <input type="range" min="2"> <input type="file" multiple> <input type="text" readonly> <input type="text" required> <input type="text" pattern="[A-Z]*"> <input type="text" placeholder="E.g. Robocop"> <input type="text" spellcheck="true"> <input type="number" step="5">
50.
New form elements <input
type="text" list="data-list"> <datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack Shephard"> <option value="James 'Sawyer' Ford"> <option value="John Locke"> <option value="Sayid Jarrah"> </datalist>
51.
<keygen></keygen> <meter min="0" max="10"
value="7"></meter> <input type="range" id="range"> <output for="range" id="output"></output> <progress max="100" value="70">70%</progress>
52.
<input type="range" id="range"> <output
for="range" id="output"></output> <script> (function () { var theForm = document.getElementById("the-form"); if ("oninput" in theForm) { theForm.addEventListener("input", function () { output.value = range.value; }, false); } })(); </script>
53.
54.
http://www.quirksmode.org/html5/inputs.html http://www.quirksmode.org/html5/inputs_mobile.html http://wufoo.com/html5/
55.
Link protocols
56.
<a href="tel:+441111234567">tel: link</a> <a
href="sms:+441111234567">sms: link</a> <a href="sms:+441111234567?body=Text%20me"> sms: with body </a> <a href="sms:+441111234567,+441111678901"> sms: with multiple numbers </a> <a href="sms:+441111234567,+441111678901?body=Text%20me"> sms: with multiple numbers + body </a>
57.
#browserlove
58.
Web Storage
59.
60.
sessionStorage.setItem("Charming", "Piers Morgan"); console.log(sessionStorage.getItem("Charming"));
61.
localStorage.setItem("Job", "Show host");
62.
var piersMorgan =
{ "Transportation" : "Segway", "Damage" : "Three broken ribs" }; localStorage.setItem("piersMorgan", JSON.stringify(piersMorgan)); console.log(typeof JSON.parse(localStorage.getItem("piersMorgan")));
63.
Web SQL
IndexedDB
64.
Geolocation
65.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
66.
67.
68.
OfďŹine Web Applications
69.
// Poll the
navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
70.
<!DOCTYPE html> <html manifest="offline.appcache"> <head> ...
71.
CACHE MANIFEST # VERSION
10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
72.
History API
73.
var url =
"http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
74.
window.history.replaceState(state, title, url);
75.
76.
Mobile Perf
77.
weinre
78.
79.
80.
position: ďŹxed overďŹow: scroll -webkit-overďŹow-scrolling:
touch Web Workers
81.
82.
83.
Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/
Twitter: @robertnyman robertnyman.com/css3/
Download now