SlideShare uma empresa 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.

Mais conteúdo relacionado

Semelhante 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
 

Semelhante 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
 

Mais de Pete Nicholls

Mais 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

Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
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
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
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
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
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
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
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
 
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
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 

Último (20)

Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
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
 
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...
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
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
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
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
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
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
 
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
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 

Rapid Web Design Prototyping with HTML5 and WebKit

Notas do Editor