SlideShare una empresa de Scribd logo
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.

Más contenido relacionado

Similar a Rapid Web Design Prototyping with HTML5 and WebKit

Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Tomohiro Nishimura
 
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
 
5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 todayDaniel Ryan
 
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 2014Yair Aviner
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge 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
 
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 markupChris Mills
 
A Brief Interlude into HTML5
A Brief Interlude into HTML5A Brief Interlude into HTML5
A Brief Interlude into HTML5Cameron Kilgore
 

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

My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 

Último (20)

My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 

Rapid Web Design Prototyping with HTML5 and WebKit

Notas del editor