SlideShare ist ein Scribd-Unternehmen logo
1 von 124
Downloaden Sie, um offline zu lesen
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today
HTML5 and CSS3 Today

Weitere ähnliche Inhalte

Andere mochten auch

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuerymanugoel2003
 
Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQueryLaurence Svekis ✔
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Kate Walser
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introductionTomi Juhola
 
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García MilanConferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García MilanAndres Karp
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Kannika Kong
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptZac Gordon
 
HTML & CSS: Chapter 06
HTML & CSS: Chapter 06HTML & CSS: Chapter 06
HTML & CSS: Chapter 06Steve Guinan
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
HTML & CSS: Chapter 07
HTML & CSS: Chapter 07HTML & CSS: Chapter 07
HTML & CSS: Chapter 07Steve Guinan
 
HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08Steve Guinan
 
Html and CSS: Chapter 02
Html and CSS: Chapter 02Html and CSS: Chapter 02
Html and CSS: Chapter 02Steve Guinan
 
HTML & CSS: Chapter 04
HTML & CSS: Chapter 04HTML & CSS: Chapter 04
HTML & CSS: Chapter 04Steve Guinan
 

Andere mochten auch (18)

Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Introduction to Android Environment
Introduction to Android EnvironmentIntroduction to Android Environment
Introduction to Android Environment
 
Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQuery
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
 
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García MilanConferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScriptHTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
 
HTML & CSS: Chapter 06
HTML & CSS: Chapter 06HTML & CSS: Chapter 06
HTML & CSS: Chapter 06
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
HTML & CSS: Chapter 07
HTML & CSS: Chapter 07HTML & CSS: Chapter 07
HTML & CSS: Chapter 07
 
HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08
 
Html and CSS: Chapter 02
Html and CSS: Chapter 02Html and CSS: Chapter 02
Html and CSS: Chapter 02
 
HTML & CSS: Chapter 04
HTML & CSS: Chapter 04HTML & CSS: Chapter 04
HTML & CSS: Chapter 04
 

Mehr von Brian Hogan

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoBrian Hogan
 
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleBrian Hogan
 
Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantBrian Hogan
 
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open SourceBrian Hogan
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With ElmBrian Hogan
 
Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptBrian Hogan
 
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.Brian Hogan
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignBrian Hogan
 
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and SassWeb Development with CoffeeScript and Sass
Web Development with CoffeeScript and SassBrian Hogan
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From ScratchBrian Hogan
 
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced RubyBrian Hogan
 
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into WordsBrian Hogan
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexBrian Hogan
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryBrian Hogan
 
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Brian Hogan
 
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with ShoesBrian Hogan
 
Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven TestingBrian Hogan
 

Mehr von Brian Hogan (20)

Creating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with HugoCreating and Deploying Static Sites with Hugo
Creating and Deploying Static Sites with Hugo
 
Automating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and AnsibleAutomating the Cloud with Terraform, and Ansible
Automating the Cloud with Terraform, and Ansible
 
Create Development and Production Environments with Vagrant
Create Development and Production Environments with VagrantCreate Development and Production Environments with Vagrant
Create Development and Production Environments with Vagrant
 
Docker
DockerDocker
Docker
 
Getting Started Contributing To Open Source
Getting Started Contributing To Open SourceGetting Started Contributing To Open Source
Getting Started Contributing To Open Source
 
Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm
 
Testing Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScriptTesting Client-side Code with Jasmine and CoffeeScript
Testing Client-side Code with Jasmine and CoffeeScript
 
FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.FUD-Free Accessibility for Web Developers - Also, Cake.
FUD-Free Accessibility for Web Developers - Also, Cake.
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Web Development with CoffeeScript and Sass
Web Development with CoffeeScript and SassWeb Development with CoffeeScript and Sass
Web Development with CoffeeScript and Sass
 
Building A Gem From Scratch
Building A Gem From ScratchBuilding A Gem From Scratch
Building A Gem From Scratch
 
Intro To Advanced Ruby
Intro To Advanced RubyIntro To Advanced Ruby
Intro To Advanced Ruby
 
Turning Passion Into Words
Turning Passion Into WordsTurning Passion Into Words
Turning Passion Into Words
 
Web Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To ComplexWeb Development With Ruby - From Simple To Complex
Web Development With Ruby - From Simple To Complex
 
Stop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard LibraryStop Reinventing The Wheel - The Ruby Standard Library
Stop Reinventing The Wheel - The Ruby Standard Library
 
Intro to Ruby
Intro to RubyIntro to Ruby
Intro to Ruby
 
Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7Intro to Ruby - Twin Cities Code Camp 7
Intro to Ruby - Twin Cities Code Camp 7
 
Make GUI Apps with Shoes
Make GUI Apps with ShoesMake GUI Apps with Shoes
Make GUI Apps with Shoes
 
The Why Of Ruby
The Why Of RubyThe Why Of Ruby
The Why Of Ruby
 
Story-driven Testing
Story-driven TestingStory-driven Testing
Story-driven Testing
 

Kürzlich hochgeladen

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
 
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
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
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
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
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
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
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
 
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
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
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
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Kürzlich hochgeladen (20)

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
 
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
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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)
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
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
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
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
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
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
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Hinweis der Redaktion

  1. We must deal with changing standards. It’s part of our job.
  2. HTML5 and CSS offer some amazing ways for you to improve not only the look of your site, but also its accessibility and usability.
  3. HTML5 brings these features, which I feel are the most important out of the whole specification.
  4. CSS3 has ways to help you style things better without resorting to Javascript
  5. Accessibility really means usable by anyone. We tend to focus on things like
  6. Blind and low vision users are the ones who are obviously affected, and the hearing impaired have trouble with videos without captions. The physically impaired may have trouble working mice, and cognitive impairments can be anything from reading comprehension to dyslexia, which means you need to make wise choices about your fonts and spacing.
  7. search engines, mobile devices, slow computers, and people without javascript
  8. Who knows what this means? Build it simple, build it to work for the lowest common denominator first, add the icing.
  9. Web apps without js are still cake. They may not be as awesome as cake without frosting, but they can still be quite tasty if done right.
  10. That’s a fine line.What we really mean is that your stuff should WORK everywhere. Add the whiz-bang JavaScript at the END, not from the start.
  11. There’s not a single image on this page.
  12. but look, the content (most important part) is readable without any images.
  13. .You can build rich interfaces with HTML5.
  14. We’ve been stuck using the same tags forever. It’s time for some new ones.
  15. Overuse of Divs. Terrible disease, very contagious. You can get it from sharing code with friends or strangers. Watch out.
  16. To keep this straight we need to add comments in our code! And the only reason we have all of those divs is to make sure we have style handles.
  17. We can use less, and more meaningful, code to express our content. Sections, headings, and articles are perfect for what we need to do. We don’t need classes to tell us that things are posts.... a “post” is an article inside of the posts section!
  18. Browsers don’t actually throw up if they don’t understand an element, but you can’t style them with CSS unless you declare them. So we use JS.
  19. Once you understand how browsers can recognize these new elements, adding this library to your code should be your next step.
  20. Ever have a need to embed data into your pages that you need to access with JS?
  21. Makes it easy to see the size of the window too!
  22. We can use that data to generate the popups. No more onClicks
  23. How about a less contrived example?
  24. Here’s a regular form that will do a regular post. What if we wanted this to be a form that posted with AJAX instead? Notice the data-remote attribute?
  25. use jquery to find all of those data-remote forms and turn them into AJAX requests.
  26. We can build better forms
  27. We have some wonderful new input types in HTML5
  28. Using the email field makes iphones happy,
  29. Using the URL field makes URL entry happy.
  30. Using number controls have some neat advantages too.
  31. You can use sliders too.
  32. There are date pickers too. Only Opera implements this currently. Other devices are still catching up.
  33. Right now. Change your apps. Use these fields right now. IE doesn’t support them right away, but they’ll just be text fields.
  34. We can find elements by their attributes with CSS3, and use jQuery to bolt on the datepicker easily.
  35. No need for extra classes on form fields in most cases. Use the css3 attribute selector, supported by jQuery and other libraries.
  36. Modernizr is great for adding detection, not support, for HTML5 features. Just make sure you understand the code.
  37. Placeholder text can sometimes be helpful to your users if you use it as example text.
  38. Too much code to show thanks to IE. You cannot change a password file into a text field in IE. There are plugins available to do this work for you, and another alternative is to place the placeholder text to the right of the input field as “example” text.
  39. Autofocus places the cursor in the text field you specify.
  40. Pretty much the same detection here. And you know how to focus on a field with jQuery now. $(“field”).focus();
  41. HTML5 has native video support. The browser treats video like images now.
  42. Video support is basic.
  43. Up till now there’s been a fight about which to support.
  44. Adobe’s flash player will play WebM.
  45. But Apple won’t. They’ll stick with H264
  46. So at this point in time, it’s looking like H264 or Flash, and many people encode videos in Flash using H264.
  47. Google wanted HTML5 video for youtube and other properties. But it’s all in H264 now because Apple wants it that way.
  48. Controversial topic
  49. They did it with VHS, they did it with Windows Media, they made Flash the standard for video delivery.
  50. They want “personal devices” to view adult content and that means they need H264 video.
  51. Flash fallback, mobile support, lots of goodness. Best solution out there now, but requires multiple encodes of videos.
  52. So this should be easier, right?
  53. Encode audio twice, offer a download.
  54. We have the same problem with codecs when it comes to audio.
  55. HTML5 video and audio have a rich Javascript API. Eventually you’ll be able to trigger sounds and manipulate video very easily.
  56. So we have some content in a DIV....
  57. You get equal-width columns. So you’re just spliting the content, you’re not making a “main” and “sidebar” column with this. We’re talking newspapers here.
  58. Use less markup to style things!
  59. Conditional comments and this will give you all the stuff you need in IE.
  60. Rounding requires all of the browser prefixes. You can round text fields too which can look quite nice.
  61. Shadows on text is going to be the new Blink tag. They’re also hard to read and you should watch your use of this technique.
  62. You can add shadows to boxes too.
  63. Put those URLs in parenthesis after each link in the printed version of your page. Very handy!
  64. All the sub elements are editable too! You can have change or blur events attached and you just persist the changes to the backend using AJAX.
  65. You’ll need an action to submit your edits to anyway.
  66. We can easily set and get items using the simple API.
  67. A fallback solution is easy to create with only about 30 lines of JS or one of the various plugins available. Just remember that these are cookie-based.
  68. Localstorage persists in a local key/value store in your browser. It’s relatively secure, and the main key is the domain you’re browsing. LocalStorage stuff never leaves your browser either, unlike cookies.
  69. Webkit browsers have the support!
  70. We can easily select records, and we get transaction support too!
  71. iOs, android, chrome, safari
  72. Firefox wants their own technology, IndexedDB, to take off. It’s a NoSQL solution, like localstorage on steroids.
  73. So it’s nice to be able to store things client side, but why would we want to do that?
  74. If we were making offline mobile applications.
  75. We make a manifest file, and then link to it. Everything we need offline gets listed in the manifest
  76. No long submission processes, just put it out there and go!
  77. As long as we’re talking mobile,
  78. We can detect the device width and apply different stylesheet rules based on the query.
  79. Push content to your users!
  80. Long polling, refreshing constantly, ajax, etc
  81. True socket connections
  82. This server is written in Ruby using EventMachine. NodeJS works just as well, and is about the same size in code.
  83. The API for websockets is dead simple. Just a few events. Connect, message, close.
  84. Flash has had support for sockets for a long time and we can use that to support old browsers.
  85. Accessible rich internet apps
  86. Help the blind by telling them about it.
  87. Screenreaders see the polite region and know that not only does it update, but that updates shouldn’t interrupt the reader when it’s reading other areas.
  88. We can help screenreaders find areas of the page with important content.
  89. Really handy way to help screenreader users find elements. “Documents” are static documents we read. Screenreaders have shortcut keys for navigating. “Application” role tells screenreaders to turn off the shortcut keys so that the apps can use those shortcut keys instead.
  90. Ok, so here are the things I think you should do right now, when you leave this room, start implementing these things today:
  91. This site will let you try HTML5 and CSS3 things right in your browser.
  92. I hear this book is pretty good. It’s available now as a PDF and will be in bookstores in December.