SlideShare una empresa de Scribd logo

Rapid Web Design Prototyping with HTML5 and WebKit

•Descargar como KEY, PDF•
•
Pete Nicholls
Pete Nicholls
Tecnología
1 de 38
RAPID DESIGN PROTOTYPING with HTML5 and WebKit Pete Nicholls @Aupajo http://github.com/Aupajo
HTML5 & WEBKIT AWESOMENESS withn some Rapid Design Prototyping Pete Nicholls @Aupajo http://github.com/Aupajo
HTML5
IT’S EASY An easier DOCTYPE (<!DOCTYPE html>) Write in XHTML or HTML style (<br> or <br />) Switch today! A few new elements...
THE NEW KIDS video audio footer email section article figure range tel search progress menu nav hgroup time canvas header and more...
NEW SEMANTICS It’s not an HTML “document” any more Header, section, aside, h1-h6, nav and footer are all relative to the closest article or body A chance to avoid Div-itis
NEW APIS Canvas (2D drawing) Offline storage database Document editing WebSocket (TCP sockets) Drag-n-drop
Video
Hey! What’d I ...
HADOUKEN!
H.264 Theora HADOUKEN!
H.264 Theora HADOUKEN!
H.264 Theora HADOUKEN!
H.264 Theora HADOUKEN!
H.264 Theora
H.264 Theora Hey
Theora first! Don’t give up without a fight.
Demo http://jilion.com/sublime/video
Audio
Demo http://www.ironicsans.com/volumething/
WebKit
?
? Yo, Gecko, I’m really happy for you and I’mma let you finish, but WebKit has one of
WebKit CSS Extensions
Demo http://github.com/Aupajo/webkit-fu
CSS Animations
Demos http://webkit.org/blog/138/css-animation/ http://webkit.org/blog-files/leaves/index.html http://webkit.org/blog-files/pulse.html
3D Transforms
Demos http://esquevin.com/starwars.html http://webkit.org/blog-files/3d-transforms/morphing-cubes.html
Animations? 3D? Isn’t that a bit too far?
Isn’t this stuff years away?
WebGL
Demo https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/ google/shiny-teapot/index.html
One more thing... Pathetic.

Recomendados

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
Kyle Simpson
 
Own the build
Own the buildOwn the build
Own the build
connatser
 
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Murat Yener
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
Stephan Seidt
 
HTML5 for dummies
HTML5 for dummiesHTML5 for dummies
HTML5 for dummies
Ran Bar-Zik
 
DevOps Engineering
DevOps EngineeringDevOps Engineering
DevOps Engineering
Diego Pacheco
 
Feature flags, a/b testing, canary amd split traffic ~ hail new agile po
Feature flags, a/b testing, canary amd split traffic ~ hail new agile poFeature flags, a/b testing, canary amd split traffic ~ hail new agile po
Feature flags, a/b testing, canary amd split traffic ~ hail new agile po
Diego Pacheco
 
Ch17
Ch17Ch17
Ch17
phanleson
 

Recomendados

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
Kyle Simpson
 
Own the build
Own the buildOwn the build
Own the build
connatser
 
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Eclipse Orion: The IDE in the Clouds (JavaOne 2013)
Murat Yener
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
Stephan Seidt
 
HTML5 for dummies
HTML5 for dummiesHTML5 for dummies
HTML5 for dummies
Ran Bar-Zik
 
DevOps Engineering
DevOps EngineeringDevOps Engineering
DevOps Engineering
Diego Pacheco
 
Feature flags, a/b testing, canary amd split traffic ~ hail new agile po
Feature flags, a/b testing, canary amd split traffic ~ hail new agile poFeature flags, a/b testing, canary amd split traffic ~ hail new agile po
Feature flags, a/b testing, canary amd split traffic ~ hail new agile po
Diego Pacheco
 
Ch17
Ch17Ch17
Ch17
phanleson
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
Shumpei Shiraishi
 
Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-
Tomohiro Nishimura
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Christopher Schmitt
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
Christopher Schmitt
 
5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
Daniel Ryan
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
Christopher Schmitt
 
HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]
Aaron Gustafson
 
Web Components - Rutgers Tech Meetup Fall 2014
Web Components - Rutgers Tech Meetup Fall 2014Web Components - Rutgers Tech Meetup Fall 2014
Web Components - Rutgers Tech Meetup Fall 2014
Yair Aviner
 
Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
Mike Wilcox
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
Jen Simmons
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
Panagiotis Grigoropoulos
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
GreekTuts Ελληνικά Βοηθήματα
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
Aaron Gustafson
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
Christopher Schmitt
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
Chris Mills
 
A Brief Interlude into HTML5
A Brief Interlude into HTML5A Brief Interlude into HTML5
A Brief Interlude into HTML5
Cameron Kilgore
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 
Naming Things (with notes)
Naming Things (with notes)Naming Things (with notes)
Naming Things (with notes)
Pete Nicholls
 
Naming Things
Naming ThingsNaming Things
Naming Things
Pete Nicholls
 

Más contenido relacionado

Similar a Rapid Web Design Prototyping with HTML5 and WebKit

WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
Jen Simmons
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 

Similar a Rapid Web Design Prototyping with HTML5 and WebKit (20)

WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
HTML5 Design
HTML5 DesignHTML5 Design
HTML5 Design
 
5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]
 
Web Components - Rutgers Tech Meetup Fall 2014
Web Components - Rutgers Tech Meetup Fall 2014Web Components - Rutgers Tech Meetup Fall 2014
Web Components - Rutgers Tech Meetup Fall 2014
 
Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
 
A Brief Interlude into HTML5
A Brief Interlude into HTML5A Brief Interlude into HTML5
A Brief Interlude into HTML5
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 

Más de Pete Nicholls

Más de Pete Nicholls (6)

Naming Things (with notes)
Naming Things (with notes)Naming Things (with notes)
Naming Things (with notes)
 
Naming Things
Naming ThingsNaming Things
Naming Things
 
Ernest Code
Ernest CodeErnest Code
Ernest Code
 
Brewbot
BrewbotBrewbot
Brewbot
 
Introduction to Erlang
Introduction to ErlangIntroduction to Erlang
Introduction to Erlang
 
Working with Git
Working with GitWorking with Git
Working with Git
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. 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 FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Último (20)

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud 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 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
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 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 ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
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 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 New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Rapid Web Design Prototyping with HTML5 and WebKit

Notas del editor