This document provides an introduction to HTML5 and CSS3 for beginner and intermediate users in Drupal. It discusses upcoming features in Drupal 8 related to HTML5 and CSS3. The summary covers semantic elements in HTML5 like header, nav, section, article, aside, and footer. It also discusses microformats and microdata for adding machine-readable metadata to web content.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
HTML 5 has ushered in the world of Web 2.0 to Web 3.0.
How will it better search engine optimization strategies, impact social media marketing and help paid search?
The document discusses the differences between HTML4 and HTML5. It summarizes that HTML5 introduces new semantic elements like <section>, <article>, <aside>, <footer>, and <header> that allow for more explicit organization of content. It also introduces <hgroup> to group heading elements, solving limitations in HTML4 outlines. The focus is on simplifying HTML syntax and making the structure of pages more clear.
The document provides an overview of HTML5, including its history, design principles, new semantic elements, and support for rich media like canvas, audio, and video. It discusses how HTML5 aims to simplify markup, support existing content, and solve real problems while allowing older browsers to degrade gracefully. New elements are introduced to replace common div uses and provide more meaning, while features like canvas allow embedded graphics and interactivity without plugins.
HTML5 is the latest version of HTML that aims to improve the language with new multimedia and web application features while keeping it easily readable by humans and consistently understood by computers. It is still a work in progress but supported by major browsers. Key features include new elements for media playback, local storage APIs, and form controls. HTML5 also introduces new APIs for graphics, offline apps, and other features. It allows for cross-platform programming and powers mobile apps on platforms like Tizen, Firefox OS, and Windows 8.
This document discusses HTML5 and CSS3 and how they can be used to enhance the user experience on websites. It provides an overview of key features of HTML5, such as offline storage, video and audio embedding, graphics capabilities, and geolocation. It also outlines visual enhancement capabilities of CSS3, such as shadows, gradients, and animations. The document advocates testing new technologies and observing how other applications use them, while also encouraging responsible development. It concludes by noting that HTML5 and CSS3 will continue pushing the web towards cloud computing.
Theming Drupal 6 - An Introduction to the BasicsErik Baldwin
The document provides an introduction to theming in Drupal 6, covering the basics and some advanced concepts. It discusses the anatomy of a Drupal theme including files like the .info file, templates, styles, and scripts. It explains Drupal's theme engine and template language, emphasizing separation of design and logic. It also covers common template files, preprocessing functions, and the template hierarchy. The goal is to explain the fundamental components and best practices for building Drupal themes.
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
Over the past few years, HTML5 has changed web browsers and coding alike with a stream of new elements,
attributes, and possibilities. In this session we’ll explore the major features that HTML5 offers developers, including
semantic elements, form enhancements, and browser-native audio and video. We’ll also survey the landscape of
browser support and get familiar with strategies for maintaining compatibility with legacy browsers like IE 7 and 8.
Finally, we’ll look at the fundamental changes happening to the process of revising HTML as a language and we’ll
consider some of the likeliest scenarios for the evolution of HTML in coming years.
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
HTML 5 has ushered in the world of Web 2.0 to Web 3.0.
How will it better search engine optimization strategies, impact social media marketing and help paid search?
The document discusses the differences between HTML4 and HTML5. It summarizes that HTML5 introduces new semantic elements like <section>, <article>, <aside>, <footer>, and <header> that allow for more explicit organization of content. It also introduces <hgroup> to group heading elements, solving limitations in HTML4 outlines. The focus is on simplifying HTML syntax and making the structure of pages more clear.
The document provides an overview of HTML5, including its history, design principles, new semantic elements, and support for rich media like canvas, audio, and video. It discusses how HTML5 aims to simplify markup, support existing content, and solve real problems while allowing older browsers to degrade gracefully. New elements are introduced to replace common div uses and provide more meaning, while features like canvas allow embedded graphics and interactivity without plugins.
HTML5 is the latest version of HTML that aims to improve the language with new multimedia and web application features while keeping it easily readable by humans and consistently understood by computers. It is still a work in progress but supported by major browsers. Key features include new elements for media playback, local storage APIs, and form controls. HTML5 also introduces new APIs for graphics, offline apps, and other features. It allows for cross-platform programming and powers mobile apps on platforms like Tizen, Firefox OS, and Windows 8.
This document discusses HTML5 and CSS3 and how they can be used to enhance the user experience on websites. It provides an overview of key features of HTML5, such as offline storage, video and audio embedding, graphics capabilities, and geolocation. It also outlines visual enhancement capabilities of CSS3, such as shadows, gradients, and animations. The document advocates testing new technologies and observing how other applications use them, while also encouraging responsible development. It concludes by noting that HTML5 and CSS3 will continue pushing the web towards cloud computing.
Theming Drupal 6 - An Introduction to the BasicsErik Baldwin
The document provides an introduction to theming in Drupal 6, covering the basics and some advanced concepts. It discusses the anatomy of a Drupal theme including files like the .info file, templates, styles, and scripts. It explains Drupal's theme engine and template language, emphasizing separation of design and logic. It also covers common template files, preprocessing functions, and the template hierarchy. The goal is to explain the fundamental components and best practices for building Drupal themes.
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
Over the past few years, HTML5 has changed web browsers and coding alike with a stream of new elements,
attributes, and possibilities. In this session we’ll explore the major features that HTML5 offers developers, including
semantic elements, form enhancements, and browser-native audio and video. We’ll also survey the landscape of
browser support and get familiar with strategies for maintaining compatibility with legacy browsers like IE 7 and 8.
Finally, we’ll look at the fundamental changes happening to the process of revising HTML as a language and we’ll
consider some of the likeliest scenarios for the evolution of HTML in coming years.
The document provides information about an upcoming HTML5 and CSS3 workshop organized by Karkha.com. It includes the contact details of the organizers, an overview of what Karkha.com plans to do in the next four months including conducting workshops and weekend courses on open source skills, and their goals of bridging the gap between industry skills requirements and providing solutions for web and mobile applications.
HTML5 is the new standard for markup languages on the World Wide Web that reduces plugin dependence and supports desktop experiences through web applications. It includes renewed points like updated markup tags, JavaScript APIs, and CSS3 for things like real-time communication, offline storage, multimedia, and 3D graphics. HTML5 aims to make web pages and web applications work across different browsers without needing plugins.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
Easier and faster Plone theming with Deliverance and xdvJazkarta, Inc.
One of the first things that people want to do with their Plone site is customize the look-n-feel. This usually requires making a Plone theme product which is an involved process and demands someone with programming skills. The process to take an existing website design and implement it in Plone requires a good knowledge of Plone theming engine, and usually the ones most skilled to create the design are the least skilled to implement it in Plone.
But what if you could make your Plone look like any website design knowing only basic HTML/CSS skills? Well, there is a tool available that lets you do just that. Deliverance is a middleware service that sits in between your Plone site and your website design. The website design template can be any arbitrary HTML/CSS - there's nothing Plone specific about it. This talk will give clear examples of how to get started using Deliverance to cut down your Plone theming from days to hours.
Critical Rendering Path - Velocidade também é uma funcionalidadeJoao Lucas Santana
Desenvolver aplicações web requer que você entenda seus usuários e o que eles precisam, mas também requer que você entenda como o Browser funciona, como seu conteúdo é entregue e exibido aos usuários. Dessa forma, você fornece uma boa experiência com performance apropriada. Nesta palestra introduziremos os conceitos presentes no campo de Web Performance Optimization, desde as requisições de rede, passando pela sequência de passos utilizados pelos Browsers para converter e executar os conteúdos (HTML, Javascript e CSS), definir o layout e, por fim, exibir as informações.
The document discusses the process of rendering and layout in WebKit. It explains that WebKit parses HTML into a DOM tree and applies CSS styles to create a render tree. It then lays out elements based on their metrics and computed styles to establish positioning. Finally, it paints the render tree onto the screen by traversing it and issuing drawing commands to the underlying graphics system. The document provides details on how style calculations, layout, and painting optimizations work to efficiently display content on the web.
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
HTML5 is a draft specification from the W3C that adds new elements like canvas, video and audio to HTML and changes some older elements. It is not yet finalized and continues to evolve. HTML5 allows embedding multimedia like video without plugins through new elements like <video> and <audio>. It also introduces new canvas element for drawing 2D graphics and SVG for vector graphics. HTML5 supports local storage and geolocation in the browser.
This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.
Python - A Comprehensive Programming LanguageTsungWei Hu
Python - A Comprehensive Programming Language, talk at
1. CSIE, Providence University, 2009/05/08
2. CSIE, National Taichung Institute of Technology, 2009/10/29
This document contains the HTML code for the header section of a web page. It includes metadata tags like <title>, <meta> tags for description, keywords, and viewport settings. It also links various CSS style sheets and favicon icons.
Entities 101: Understanding Data Structures in DrupalAcquia
Nodes, content entities, config entities, bundles, display modes... what? For people new to Drupal, and even those that have been around awhile, the naming of these things can be confusing. Understanding the philosophy behind the Entity system is important in order to make better decisions on how to build sites that work well, and do what you need to do.
In this webinar, learn about the different data structures in Drupal, how they work, and when to use them. Topics covered will include config vs. content entities, when to use a custom entity, and more including:
The differences between core entities like taxonomy, nodes, and users
-Advantages and disadvantages to using each
-Tips for fields and display settings
-How to optimize your configuration
While we will be touching on some very deep, and specific details, this webinar will be friendly for beginners as well. No coding or programming knowledge is required. However, even some intermediate developers and long time site builders will learn a thing or two.
The document provides an overview of HTML5, including new features such as video playback, drag-and-drop, local storage, web sockets, and more. It discusses browser support for HTML5, new semantic elements like <header> and <footer>, forms improvements, and the updated syntax of HTML5 which is more flexible than previous standards. The document is a tutorial for HTML5 from TutorialsPoint that aims to give readers a good understanding of the latest capabilities and structure of HTML5.
The document provides an overview of HTML5, including new features such as video playback, drag-and-drop, local storage and geolocation. It discusses HTML5 syntax, elements, attributes, forms, and events. Key points include HTML5 being the latest version that incorporates features previously requiring plugins, improved form handling, and new semantic elements like <header> and <section>. Browser support for HTML5 is good among modern browsers.
The document provides a 6 day training agenda covering HTML, CSS, JavaScript, and jQuery. Day 1 covers HTML basics, CSS basics and layouts. Day 2 covers HTML forms, CSS styling, and responsive design. Days 3-5 cover JavaScript programming, events, AJAX, and jQuery. Day 6 covers more advanced jQuery topics.
This document discusses how browser engines work. It explains that browser engines parse HTML and CSS to build a DOM tree and render tree. It then lays out the steps involved, including making network requests, applying stylesheets, triggering reflows and repaints when the trees are updated, running JavaScript, and decoding images and other sub-resources. The document provides an overview of the different components involved, from parsing to rendering to JavaScript execution. It aims to introduce how browser engines function at a high level.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Laura Scott
This is now DEPRECATED. Please see Grok Drupal (7) Theming, February 11 Update
These are slides for my presentation at DrupalCon San Francisco, April 2010.
There is <a>audio/video of the presentation at the DCSF website</a>.
My apologies for the extraneous slides -- that's how Slideshare converted my Keynote file.
This document provides a summary of information architecture tools and resources, including websites about IA patterns, principles, and case studies. It lists URLs for sites about layout patterns, prototyping tools like Axure and Omnigraffle, style guidelines from companies, and the Information Architecture Association of Japan website with IA tools and resources.
A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.
Introduction to HTML5/CSS3 In Drupal 7Mediacurrent
HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive rich user interfaces using baked-in techniques and supported by more and more modern browsers.
If you have ever wondered about the next emerging technology on the web or need a quick crash course in HTML5 and CSS3 this program is right for you. We will answer the following questions:
What is HTML5?
How does HTML 4.01/ XHTML 1.0 compare with the new HTML5?
What are the new HTML5 structural elements?
What do you need to do to build a Drupal 7 theme in HTML5?
What is CSS3?
What are the new CSS3 properties and techniques?
What CSS3 techniques should be used in Drupal?
What are some advanced CSS3 techniques?
About our speaker: Dante Taylor, Creative Director at Mediacurrent. Dante has his Bachelor of Fine Arts (BFA) from Savannah College of Art and Design, and has worked as a designer for over ten years, starting with the version 4.7 release.
This document discusses HTML5 and CSS3 standards. It provides an overview of the history and development of HTML standards by the W3C including HTML4, XHTML1/2, and the development of HTML5 in collaboration with the WHAT-WG. It also covers new CSS3 features for borders, backgrounds, box-shadows, multiple backgrounds, transforms, transitions, web fonts, and text effects. Examples are provided and sources for further information and demos are listed.
The document provides information about an upcoming HTML5 and CSS3 workshop organized by Karkha.com. It includes the contact details of the organizers, an overview of what Karkha.com plans to do in the next four months including conducting workshops and weekend courses on open source skills, and their goals of bridging the gap between industry skills requirements and providing solutions for web and mobile applications.
HTML5 is the new standard for markup languages on the World Wide Web that reduces plugin dependence and supports desktop experiences through web applications. It includes renewed points like updated markup tags, JavaScript APIs, and CSS3 for things like real-time communication, offline storage, multimedia, and 3D graphics. HTML5 aims to make web pages and web applications work across different browsers without needing plugins.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
Easier and faster Plone theming with Deliverance and xdvJazkarta, Inc.
One of the first things that people want to do with their Plone site is customize the look-n-feel. This usually requires making a Plone theme product which is an involved process and demands someone with programming skills. The process to take an existing website design and implement it in Plone requires a good knowledge of Plone theming engine, and usually the ones most skilled to create the design are the least skilled to implement it in Plone.
But what if you could make your Plone look like any website design knowing only basic HTML/CSS skills? Well, there is a tool available that lets you do just that. Deliverance is a middleware service that sits in between your Plone site and your website design. The website design template can be any arbitrary HTML/CSS - there's nothing Plone specific about it. This talk will give clear examples of how to get started using Deliverance to cut down your Plone theming from days to hours.
Critical Rendering Path - Velocidade também é uma funcionalidadeJoao Lucas Santana
Desenvolver aplicações web requer que você entenda seus usuários e o que eles precisam, mas também requer que você entenda como o Browser funciona, como seu conteúdo é entregue e exibido aos usuários. Dessa forma, você fornece uma boa experiência com performance apropriada. Nesta palestra introduziremos os conceitos presentes no campo de Web Performance Optimization, desde as requisições de rede, passando pela sequência de passos utilizados pelos Browsers para converter e executar os conteúdos (HTML, Javascript e CSS), definir o layout e, por fim, exibir as informações.
The document discusses the process of rendering and layout in WebKit. It explains that WebKit parses HTML into a DOM tree and applies CSS styles to create a render tree. It then lays out elements based on their metrics and computed styles to establish positioning. Finally, it paints the render tree onto the screen by traversing it and issuing drawing commands to the underlying graphics system. The document provides details on how style calculations, layout, and painting optimizations work to efficiently display content on the web.
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]Aaron Gustafson
Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.
HTML5 is a draft specification from the W3C that adds new elements like canvas, video and audio to HTML and changes some older elements. It is not yet finalized and continues to evolve. HTML5 allows embedding multimedia like video without plugins through new elements like <video> and <audio>. It also introduces new canvas element for drawing 2D graphics and SVG for vector graphics. HTML5 supports local storage and geolocation in the browser.
This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.
Python - A Comprehensive Programming LanguageTsungWei Hu
Python - A Comprehensive Programming Language, talk at
1. CSIE, Providence University, 2009/05/08
2. CSIE, National Taichung Institute of Technology, 2009/10/29
This document contains the HTML code for the header section of a web page. It includes metadata tags like <title>, <meta> tags for description, keywords, and viewport settings. It also links various CSS style sheets and favicon icons.
Entities 101: Understanding Data Structures in DrupalAcquia
Nodes, content entities, config entities, bundles, display modes... what? For people new to Drupal, and even those that have been around awhile, the naming of these things can be confusing. Understanding the philosophy behind the Entity system is important in order to make better decisions on how to build sites that work well, and do what you need to do.
In this webinar, learn about the different data structures in Drupal, how they work, and when to use them. Topics covered will include config vs. content entities, when to use a custom entity, and more including:
The differences between core entities like taxonomy, nodes, and users
-Advantages and disadvantages to using each
-Tips for fields and display settings
-How to optimize your configuration
While we will be touching on some very deep, and specific details, this webinar will be friendly for beginners as well. No coding or programming knowledge is required. However, even some intermediate developers and long time site builders will learn a thing or two.
The document provides an overview of HTML5, including new features such as video playback, drag-and-drop, local storage, web sockets, and more. It discusses browser support for HTML5, new semantic elements like <header> and <footer>, forms improvements, and the updated syntax of HTML5 which is more flexible than previous standards. The document is a tutorial for HTML5 from TutorialsPoint that aims to give readers a good understanding of the latest capabilities and structure of HTML5.
The document provides an overview of HTML5, including new features such as video playback, drag-and-drop, local storage and geolocation. It discusses HTML5 syntax, elements, attributes, forms, and events. Key points include HTML5 being the latest version that incorporates features previously requiring plugins, improved form handling, and new semantic elements like <header> and <section>. Browser support for HTML5 is good among modern browsers.
The document provides a 6 day training agenda covering HTML, CSS, JavaScript, and jQuery. Day 1 covers HTML basics, CSS basics and layouts. Day 2 covers HTML forms, CSS styling, and responsive design. Days 3-5 cover JavaScript programming, events, AJAX, and jQuery. Day 6 covers more advanced jQuery topics.
This document discusses how browser engines work. It explains that browser engines parse HTML and CSS to build a DOM tree and render tree. It then lays out the steps involved, including making network requests, applying stylesheets, triggering reflows and repaints when the trees are updated, running JavaScript, and decoding images and other sub-resources. The document provides an overview of the different components involved, from parsing to rendering to JavaScript execution. It aims to introduce how browser engines function at a high level.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)Laura Scott
This is now DEPRECATED. Please see Grok Drupal (7) Theming, February 11 Update
These are slides for my presentation at DrupalCon San Francisco, April 2010.
There is <a>audio/video of the presentation at the DCSF website</a>.
My apologies for the extraneous slides -- that's how Slideshare converted my Keynote file.
This document provides a summary of information architecture tools and resources, including websites about IA patterns, principles, and case studies. It lists URLs for sites about layout patterns, prototyping tools like Axure and Omnigraffle, style guidelines from companies, and the Information Architecture Association of Japan website with IA tools and resources.
A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.
Introduction to HTML5/CSS3 In Drupal 7Mediacurrent
HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive rich user interfaces using baked-in techniques and supported by more and more modern browsers.
If you have ever wondered about the next emerging technology on the web or need a quick crash course in HTML5 and CSS3 this program is right for you. We will answer the following questions:
What is HTML5?
How does HTML 4.01/ XHTML 1.0 compare with the new HTML5?
What are the new HTML5 structural elements?
What do you need to do to build a Drupal 7 theme in HTML5?
What is CSS3?
What are the new CSS3 properties and techniques?
What CSS3 techniques should be used in Drupal?
What are some advanced CSS3 techniques?
About our speaker: Dante Taylor, Creative Director at Mediacurrent. Dante has his Bachelor of Fine Arts (BFA) from Savannah College of Art and Design, and has worked as a designer for over ten years, starting with the version 4.7 release.
This document discusses HTML5 and CSS3 standards. It provides an overview of the history and development of HTML standards by the W3C including HTML4, XHTML1/2, and the development of HTML5 in collaboration with the WHAT-WG. It also covers new CSS3 features for borders, backgrounds, box-shadows, multiple backgrounds, transforms, transitions, web fonts, and text effects. Examples are provided and sources for further information and demos are listed.
This document discusses HTML5, CSS3, and web fonts. It provides an overview of new features in the HTML5 and CSS3 specifications like new elements, attributes, media embedding, and animation. It also discusses different approaches for using these new technologies in older browsers, such as Modernizr, polyfills, and IE filters. Web fonts allow using non-system fonts and the document discusses hosted and local solutions as well as how to implement @font-face.
The document appears to be a presentation slide deck on HTML5 and CSS3 given by Zi Bin of Opera on July 20, 2010. It covers topics such as CSS3 properties like border-radius, box-shadow, text-shadow, transitions, transforms, multiple backgrounds, and @font-face. It also briefly mentions HTML5 features like video, canvas, and forms. The presentation encourages the use of open standards and provides references for further information.
The document discusses HTML5 and CSS3 for bloggers, explaining that HTML5 introduces new semantic elements and APIs while CSS3 adds new selectors and capabilities for borders, backgrounds, fonts, and transforms. It also recommends learning HTML5 and CSS3 to gain more control over blog customization and reduce the need for plugins like Flash. The document provides resources for learning more about HTML5, CSS3, and web development.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
HTML5 and CSS3 are a part of the new Web 3.0 toolbox! This session will walk you through easy ways to use some of the more advanced features in HTML5. We will explain the uses for HTML5 and CSS3 that will enhance your design and create a better user experience for your audience. If you are familiar with the basics, but want to know the best practices for integrating HTML5 features into your Drupal site now, this is the session for you.
Who’s this for:
Themers who are familiar with basic CSS3 concepts and want to take it to the next level
Practical uses of both HTML5 and CSS3 for intermediate developers
What you’ll learn:
Real Life applications to start using CSS3 and HTML5 today
Tactics to bring older browsers up to speed and enhance compatibility
Use HTML5 and CSS3 to Enhance UX
How HTML5 and CSS3 can help you design for mobile
HTML5
Microformats, Form API, Semantic captions for images
How to Enhance Adaptive Theme (D7 theme that uses HTML5)
HTML5 Themes and Modules
CSS3
Text in Columns
Transitions (& animation?)
CSS only Backgrounds
Using SVG
The Future of CSS
CSS3 and HTML5 are known as the "new kids on the web block". HTML5 Core refers to the markup language specification, while the HTML5 Family includes additional emerging technologies like CSS3, Web Workers, Web Storage, and Geolocation that enhance the user experience. Key features of HTML5 include more readable markup, audio and video elements without plugins, 2D drawing with canvas, and semantic structural elements. CSS3 introduces properties for visual effects like text shadows, transitions, and 3D transforms to create richer interactive designs on the web.
The document discusses HTML5 and CSS3 features that can be used to enhance design. It covers new HTML5 semantic elements, CSS3 properties for multiple backgrounds, borders, shadows, transforms, transitions and animations. It also discusses CSS3 selectors and styling forms with CSS3. The document provides examples and recommendations for getting started with HTML5 and CSS3 for web design.
HTML5 and CSS3 Refresher
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.
http://www.ivanomalavolta.com
The document discusses various topics in CSS3 including selectors, properties, media queries, and visual effects. It provides examples and explanations of CSS3 concepts like gradients, rounded corners, box shadow, text shadow, opacity, and more. Browser support and cross-browser compatibility of CSS3 features are also covered.
This document discusses new features in HTML5 and CSS3. It provides examples of new HTML5 elements like <header>, <nav>, <article>, and new forms elements. It also covers new CSS3 features like gradients, rounded corners, shadows. Additionally, it mentions new JavaScript APIs in HTML5 for things like geolocation, drag and drop, offline web apps, storage and more. Finally, it encourages developers to use new web standards and provides resources for learning HTML5.
Front end full stack development module 1pptxMaruthiPrasad96
The document provides information about the CSE3150 module which covers HTML5 and CSS3. It includes the following topics:
- Module I syllabus covers HTML5 syntax, attributes, events, forms, storage, canvas, and web sockets as well as CSS3 colors, gradients, and transforms.
- An assignment to develop an HR policy website is given.
- Comparisons between HTML4 and HTML5 are provided focusing on new elements, multimedia, forms, storage and responsive design in HTML5.
- Information about code editors such as VS Code, Sublime Text, Atom, Brackets, and WebStorm is listed.
Even though the specification is still being written, HTML5 can be implemented for your website today. In this workshop presented by Christopher Schmitt focused on real world solutions, attendees will learn about the new HTML elements and their semantics, HTML5 form elements, incorporate audio and video without Flash, new JavaScript API like geolocation, and more.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
The document outlines an agenda for a session on HTML, CSS, and UI/UX design. It includes a quick revision of HTML and CSS standards and practices. It introduces HTML5 best practices regarding semantic elements. It defines what UI/UX is and why it is important. It discusses some UI principles to follow, such as keeping designs simple, straightforward, and focused on context while guiding users and providing feedback.
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
This document provides an overview of HTML5 technologies including HTML5 markup, microdata/RDFa, WebFonts, Canvas, MediaQueries, performance optimizations like SPDY and HTTP 2.0. It discusses specifications from the W3C and implementations by companies. Tools for testing responsive design, fonts and browser compatibility are also mentioned. The document is written in Japanese and references the author's blog for code samples.
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
The document discusses using HTML and CSS for prototyping. It provides guidance on setting expectations and only prototyping necessary features. HTML5 semantic tags and structures are covered, along with tips for styling buttons and forms with CSS3 features like gradients, shadows and rounded corners. The document also addresses browser compatibility issues and includes resources for further information.
This 20-minute presentation provides an introduction to several HTML5 semantic tags: article, section, aside, header, footer, nav. Includes how you can address browser compatibility issues.
Drupal 8 is nearing completion with 11 critical issues remaining. Once resolved, bi-weekly release candidates will be issued and the final release will occur at least 6 weeks later. The upgrade path between Drupal 8 versions will be supported in core soon. Migrating from Drupal 6 or 7 to 8 requires building a new Drupal 8 site and migrating over content, users, and other data. Many popular contributed modules are being updated for Drupal 8 but some require 6+ months of additional work.
The document provides information on HTML elements and best practices for frontend development. It discusses the basic structure of HTML with the <html>, <head>, and <body> elements. It also covers common text elements like <p>, <h1>-<h6>, and lists. The document explains how to semantically structure tables and provides examples of the <table>, <tr>, <td>, and <th> elements. It emphasizes writing accessible, valid HTML and separating structure, presentation, and behavior.
1) Rachel Andrew discusses considerations when choosing tools and frameworks for front-end development projects, emphasizing progressive enhancement and ensuring the core experience works for all.
2) She argues against over-reliance on frameworks, which can mask issues and prevent learning core skills. Frameworks should be used lightly and evaluated on a case-by-case basis.
3) Andrew talks about the importance of standards-based development and contributing to emerging specifications like CSS Grid Layout, rather than depending entirely on pre-processors. Her goal is to encourage continued progress of the open web.
The document provides an overview of HTML5, including its history, new semantic and structural elements, why it was developed, drawbacks of HTML4, differences between HTML4 and HTML5, HTML5 features and new APIs. It discusses elements like <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, embedded media elements, and interactivity elements. It also covers using these elements and their intended purposes in site layouts.
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
Crash course introduction to web development for WordPress covering acronyms, buzzwords and concepts that often leave outsiders mystified. Overview of primary development processes and what software and tools are needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way. WordPress development tools explained for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the Loop, hooks, APIs, CLI, agile, bootstrap, slack, linting, sniffing … etc.
This document provides an introduction to HTML and CSS. It begins with an overview of HTML, including its history and purpose. It then covers HTML5 updates and differences from previous versions. The document also introduces CSS, explaining concepts like rules, selectors, properties, and values. It describes different methods for adding CSS to HTML, such as internal, external, and imported stylesheets. Finally, the document discusses CSS selectors like type, ID, and class selectors, as well as inheritance in CSS.
SXA (Sitecore Experience Accelerator) is an out-of-the-box component library and architecture that allows for increased productivity and parallel work. It includes pre-built components, local datasources, and an extended Experience Editor that allows for drag-and-drop page building. SXA uses a Helix architecture and allows for creative exchange where front-end developers can style themes without Sitecore knowledge. It provides conventions for page designs, partial designs, and HTML structure.
The document discusses HTML elements and web page layout. It defines various HTML tags like <header>, <nav>, <section>, <article>, and <footer> that are used to semantically mark up the different parts of a web page. These semantic elements clearly describe their meaning to both browsers and developers, and help structure the layout of web pages.
Top 10 Web and HTML5 Predictions for 2013Jonathan Jeon
The document discusses emerging trends in web technologies from 2012-2013, including:
1. Mobile will become the most common way to access the internet as HTML5 enabled devices proliferate.
2. HTML5 is establishing itself as the leading standard for web development, while plans are made to finalize the HTML5 recommendation in 2014 and develop HTML5.1.
3. A flood of new web APIs are being developed to provide access to device capabilities and overcome limitations of web applications.
Code for Startup MVP (Ruby on Rails) Session 1Henry S
First Session on Learning to Code for Startup MVP's using Ruby on Rails.
This session covers the web architecture, Git/GitHub and makes a real rails app that is deployed to Heroku at the end.
Thanks,
Henry
Similar to Beginner & Intermediate Guide to HTML5/CSS3 In Drupal (20)
Penn State News: Pivoting to Decoupled Drupal with GatsbyMediacurrent
Penn State is a top-ranked research university in the United States with an enrollment of over 80,000 students. When Penn State News, the marketing and communications division of Penn State, needed to modernize their legacy site, they turned to the combination of Drupal, Gatsby, and a best-in-class project team for groundbreaking open source based solutions.
In this webinar, we partner with Penn State and the Drupal Association to give an inside look at how Drupal and Gatsby were leveraged to create a digital storytelling platform with the ability to scale throughout Penn State.
Evolving How We Measure Digital Success in Higher EdMediacurrent
It's apparent that the future of higher education isn't "business as usual." Many students are forgoing education for the time being or choosing online courses over taking classes in a traditional, physical environment.
In this webinar, we partner with Siteimprove to share how higher ed institutions are shifting how they're measuring success.
Penn State scales static Drupal to new heightsMediacurrent
The Penn State News team had an ambitious goal to build a faster and more dynamic site by adopting a decoupled Drupal architecture. Not an easy task. Gatsby and Mediacurrent partnered up to deliver on the challenge and successfully scale Penn State.
Delivering Meaningful Digital Experiences in Higher EdMediacurrent
Today, both current and potential students expect access to the information and services they want, when they want them, on the platforms of their choosing. The ability to meet those expectations will be key to the success of any higher education institution.
In this webinar, we partner with Acquia to discuss how to digitally transform your institution.
Content Strategy: Building Connections with Your AudienceMediacurrent
You have a lot to say. Your users don’t have the time to read a lot of content. Let’s strategize.
In this webinar, learn how to create content that captures your audience and impresses your boss.
Decoupled Drupal and Gatsby in the Real WorldMediacurrent
Drupal and Gatsby are a proven power couple for decoupled websites, offering incredible flexibility, security, and performance. At Mediacurrent, we’ve refined our decoupled approach through real-world experience, starting as early adopters on our own site.
In this webinar, we'll explore tips, pros and cons, and our lessons learned from a first-hand Drupal/Gatsby case study.
A Better Way to Build and Manage Sites with Rain for Drupal 9Mediacurrent
Good news: if you’re setting the groundwork for a Drupal project, you don’t have to start with a blank slate. Rain CMS, an open source distribution for Drupal, can be used as a “starter” for your next Drupal project. Now shipped with Layout Builder, Rain CMS puts power and control into the hands of marketers and editors while saving time and simplifying processes for IT and web teams.
In this webinar, learn about Rain features that accelerate speed-to-market and improve the content authoring experience
Drupal Security: What You Need to KnowMediacurrent
This document discusses Drupal security best practices. It begins with introducing Mediacurrent and its vision to empower people with open source technology. It then provides an agenda on Drupal security covering Security-First planning, the Drupal security team and resources, common vulnerabilities, and Drupal best practices such as module selection, patching, and API usage. The document emphasizes automating security processes, monitoring advisories, and cultivating a security-focused culture.
Leveraging Design Systems to Streamline Web ProjectsMediacurrent
Designing for higher ed comes with many unique challenges. There are multiple stakeholders with different goals and objectives, different audiences you’re trying to reach, and the need for a flexible design that adapts to those demands.
In this webinar, learn how to plan a design strategy to drive engagement and results.
Reimagining Your Higher Ed Web StrategyMediacurrent
Whether you’re looking to boost enrollment, improve student retention, inspire, educate, or engage learners, your website plays a critical role. Prepare for the challenge with an inside look at how other institutions are adapting their digital strategy.
Hear from panelists from Pantheon, Mediacurrent, and Siteimprove. They discuss key web strategy takeaways in higher ed.
How to Digitally Transform Higher Ed with DrupalMediacurrent
The stakes are high for colleges and universities to adapt and deliver meaningful digital experiences. IT and web teams are constantly looking for ways to simplify processes on the backend, but as marketers rise to challenging times, the pressure is on to maintain a great user experience on the frontend.
In this webinar, you will learn key strategic decisions for a website redesign, challenges in higher education, and Drupal solutions to put power and control into the hands of editors.
Is my website accessible? Common mistakes (and how to fix them)Mediacurrent
Addressing accessibility problems on your website may seem intimidating. How do you start? Where do you go? What tools do you use? These are all questions you may ask yourself. But did you know that many accessibility issues on a website are things that can be relatively easy to address?
This webinar will give you an understanding of how to implement basic techniques that will help you avoid these mistakes in the future to ensure your websites are fully compliant and accessible to all.
Managing Images In Large Scale Drupal 8 & 9 WebsitesMediacurrent
Images are a critical part of most websites. They enhance the user experience and make your website more engaging and visually appealing. However, if not handled properly, images can jeopardize your website’s performance and push visitors away if your site takes too long to load. Knowing how to properly configure your site to handle images in the most effective way possible can make a big difference in converting leads, getting more sales and/or getting more visitors on your site.
Paragraphs v Layout Builder - The Final ShowdownMediacurrent
In this session from DrupalCon Global 2020, see the current champ in Drupal 8 contrib, Paragraphs (93k+ D8 usage), face off against the relatively new challenger: Layout Builder.
Creating an Organizational Culture of Giving Back to DrupalMediacurrent
1) The document is a presentation about creating a culture of giving back to open source projects within organizations. It discusses the importance and benefits of contributing to open source software and provides examples of how individuals, agencies, and enterprises can contribute.
2) The presentation provides use cases of contributions from an individual developer, the agency Mediacurrent, and the enterprise Pfizer. It discusses how Mediacurrent promotes a "contrib-first" culture and contributes extensively to Drupal.
3) The presentation urges all roles within an organization, including non-technical and technical staff as well as leadership, to find ways to contribute back to open source projects through activities like documentation, code contributions, funding, and community involvement.
Level Up Your Team: Front-End Development Best PracticesMediacurrent
Front-end web development is a critical aspect of software development. This is why the demand for skilled front-end developers is higher every year.
This webinar is an overview of best practices and standards of front-end development directly from the team who has worked with some of the world's top brands.
Upgrading to the next major Drupal release can be complex—even stressful. In this webinar, we’ll show you how to take the pain out of the process and get your Drupal 6, 7, or 8 site up and running on D9—the latest and greatest Drupal release.
How to Prove Marketing ROI: Overcoming Digital Marketing ChallengesMediacurrent
Measuring the effectiveness of marketing activities and proving impact on revenue are on the mind of every marketer. There’s no question that there’s value in properly identifying, tracking, and analyzing KPIs to understand the value marketing brings to your organization, but it can be challenging getting the framework in place to do this properly.
The official release of Drupal 9 is nearly upon us! Any organization that has done a major release upgrade before certainly knows that it can come with challenges. Here's how to prep your technology, team, and overall website strategy for the arrival.
Chart your Drupal 9 readiness roadmap to factor in the following:
Your site - Learn about code and core considerations for a successful transition.
- Your team: Plan for testing and automation. Bridge the gap between editors and site builders.
- Your toolkit: See how Drupal distributions give you a faster, easier path to launch.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slackshyamraj55
Discover the seamless integration of RPA (Robotic Process Automation), COMPOSER, and APM with AWS IDP enhanced with Slack notifications. Explore how these technologies converge to streamline workflows, optimize performance, and ensure secure access, all while leveraging the power of AWS IDP and real-time communication via Slack notifications.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
How to Get CNIC Information System with Paksim Ga.pptxdanishmna97
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
3. About Me
• Bachelor of Fine Arts in
Graphic Design from
Savannah College of Art &
Design (SCAD)
• Creative Director at
Mediacurrent
• Working in the web space for
about 12 years
• Working with Drupal since
version 4.7
• Favorite Drupal Install is
WatchGMC.com Danté Taylor
3
4. About Me
• Bachelors in Communication
Technology & Graphic Design
from Eastern Michigan
University
• Drupal Designer & Theme
Specialist at Mediacurrent
• Working in the Drupal space
for about 3 years
• Working with Drupal since
version 5
Kendall Totten
4
5. What will you learn?
HTML5
• Semantic Web • What to look for in Drupal 8
• Microformats • Enhancing Adaptive Theme
• Form API • HTML5 Themes and
• Real Life applications Modules
• Tactics to enhance
compatibility CSS3
• Enhance UX • Text in Columns
• How HTML5 can help • Transitions
you design for mobile • CSS3Pie
• Semantic captions for • Using SVG
images • The future of CSS
5
7. Web HTML5
HTML
4.01
Flash
Help
Browser
Support
Plugins
7
8. Next generation of HTML
The latest version of HTML known as
HTML5, a set of capabilities that gives
web designers and developers the ability
to create the next generation of great
online applications.
“Upgrading” to HTML5 can be as simple as
changing your doctype.
<!DOCTYPE html>
and resetting your stylesheet:
http://html5doctor.com
html-5-reset-stylesheet
8
11. From Dries
"I believe in HTML5 enough that I wanted to make it one of the
top 5 initiatives for Drupal 8; and switch Drupal's default
doctype from XHTML to HTML5. This is the fifth official Drupal
8 initiative after the Configuration Management, Design,Web
Services and Multilingual initiatives."
— Dries Buytaert
11
12. HTML5 Fallout
• Change Doctype
• Start using Outliner
• Use Header, Section,
Footer, and Nav Tags
• Start thinking about
Semantics Markup
12
13. HTML5 Elements
Head Sections Grouping Tables
doctype body p table
html article hr caption
head nav pre thead
title blockquote tbody
aside
base ol tfoot
section ul tr
link
meta header li th
style footer dl, dt, dd td
script h1-h6 figure col
noscript hgroup figcaption colgroup
address div
13
14. HTML5 Elements
Forms Embedded Text-level
form img a var
fieldset iframe em
legend embed strong
mark
label object i, b bdi
input param u bdo
button video s ruby, rt, rp
select audio small span
datalist abbr br
source
optgroup q
canvas cite
Interactive
option details
textarea
track dfn
map sub, sup summary
keygen
area time command
output
code menu
progress
meter kbd
Edits
samp del, ins
wbr
14
19. What is Semantic Web?
"The Semantic Web is a web that is
able to describe things in a way that
computers can understand."
Source: http://www.w3schools.com/semweb/default.asp
19
20. Semantic Benefits
By making the web understandable to machines:
• Programs and web sites can exchange information
• Search engines can return more relevant information in results
• Data compilers can combine data from different datasets to
find new and astounding things, like weather data or stock
market info.
20
23. <header> </hgroup>
<article>
<header> Wrong Way
<h1>My best blog post</h1>
</header>
</article>
OR
<header>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p>
</header>
23
24. <header></hgroup>
<header>
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
Right Way
</hgroup>
<p>By Richard Clark</p>
<p><time datetime="2011-03-20">
March 20th, 2011</time></p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
24
26. <section>
<div id="wrapper">
<article>
<header>
<h1>Document Outlines</h1>
Right Way
Header Content
</header>
<section id="what-are-outlines">
<h2>What are document outlines?</h2>
...content
</section>
<section id="outlines-in-html4">
<h2>Outlines in HTML4</h2>
...content
</section>
</article>
<footer>
Footer Content
</footer>
</div>
26
27. Use An Outliner Tool
• Use to group content into logical category or
sections
• With very few exceptions, section should not
be used if there is no natural heading for it.
• Section should not be used like aside or nav
containers just to position content
• Check your work in a HTML5 Outliner Tool
27
29. Quick Tip
• “<body>” is already a wrapper and can be
hacked to achieve some pretty remarkable layout
and clean code! It can have a height, width,
border, drop-shadow; you name it.
• HTML5 Does not require you to actually include
the “<body>” tag.
29
30. <nav>
The following shouldnʼt be
enclosed by <nav>
• Pagination controls
Wrong Way
• Social links
• Tags on a blog post
• Categories on a blog post
• Tertiary navigation
• Fat footers
30
31. Semantic Captions
A caption is the definition of an image
Use Figure to enclose the image and the
Figure Caption, and use some CSS3 to add a
nice slide in effect.
http://css-tricks.com/examples/SlideinCaptions/
<figure>
<img src="yay.jpg" alt="">
<figcaption class="from-left">
yay!!!
</figcaption>
</figure>
31
32. Code Sample
<figure>
<img src="/kookaburra.jpg" alt="Kooaburra">
<img src="/pelican.jpg" alt="Pelican stood on the beach">
<img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
<figcaption>Australian Birds. From left to right, Kookburra, Pelican
and Rainbow Lorikeet. Originals by
<a href="http://www.flickr.com/photos/rclark/">Richard Clark</a>
</figcaption>
</figure>
32
35. Microdata & Microformats
• Microdata is similar to microformats, in that both extend
markup to include machine-readable metadata that
describes web content.
• As such, microdata has become the third contender in the
"my semantic technology is better than yours" argument that
has been waging among microformats and RDFa
proponents.
35
37. Microdata
Global Attributes:
• itemscope – Creates the Item and indicates that descendants of this
element contain information about it.
• itemprop – Indicates that its containing tag holds the value of the specified
item property. The properties name and value context are described by the
items vocabulary.
• itemtype – A valid URL of a vocabulary that describes the item and its
properties context.
• itemid – Indicates a unique identifier of the item.
• itemref – Properties that are not descendants of the element with the
itemscope attribute can be associated with the item using this attribute.
Provides a list of id's of elements with additional properties elsewhere in the
document.
37
38. Microdata
<div itemscope itemtype="http://data-vocabulary.org/Event">
<a itemprop="url" href="http://www.example.com/events/spinaltap" >
<span itemprop="summary" >Spinal Tap</span>
</a>
<img itemprop="photo" src="spinal_tap.jpg" />
<span itemprop="description" >
After their highly-publicized search for a new drummer,
Spinal Tap kicks off their latest comeback tour.
</span>
When:
<time itemprop="startDate" datetime="2015-10-15T19:00-08:00">
Oct 15, 7:00PM </time>—
<time itemprop="endDate" datetime="2015-10-15T19:00-08:00">
Oct 15, 9:00PM </time>
Where:
<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name" >Warfield Theatre</span>
<span itemprop="ocality" >San Francisco</span>
</div>
http://schema.org/Event
38
40. Microdata & Microdata
• Your web pages have an underlying meaning that people understand
when they read the web pages.
• But search engines have a limited understanding of what is being
discussed on those pages.
• Microdata is a set of tags, introduced with HTML5, that allows you to
http://schema.org
40
42. Microformats
• Used on web pages to describe a specific type of information —for
example, a review, an event, a product, a business, or a person.
• In general, microformats use the class attribute in HTML tags
(often <span> or <div>) to assign brief and descriptive names to
entities and their properties.
42
43. Code Sample
<div>
<a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a>
<img src="spinal_tap.jpg" class="photo" />
<span class="description">
After their highly-publicized search for a new drummer, Spinal Tap kicks off their
latest comeback tour with a San Francisco show.
</span> When:
<span class="dtstart"> Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span>
<span class="dtend"> 9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span> </span>
Where:
<div class="location vcard">
<span class="fn org">Warfield Theatre</span>,
<span class="adr">
<span class="street-address">982 Market St</span>,
<span class="locality">San Francisco</span>,
<span class="region">CA</span> </span>
<span class="geo">
<span class="latitude">
<span class="value-title" title="37.774929" ></span>
</span>
</span>
</div>
</div>
43
44. hCard
• hCard uses a class of fn (meaning Full Name) to identify a
name. As is this case there’s no element surrounding my name,
we can just use a span.
• <div class="bio vcard"> <h3>About the author</h3>
<p><span class="fn">Kendall Totten</span> is a web
developer...
• At <a class="org" href="http://www.mediacurrent.com/">
Mediacurrent</a> she works on Drupal Theming and Front-End
Development. Kendall keeps a <a class="url" href="http://
www.kendallsdesign.com/">personal weblog</a> covering
web development issues and themes.</p> </div>
44
47. Drupal Themes
• AdaptiveTheme
• Genesis
• Omega
• Gamma (Omega sub theme)
• HTML5 Base
• Beta (Omega sub theme)
• Boron
• Zentropy
• Plink
http://www.qemist.us/content/acquiacom-and-omega-theme-getting-down-brass-tacks
47
48. The Winners Table
http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7
48
49. Delta Module
• Delta allows you, via the Context module to make
duplicates of your theme settings for any context on
your site. This gives you the ability for alternative
layouts as a reaction in Context... </
awesomesauce>
49
52. Drupal Modules
There are 26 HTML5 based modules for Drupal 6 and 22 for
Drupal 7. Some of them are still in development.
• HTML5 Tools
• Elements
• Video - most popular HTML5 based module
for both Drupal 6 and 7
• VideoJS
• Media: Vimeo
• Media: Archive
• Aloha HTML5 Editor
• Plupload Integration
• MediaFront
• JPlayer
52
53. Video Module
Video module allows you to upload video in any format, play video in any
format, transcode video to h246, Theora, VP8 using FFMPEG , automatically
creates video thumbnails, use video thumbnails in video node teaser, Very
reliable API for converting videos and auto thumbnailing, can be used as an
all-in-one video solution for Drupal.
http://drupal.org/project/video
53
54. More HTML5 Tools
Features you can find in the
Drupal 7 version:
• Support for the html5shiv plugin (for older
browsers)
• Support for the innershiv plugin
• Support for Google Chrome Frame
• Adds new elements for use in the Views
module
• Support for the html5 doctype with or
without RDF.
• Tons of other forms and markup changes.
54
55. HTML5 Tools Module
HTML5 Tools: Override Drupal's
Forms with their HTML5 Counterparts
• Site information
• Search block
• Search form
• User registration
• Contact forms
yoursite.com/admin/config/markup/html5-tools
55
56. HTML5 Tools Module
Simplify <HEAD> Markup
• Simplify doctype and add html5shiv
• Simplify style tags
• Simplify javascript tags
• Simplify meta tags
• Add Google Chrome Frame headers
• Adds the X-UA-Compatible: IE=Edge,chrome=1 headers for IE
browsers. This will not prompt the user to install Google Chrome
Frame, it will just use it if available.
yoursite.com/admin/config/markup/html5-tools
56
57. HTML5 Tools Module
HTML5 Tools: Convert other variables
• Alter publication date markup
• Make new Elements available in the Views UI
• If one of these is not working, it might be because your theme is
overriding what is specified here. Themes always get the last say in
how something is outputted. Check your theme's template.php file.
yoursite.com/admin/config/markup/html5-tools
57
63. SVG
Scalable Vector Graphics
(SVG) is a new graphics file
format and Web development
language based on XML.
SVG enables Web developers
and designers to create
dynamically generated, high-
quality graphics from real-time
data with precise structural
and visual control.
http://svg-wow.org/camera/camera.xhtml
63
64. SVG Benefits
• Compatibility
SVG is text based and works seamlessly with current Web
technologies like HTML, GIF, JPEG, PNG, SMIL, ASP, JSP,
and JavaScript.
• Quality
Graphics created in SVG can be scaled without loss of quality
across various platforms and devices. SVG can be used on
the Web, in print and even on portable devices while retaining
full quality.
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatemotion2
64
69. CSS Warrior
PIE (progressive internet explorer) makes Internet
Explorer 6-9 capable of rendering several of the most useful
CSS3 decoration features:
• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
http://drupal.org/project/css3pie
69
73. Modernizr
• Better yet, use Irish's modernizr, “an open source, MIT-
licensed JavaScript library that detects (browser) support for
many HTML5 & CSS3 features”
(http://diveintohtml5.org/detect.html)
• If you prefer, you can build your own modernizr
script,choosing just the elements you want to use to keep
your script small, download your customized library, and add it
to the head of your theme's page template files with:<script
src="(path-to)modernizr.min.js"></script>
• In Drupal 6, this would be page.tpl.php and in Drupal 7,
html.tpl.php. Read the full instructions here.
73
74. Modernizr Features
What does Modernizr do?
• It will replace that class with the class “js” which allows you to
know, in your CSS, whether or not JavaScript is enabled.
<html class="js canvas canvastext no-geolocation rgba hsla
multiplebgs borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions video audio
localstorage sessionstorage no-webworkers
no-applicationcache fontface">
http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr
74
87. CSS3 @Fonts
• Import directly from the Google Webfonts API:
@import url(http://fonts.googleapis.com/css?family=Alike+Angular);
http://css-tricks.com/6731-css-media-queries
87
88. CSS3 @Fonts
• Hinting (for IE)
• Font hinting is the use of instructions to adjust the display of an
outline font so that it lines up with a rasterized grid. At small
screen sizes, hinting is critical for producing clear, legible text for
human readers.
http://readableweb.com/font-hinting-explained-by-a-font-design-master/
88
94. CSS Columns
Lorem ipsum dolor sit Duis autem vel eum luptatum zzril delenit Investigationes
amet, consectetuer iriure dolor in augue duis dolore te demonstraverunt
adipiscing elit, sed hendrerit in vulputate feugait nulla facilisi. lectores legere me
diam nonummy nibh velit esse molestie Nam liber tempor cum lius quod ii legunt
euismod tincidunt ut consequat, vel illum soluta nobis eleifend saepius.
laoreet dolore magna dolore eu feugiat nulla option congue nihil
aliquam erat volutpat. facilisis at vero eros et imperdiet doming id
Ut wisi enim ad minim accumsan et iusto quod mazim placerat
veniam, quis nostrud odio dignissim qui facer possim assum.
exerci tation blandit praesent
ullamcorper suscipit Typi non habent
lobortis nisl ut aliquip Accumsan et iusto claritatem insitam; est
ex ea commodo odio dignissim qui usus legentis in iis qui
consequat. blandit praesent facit eorum claritatem.
http://www.netmagazine.com/features/future-css-layouts
http://www.makeuseof.com/dir/csstextwrap
94