SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
11 tips to ...
learn about
Like @AGConsult and @Wolfr_ did to
their presentations, I added some of
these sticky notes to give extra
meaning to some slides since they
mostly contain a few words or
images.
Hi! I’m Thomas
I work at
HTML5 isn’t just another
buzzword
                 I notice that the term HTML5 is often
                 being used as an argument by sales,
                 which is a good thing because it’s not
                 just another buzzword and there’s a
                 lot to it.
but it won’t replace Flash either




         But I also want to make sure that people aren’t
         thinking that HTML5 is the new Flash because of
         it’s possibilities concerning animations and such.
         They are two, totally different ways of
         approaching the web. They both have their
         qualities as well as shortcomings.
What do you need to know?
‣   extension HTML4

       I guess the most important thing you should know
       is that HTML5 is just an extension of it’s
       predecessor HTML4. I often get the impression that
       some are talking about this topic as if it were a
       whole new invention.
       In short, HTML5 is an improved version of the
       previous versions with great eye for semantics and
       native browser support for elements such as video
       and audio (where you often were in need of flash
       embeds in the past).
What do you need to know?
‣   extension HTML4
‣   browser support
What do you need to know?
‣   extension HTML4
‣   browser support
‣   semantics
What do you need to know?
‣   extension HTML4
‣   browser support
‣   semantics
‣   input type attributes
What do you need to know?
‣   extension HTML4
‣   browser support
‣   semantics
‣   input type attributes
‣   media
What do you need to know?
‣   extension HTML4
‣   browser support
‣   semantics
‣   input type attributes
‣   media
‣   canvas
Browser support
Browser support
Browser support


<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



                  HTML5 degrades gracefully. In practice this means that
                  older browsers can handle these new tags perfectly,
                  except for IE6, IE7 and IE8.
                  To enable the use of the new HTML5 tags, you need to
                  load this simple piece of JavaScript which creates these
                  new elements for you so the browser would recognize
                  them.
                  Important note: you should use a CSS reset for every
                  browser to define the new tags as block level elements.
Semantics
‣   article   ‣   header
‣   section   ‣   footer
‣   aside     ‣   time
‣   nav       ‣   summary
‣   figure
Semantics
diveintohtml5.info/semantics.html

          Some of the new tags are listed on the previous
          slide, which I think contribute most to the
          semantics of a web page.
          If you want more information about those tags
          or other new ones, I suggest you to visit the
          website mentioned above which was made by
          Mark Pilgrim.
Input type attributes
‣   tel
             Another interesting aspect of HTML5 are the
             new input type attributes. They provide
‣   search   great usability improvements with little
             effort.
             For example: when specifying an email type
             attribute on an input field, the keyboard on

‣   email    an iPhone shows slight changes with the
             default one when this input field is focussed.
             This way the @-symbol is directly accessible
             without having to tap the special characters
             button.
‣   number
‣   range
Media
‣   audio
‣   video   HTML5 provides the new audio and video tag
            which give native browser implementations of
            music and video fragments.
            The problem so far is that there is no agreement
            amongst browsers which format to use for these
            files.
            At this point, you have to specify each format for
            audio and video to get this to work cross browser.
            This way, the browser will just pick the format it
            supports and ignore the others.
Canvas
Uses JavaScript to make drawings
on a web page

           The new canvas element is a fun way
           to play with drawings on the web
           without having to use Flash. You can
           use this for a variety of things from
           showing the rhythm and beats from a
           song to plain old graphs which
           represent the finances of your
           company.
We live in a world where everything becomes digital.
        Still, I grew up with getting to know both books and
        the web.
        What I’m trying to say is that you should consider

Books   buying some books and start reading again.
        Some books I definitely recommend are the ones
        from “A book apart” on different web-related topics.
Books
        Another really cool one is “Hardboiled
        web design” by Andy Clarke.
        It has awesome graphics and
        interesting practical tips and tricks on
        HTML5 and related topics.
Books




        If you want to get familiar with
        HTML5 in specific, here’s a great
        book to get an “Introduction to
        HTML5” by Bruce Lawson.
Social networks
Social networks
Social networks
                                  ‣   @adactio
                                  ‣   @jina
                                  ‣   @leaverou

I guess we all know Twitter, so
                                  ‣   @codepo8
why not follow a few people who
can teach you a thing or two
about HTML5 and other new cool
stuff?
                                  ‣   @necolas
11 tips for HTML5
Blog
‣   html5doctor.com
‣   alistapart.com      If you prefer online reading over
                        books, here are some blogs you
                        should read to learn about the web.
                        Especially html5doctor.com is
‣   adactio.com         interesting because they answer
                        questions from their readers.



‣   hacks.mozilla.com
‣   nicolasgallagher.com
View source
Inspector tools   In my opinion, an underestimated
                  way of learning about the web: use
                  the inspector tools to see how
                  other people have built websites or
                  certain parts in them.
                  The same goes for the view source
                  tip actually.
Inspector tools
If you ask me, the best tip I can give you: get to
know the Fronteers organisation. They organize
this fantastic annual conference in Amsterdam
with a ton of international speakers.
If you don’t want to wait a whole year to get in
touch (and you shouldn’t), you should attend one
of the (free) meetings which are organized
monthly throughout Belgium and the Netherlands.
Just visit fronteers.nl and follow @fronteersbe on
Twitter. Hope to see you at the next meeting in
Belgium!
Frameworks
             Best practical tip: get your hands on
             HTML5 with the HTML5 Boilerplate.
             Download it, check it out and strip what
             you don’t want to use.
             A great way to learn this stuff in practice
             and I’m sure there’s some stuff in there
             you won’t easily read about on the web if
             you’re not familiar with this topic.
Experiment
QUESTIONS?
twitter.com/decthomas
thomas@fork-cms.com
www.netlash.com

Contenu connexe

En vedette

Agile Online Marketing
Agile Online MarketingAgile Online Marketing
Agile Online MarketingBart De Waele
 
Kernwaarden van Wijs
Kernwaarden van WijsKernwaarden van Wijs
Kernwaarden van WijsBart De Waele
 
Omgaan met Nieuwe Media - Open VLD
Omgaan met Nieuwe Media - Open VLDOmgaan met Nieuwe Media - Open VLD
Omgaan met Nieuwe Media - Open VLDBart De Waele
 
How to track events with GA
How to track events with GAHow to track events with GA
How to track events with GABart De Waele
 
Understand and act on your goal flow analysis
Understand and act on your goal flow analysisUnderstand and act on your goal flow analysis
Understand and act on your goal flow analysisBart De Waele
 
10 tips for a usable website
10 tips for a usable website10 tips for a usable website
10 tips for a usable websiteBart De Waele
 
CIO Support Services Framework Part I of II - Andy Blumenthal
CIO Support Services Framework Part I of II - Andy BlumenthalCIO Support Services Framework Part I of II - Andy Blumenthal
CIO Support Services Framework Part I of II - Andy BlumenthalAndy (Avraham) Blumenthal
 
Apestaartjaren: de mobiele generatie
Apestaartjaren: de mobiele generatieApestaartjaren: de mobiele generatie
Apestaartjaren: de mobiele generatieBart De Waele
 
Wijze Case: A/B testing
Wijze Case: A/B testingWijze Case: A/B testing
Wijze Case: A/B testingBart De Waele
 
The 10 worst pieces of advice you've ever had
The 10 worst pieces of advice you've ever hadThe 10 worst pieces of advice you've ever had
The 10 worst pieces of advice you've ever hadBart De Waele
 

En vedette (20)

Online Marketing
Online MarketingOnline Marketing
Online Marketing
 
Cms
CmsCms
Cms
 
Wijze Case: SEO (3)
Wijze Case: SEO (3)Wijze Case: SEO (3)
Wijze Case: SEO (3)
 
Agile Online Marketing
Agile Online MarketingAgile Online Marketing
Agile Online Marketing
 
Kernwaarden van Wijs
Kernwaarden van WijsKernwaarden van Wijs
Kernwaarden van Wijs
 
Omgaan met Nieuwe Media - Open VLD
Omgaan met Nieuwe Media - Open VLDOmgaan met Nieuwe Media - Open VLD
Omgaan met Nieuwe Media - Open VLD
 
E-apotheek
E-apotheekE-apotheek
E-apotheek
 
Wijze Case: SEO (4)
Wijze Case: SEO (4)Wijze Case: SEO (4)
Wijze Case: SEO (4)
 
How to track events with GA
How to track events with GAHow to track events with GA
How to track events with GA
 
Understand and act on your goal flow analysis
Understand and act on your goal flow analysisUnderstand and act on your goal flow analysis
Understand and act on your goal flow analysis
 
10 tips for a usable website
10 tips for a usable website10 tips for a usable website
10 tips for a usable website
 
CIO Support Services Framework Part I of II - Andy Blumenthal
CIO Support Services Framework Part I of II - Andy BlumenthalCIO Support Services Framework Part I of II - Andy Blumenthal
CIO Support Services Framework Part I of II - Andy Blumenthal
 
Netlash-bSeen ?
Netlash-bSeen ?Netlash-bSeen ?
Netlash-bSeen ?
 
EPO and the 4 A's
EPO and the 4 A'sEPO and the 4 A's
EPO and the 4 A's
 
E-commerce - INTAC
E-commerce - INTACE-commerce - INTAC
E-commerce - INTAC
 
Apestaartjaren: de mobiele generatie
Apestaartjaren: de mobiele generatieApestaartjaren: de mobiele generatie
Apestaartjaren: de mobiele generatie
 
Wijze Case: A/B testing
Wijze Case: A/B testingWijze Case: A/B testing
Wijze Case: A/B testing
 
Think Mobile
Think MobileThink Mobile
Think Mobile
 
Wijze Case: SEO
Wijze Case: SEOWijze Case: SEO
Wijze Case: SEO
 
The 10 worst pieces of advice you've ever had
The 10 worst pieces of advice you've ever hadThe 10 worst pieces of advice you've ever had
The 10 worst pieces of advice you've ever had
 

Similaire à 11 tips for HTML5

What You Need to Know About Today's eBook Technology
What You Need to Know About Today's eBook TechnologyWhat You Need to Know About Today's eBook Technology
What You Need to Know About Today's eBook TechnologySara Aden
 
Adam Vincenzini, Implementation, Google+ for businesses and brands
Adam Vincenzini, Implementation, Google+ for businesses and brandsAdam Vincenzini, Implementation, Google+ for businesses and brands
Adam Vincenzini, Implementation, Google+ for businesses and brandsCommunicate Magazine
 
Mobile Cloud Architectures
Mobile Cloud ArchitecturesMobile Cloud Architectures
Mobile Cloud ArchitecturesDavid Coallier
 
Web 3.0 - Concepts, Technologies, and Evolving Business Models
Web 3.0 - Concepts, Technologies, and Evolving Business ModelsWeb 3.0 - Concepts, Technologies, and Evolving Business Models
Web 3.0 - Concepts, Technologies, and Evolving Business Modelscghollins
 
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudWebinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudInternap
 
Mas overview dirks at cni dec11b
Mas overview dirks at cni   dec11bMas overview dirks at cni   dec11b
Mas overview dirks at cni dec11bLee Dirks
 
G electronics reviews
G electronics reviewsG electronics reviews
G electronics reviewsGTSX-05
 
Giles Palmer, Evaluation, Google+ for businesses and brands
Giles Palmer, Evaluation, Google+ for businesses and brandsGiles Palmer, Evaluation, Google+ for businesses and brands
Giles Palmer, Evaluation, Google+ for businesses and brandsCommunicate Magazine
 
Dhs sequence of_learning
Dhs sequence of_learningDhs sequence of_learning
Dhs sequence of_learningJaneyMay
 
Dhs sequence of_learning
Dhs sequence of_learningDhs sequence of_learning
Dhs sequence of_learningJaneyMay
 
Gil yehuda commoditization open source
Gil yehuda commoditization open sourceGil yehuda commoditization open source
Gil yehuda commoditization open sourcesuniltomar04
 
Gil yehuda commoditization open source
Gil yehuda commoditization open sourceGil yehuda commoditization open source
Gil yehuda commoditization open sourceOpenSourceIndia
 
Using Database Constraints Wisely
Using Database Constraints WiselyUsing Database Constraints Wisely
Using Database Constraints Wiselybarunio
 
Manchester
ManchesterManchester
Manchesterbcnpaul1
 

Similaire à 11 tips for HTML5 (20)

What You Need to Know About Today's eBook Technology
What You Need to Know About Today's eBook TechnologyWhat You Need to Know About Today's eBook Technology
What You Need to Know About Today's eBook Technology
 
Adam Vincenzini, Implementation, Google+ for businesses and brands
Adam Vincenzini, Implementation, Google+ for businesses and brandsAdam Vincenzini, Implementation, Google+ for businesses and brands
Adam Vincenzini, Implementation, Google+ for businesses and brands
 
Mobile Cloud Architectures
Mobile Cloud ArchitecturesMobile Cloud Architectures
Mobile Cloud Architectures
 
Web 3.0 - Concepts, Technologies, and Evolving Business Models
Web 3.0 - Concepts, Technologies, and Evolving Business ModelsWeb 3.0 - Concepts, Technologies, and Evolving Business Models
Web 3.0 - Concepts, Technologies, and Evolving Business Models
 
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudWebinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
 
11 tips to...
11 tips to...11 tips to...
11 tips to...
 
HTML tips
HTML tipsHTML tips
HTML tips
 
Lesson 1 introduction
Lesson 1   introductionLesson 1   introduction
Lesson 1 introduction
 
Mas overview dirks at cni dec11b
Mas overview dirks at cni   dec11bMas overview dirks at cni   dec11b
Mas overview dirks at cni dec11b
 
G electronics reviews
G electronics reviewsG electronics reviews
G electronics reviews
 
Giles Palmer, Evaluation, Google+ for businesses and brands
Giles Palmer, Evaluation, Google+ for businesses and brandsGiles Palmer, Evaluation, Google+ for businesses and brands
Giles Palmer, Evaluation, Google+ for businesses and brands
 
Dhs sequence of_learning
Dhs sequence of_learningDhs sequence of_learning
Dhs sequence of_learning
 
Dhs sequence of_learning
Dhs sequence of_learningDhs sequence of_learning
Dhs sequence of_learning
 
Slide share
Slide shareSlide share
Slide share
 
Gil yehuda commoditization open source
Gil yehuda commoditization open sourceGil yehuda commoditization open source
Gil yehuda commoditization open source
 
Gil yehuda commoditization open source
Gil yehuda commoditization open sourceGil yehuda commoditization open source
Gil yehuda commoditization open source
 
Using Database Constraints Wisely
Using Database Constraints WiselyUsing Database Constraints Wisely
Using Database Constraints Wisely
 
Do your test
Do your testDo your test
Do your test
 
Evaluation Part Four
Evaluation Part FourEvaluation Part Four
Evaluation Part Four
 
Manchester
ManchesterManchester
Manchester
 

Plus de Bart De Waele

The Data Driven Company
The Data Driven CompanyThe Data Driven Company
The Data Driven CompanyBart De Waele
 
Digital Communication Post Covid
Digital Communication Post CovidDigital Communication Post Covid
Digital Communication Post CovidBart De Waele
 
The end of the User Interface
The end of the User InterfaceThe end of the User Interface
The end of the User InterfaceBart De Waele
 
The Machine Learning Company
The Machine Learning CompanyThe Machine Learning Company
The Machine Learning CompanyBart De Waele
 
Chat is the new platform
Chat is the new platformChat is the new platform
Chat is the new platformBart De Waele
 
Digital marketing for e-commerce
Digital marketing for e-commerceDigital marketing for e-commerce
Digital marketing for e-commerceBart De Waele
 
7 misvattingen over e-commerce
7 misvattingen over e-commerce7 misvattingen over e-commerce
7 misvattingen over e-commerceBart De Waele
 
Chat will be the next big platform
Chat will be the next big platformChat will be the next big platform
Chat will be the next big platformBart De Waele
 
Digital entrepreneurship for independent financial agents.
Digital entrepreneurship for independent financial agents.Digital entrepreneurship for independent financial agents.
Digital entrepreneurship for independent financial agents.Bart De Waele
 
The Transportation Cloud
The Transportation CloudThe Transportation Cloud
The Transportation CloudBart De Waele
 
The Digital Customer Journey
The Digital Customer JourneyThe Digital Customer Journey
The Digital Customer JourneyBart De Waele
 
The Future of Finance
The Future of FinanceThe Future of Finance
The Future of FinanceBart De Waele
 
België, de bermuda driehoek van e-commerce
België, de bermuda driehoek van e-commerceBelgië, de bermuda driehoek van e-commerce
België, de bermuda driehoek van e-commerceBart De Waele
 
The Web Under Our Skin - digital trends for 2015
The Web Under Our Skin - digital trends for 2015The Web Under Our Skin - digital trends for 2015
The Web Under Our Skin - digital trends for 2015Bart De Waele
 
How to manage Entrepreneurial Spirit
How to manage Entrepreneurial SpiritHow to manage Entrepreneurial Spirit
How to manage Entrepreneurial SpiritBart De Waele
 

Plus de Bart De Waele (20)

The Data Driven Company
The Data Driven CompanyThe Data Driven Company
The Data Driven Company
 
The Big Flip
The Big FlipThe Big Flip
The Big Flip
 
Digital Communication Post Covid
Digital Communication Post CovidDigital Communication Post Covid
Digital Communication Post Covid
 
The end of the User Interface
The end of the User InterfaceThe end of the User Interface
The end of the User Interface
 
The Machine Learning Company
The Machine Learning CompanyThe Machine Learning Company
The Machine Learning Company
 
Future of Radio
Future of RadioFuture of Radio
Future of Radio
 
The Robot Marketeer
The Robot MarketeerThe Robot Marketeer
The Robot Marketeer
 
Beyond the Bots
Beyond the BotsBeyond the Bots
Beyond the Bots
 
Tech and the city
Tech and the cityTech and the city
Tech and the city
 
Chat is the new platform
Chat is the new platformChat is the new platform
Chat is the new platform
 
Digital marketing for e-commerce
Digital marketing for e-commerceDigital marketing for e-commerce
Digital marketing for e-commerce
 
7 misvattingen over e-commerce
7 misvattingen over e-commerce7 misvattingen over e-commerce
7 misvattingen over e-commerce
 
Chat will be the next big platform
Chat will be the next big platformChat will be the next big platform
Chat will be the next big platform
 
Digital entrepreneurship for independent financial agents.
Digital entrepreneurship for independent financial agents.Digital entrepreneurship for independent financial agents.
Digital entrepreneurship for independent financial agents.
 
The Transportation Cloud
The Transportation CloudThe Transportation Cloud
The Transportation Cloud
 
The Digital Customer Journey
The Digital Customer JourneyThe Digital Customer Journey
The Digital Customer Journey
 
The Future of Finance
The Future of FinanceThe Future of Finance
The Future of Finance
 
België, de bermuda driehoek van e-commerce
België, de bermuda driehoek van e-commerceBelgië, de bermuda driehoek van e-commerce
België, de bermuda driehoek van e-commerce
 
The Web Under Our Skin - digital trends for 2015
The Web Under Our Skin - digital trends for 2015The Web Under Our Skin - digital trends for 2015
The Web Under Our Skin - digital trends for 2015
 
How to manage Entrepreneurial Spirit
How to manage Entrepreneurial SpiritHow to manage Entrepreneurial Spirit
How to manage Entrepreneurial Spirit
 

Dernier

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 

Dernier (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 

11 tips for HTML5

  • 3. Like @AGConsult and @Wolfr_ did to their presentations, I added some of these sticky notes to give extra meaning to some slides since they mostly contain a few words or images.
  • 6. HTML5 isn’t just another buzzword I notice that the term HTML5 is often being used as an argument by sales, which is a good thing because it’s not just another buzzword and there’s a lot to it.
  • 7. but it won’t replace Flash either But I also want to make sure that people aren’t thinking that HTML5 is the new Flash because of it’s possibilities concerning animations and such. They are two, totally different ways of approaching the web. They both have their qualities as well as shortcomings.
  • 8. What do you need to know? ‣ extension HTML4 I guess the most important thing you should know is that HTML5 is just an extension of it’s predecessor HTML4. I often get the impression that some are talking about this topic as if it were a whole new invention. In short, HTML5 is an improved version of the previous versions with great eye for semantics and native browser support for elements such as video and audio (where you often were in need of flash embeds in the past).
  • 9. What do you need to know? ‣ extension HTML4 ‣ browser support
  • 10. What do you need to know? ‣ extension HTML4 ‣ browser support ‣ semantics
  • 11. What do you need to know? ‣ extension HTML4 ‣ browser support ‣ semantics ‣ input type attributes
  • 12. What do you need to know? ‣ extension HTML4 ‣ browser support ‣ semantics ‣ input type attributes ‣ media
  • 13. What do you need to know? ‣ extension HTML4 ‣ browser support ‣ semantics ‣ input type attributes ‣ media ‣ canvas
  • 16. Browser support <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> HTML5 degrades gracefully. In practice this means that older browsers can handle these new tags perfectly, except for IE6, IE7 and IE8. To enable the use of the new HTML5 tags, you need to load this simple piece of JavaScript which creates these new elements for you so the browser would recognize them. Important note: you should use a CSS reset for every browser to define the new tags as block level elements.
  • 17. Semantics ‣ article ‣ header ‣ section ‣ footer ‣ aside ‣ time ‣ nav ‣ summary ‣ figure
  • 18. Semantics diveintohtml5.info/semantics.html Some of the new tags are listed on the previous slide, which I think contribute most to the semantics of a web page. If you want more information about those tags or other new ones, I suggest you to visit the website mentioned above which was made by Mark Pilgrim.
  • 19. Input type attributes ‣ tel Another interesting aspect of HTML5 are the new input type attributes. They provide ‣ search great usability improvements with little effort. For example: when specifying an email type attribute on an input field, the keyboard on ‣ email an iPhone shows slight changes with the default one when this input field is focussed. This way the @-symbol is directly accessible without having to tap the special characters button. ‣ number ‣ range
  • 20. Media ‣ audio ‣ video HTML5 provides the new audio and video tag which give native browser implementations of music and video fragments. The problem so far is that there is no agreement amongst browsers which format to use for these files. At this point, you have to specify each format for audio and video to get this to work cross browser. This way, the browser will just pick the format it supports and ignore the others.
  • 21. Canvas Uses JavaScript to make drawings on a web page The new canvas element is a fun way to play with drawings on the web without having to use Flash. You can use this for a variety of things from showing the rhythm and beats from a song to plain old graphs which represent the finances of your company.
  • 22. We live in a world where everything becomes digital. Still, I grew up with getting to know both books and the web. What I’m trying to say is that you should consider Books buying some books and start reading again. Some books I definitely recommend are the ones from “A book apart” on different web-related topics.
  • 23. Books Another really cool one is “Hardboiled web design” by Andy Clarke. It has awesome graphics and interesting practical tips and tricks on HTML5 and related topics.
  • 24. Books If you want to get familiar with HTML5 in specific, here’s a great book to get an “Introduction to HTML5” by Bruce Lawson.
  • 27. Social networks ‣ @adactio ‣ @jina ‣ @leaverou I guess we all know Twitter, so ‣ @codepo8 why not follow a few people who can teach you a thing or two about HTML5 and other new cool stuff? ‣ @necolas
  • 29. Blog ‣ html5doctor.com ‣ alistapart.com If you prefer online reading over books, here are some blogs you should read to learn about the web. Especially html5doctor.com is ‣ adactio.com interesting because they answer questions from their readers. ‣ hacks.mozilla.com ‣ nicolasgallagher.com
  • 31. Inspector tools In my opinion, an underestimated way of learning about the web: use the inspector tools to see how other people have built websites or certain parts in them. The same goes for the view source tip actually.
  • 33. If you ask me, the best tip I can give you: get to know the Fronteers organisation. They organize this fantastic annual conference in Amsterdam with a ton of international speakers. If you don’t want to wait a whole year to get in touch (and you shouldn’t), you should attend one of the (free) meetings which are organized monthly throughout Belgium and the Netherlands. Just visit fronteers.nl and follow @fronteersbe on Twitter. Hope to see you at the next meeting in Belgium!
  • 34. Frameworks Best practical tip: get your hands on HTML5 with the HTML5 Boilerplate. Download it, check it out and strip what you don’t want to use. A great way to learn this stuff in practice and I’m sure there’s some stuff in there you won’t easily read about on the web if you’re not familiar with this topic.