SlideShare a Scribd company logo
HIGHEDWEB                                   2012



HTML5+CSS
W O R K S H O P
                        !


Christopher Schmitt | http://twitter.com/@teleject
THINGS ARE GOOD
BETWEEN US, XHTML,
RIGHT?
I MEAN. WE GET ALONG WELL.
AND WE BOTH LIKE STUFF.
               2
               3
http://dev.opera.com/articles/view/mama-markup-validation-report/




                                3
4

Recommended for you

HTML5
HTML5HTML5
HTML5

This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.

podcamphfxweb standardsweb design
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)

Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.

failuresuccesscss
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks

Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.

appapplicationwebdesign
“THE ATTEMPT TO GET THE
 WORLD TO SWITCH TO XML,
INCLUDING QUOTES AROUND
   ATTRIBUTE VALUES AND
 SLASHES IN EMPTY TAGS AND
  NAMESPACES ALL AT ONCE
       DIDN’T WORK.”
 SIR TIM BERNERS-LEE
            5
http://www.flickr.com/photos/teleject/432030263/
                       6
7
http://microformats.org/
           8

Recommended for you

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015

Building responsively allows us to create flexible user interfaces that support the widest possible audience with a single front-end codebase. But in embracing the ever-increasing contexts in which our sites are used, performance and accessibility must remain our highest priorities; we must continually question each code addition, and improve our delivery and application techniques to ensure they’re best serving users’ needs. This talk will explore the challenges of creating fast and broadly-accessible websites and offer approaches that dramatically improve performance, usability, access, and sustainability.

beyond tellerrandscott jehlbtconf
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins

This document discusses jQuery UI and plugins. It provides an overview of jQuery UI classes that can be used to style elements. It also demonstrates several common jQuery UI widgets like buttons, accordions, dialogs, and tabs. The document discusses jQuery UI effects for animations and transitions. It provides tips for identifying good plugins based on aspects like their API, documentation, support, and community. Overall, the document is an introduction to using jQuery UI and evaluating jQuery plugins.

pluginsthemerollercss framework
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

cssweb design and developmentresponsive
9
10
11
BLUEPRINTS VS REALITY




 http://www.amazon.com/gp/product/0140139966
                      12

Recommended for you

Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards

Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?

wdsgov08web standardshtml
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)

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

htmlaudiowhatwg
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009

This document outlines a presentation on beginning jQuery. It introduces jQuery, its history and core team. It also covers how to set up jQuery and explains its core functionality, including selecting elements, manipulating the DOM, AJAX, and events.

conference2009jqcon
“TAKE CARE
   OF THE LUXURIES AND
 THE NECESSITIES WILL TAKE
  CARE OF THEMSELVES.”
FRANK LLOYD WRIGHT

            13
AGENDA ITEMS

• What’s    different from XHTML to HTML5

• Why   are you here? http://goo.gl/ozNbH (You are here.)

  • HTML5, then    coding with HTML5

  • CSS3, then   coding with CSS3

• Prizes!        http://interactwithwebstandards.com/


                                    14
BUILDING
WITH HTML5
    15
DOCTYPE



   16

Recommended for you

[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5

This document discusses HTML5 and provides examples of new HTML5 elements and features such as audio, video, and the canvas element. It demonstrates how to add audio and video to a basic HTML5 page structure and provides code samples using the canvas element to draw shapes. It also discusses HTML5 support in different browsers and techniques for improving compatibility, such as using JavaScript to add support for new elements in older browsers.

html5
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash

All about CSS and its framework. This covered the most important CSS frameworks with their sample code and working.

webweb2.0css
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016

It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory. The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability. In this session reviewed tools, techniques and concepts to improve our projects: - Performance and best practices - CSS structuring and optization (BEM, SMACSS, etc.) - Fixed-Pixel vs rem, em and % - Responsive images. Drupal non-Drupal solutions and SVGs - Asynchronous Javascript loading - Typography in a responsive environment and FOUT, FOIT effects - How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help. - Beyond the Mouse: Touch and keyboard events - Using RWD patterns

progressive enhancementdrupalcampjavascript
HTML 4.01 Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

XHTML 1.0 Transitional DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




                               17
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
</html>

                     18
EXERCISE
•   Go to HTML validator at
    http://validator.w3.org/#validate_by_input

•   Then type the following HTML (below) and hit validate:

                <!DOCTYPE html>
                <title>Small HTML5</title>
                <p>Hello world</p>




                                     19
20

Recommended for you

Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap

Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap. Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI

The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013

Talking about advanced performance optimization strategies at SMX Sydney 2013 covering request reduction & optimization, caching, mark-up tuning, database & webserver performance and much, much more!

site performancesite speedseo
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications

Slides from a brownbag tech talk at eBay. A holistic approach to web performance and intimate details on YSlow's points and grading algorithm.

ebaystoyanyahoo
21
CHARACTER SET



      22
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />




                  23
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
</html>
 http://shiflett.org/blog/2005/dec/googles-xss-vulnerability.
                             24

Recommended for you

Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering

Progressive downloads and rendering allow content to be delivered and displayed to the user incrementally to improve perceived performance. JavaScript should be placed at the bottom of the page to avoid blocking. CSS can block rendering so should also be delivered non-blocking when possible. Techniques like flushing output, non-blocking scripts, and data URIs can help deliver content progressively. MHTML and preloading can help optimize delivery across multiple HTTP requests. The overall goal is to start displaying content as soon as possible while content continues downloading in the background.

wpofronteersfronteers10
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3

This document discusses HTML5 and CSS3 and whether they are ready for mainstream use. It provides an overview of the new HTML5 elements like <header>, <nav>, <section>, <article>, <aside>, and <footer>. It also covers HTML5 video and audio capabilities and supporting different video codecs. The document recommends tools for encoding video files into supported formats and discusses using text tracks for basic captioning support.

htmlhtml5css
2020vision Case Praxis
2020vision Case Praxis2020vision Case Praxis
2020vision Case Praxis
erpelektronischsepa
SPECIFY YOUR
 LANGUAGE



     25
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
</html>

                     26
INCLUDING
<SCRIPT> & <STYLE>



        27
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="styles.css" />
 <script src="scripts.js"></script>
 <title>AUSTIN, TX BBQ RESTAURANTS</title>
</head>
<body>
 <h1>....</h1>
 <p>...</p>
 </body>
                     28

Recommended for you

Hr Summit 03 26 09
Hr Summit 03 26 09Hr Summit 03 26 09
Hr Summit 03 26 09

The document discusses several key policy issues that may be addressed by the new Congress and Obama administration, including the economy, wars, health care reform, and labor issues. It outlines President Obama's priorities of passing an economic stimulus package and addressing the wars in Iraq and Afghanistan. It also summarizes proposed legislation on equal pay, labor relations, workplace flexibility, immigration, and health care reform.

AlphaTech Brochure
AlphaTech BrochureAlphaTech Brochure
AlphaTech Brochure

The document summarizes an entry-level technology training program called Alpha-Tech. The program is designed for teachers with little computer experience. It provides basic instruction on computer operations, the internet, email, word processing, spreadsheets, presentations, and more. The flexible training can be completed through contact sessions or self-study, and is assessed through a test or assignments. The goal is for learners to develop practical digital skills and confidence to use technology in their routine work.

Web Communications Brochure
Web Communications BrochureWeb Communications Brochure
Web Communications Brochure

This 10-15 hour training program teaches intermediate communication skills and is at Level-2 of the ICT Training Framework. The program covers skills for sending and receiving emails, including attachments, signatures, organization, and backups. It also teaches chatting, voice chatting, video conferencing, and using communication tools like email clients. The objectives are to become proficient at communication technology and learn basic and intermediate skills for a variety of web-based communication tools.

SYNTAX



  29
<img src=“file.png” />



          30
<IMG SRC=file.png />



         31
<iMg SrC=file.png />



         32

Recommended for you

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design

This document discusses responsive image techniques for adaptive web design. It covers using fluid grids with percentages instead of pixels, media queries to load different CSS stylesheets for different screen widths, and setting image max-widths to 100% so they scale responsively. It also discusses feature testing browser width with JavaScript instead of browser sniffing, handling high pixel density "Retina" displays, and techniques like .htaccess rewriting, <picture> element, and JavaScript libraries to serve the most appropriate image assets. The focus is on delivering the right image for each device or screen size to optimize for bandwidth, performance, and user experience.

cssresponsive web designcss3
Guided reading implementation guide
Guided reading implementation guideGuided reading implementation guide
Guided reading implementation guide

This document outlines goals and benchmarks for implementing guided reading based on a scale from "Tasks Not Started" to "Gold Standard". It includes goals for classroom management, student grouping, lesson management, text selection, teaching strategies, and accommodating student needs. The benchmarks progress from just starting to understand concepts to achieving excellence in areas like engaging all students, differentiating instruction, selecting appropriate texts, observing reading behaviors, and implementing all components of guided reading lessons with skill and fidelity.

Open Office Impress : Lesson 08
Open Office Impress : Lesson 08Open Office Impress : Lesson 08
Open Office Impress : Lesson 08

This document provides instructions for creating an educational slide presentation using OpenOffice Impress. It outlines how to: 1. Create slides and insert text within text boxes. 2. Format slides by adding numbered lists and changing background colors. 3. Insert graphics and clipart. 4. Save, view, and print the Impress presentation. The document then provides step-by-step directions for opening an example Impress file, adding two new slides, entering and formatting slide titles, and applying text effects like shadows.

<IMG SRC=file.png />



         33
<video controls=controls>




            34
EVERYTHING THAT
WAS BAD IN 1999
IS GOOD AGAIN




           35
RELEARNING SYNTAX
•   Attribute quotes “not really” required

•   UPPERCASE and lowercase HTML elements allowed

    •   So is CaMeLcAse typing.

•   No more need to do self-closing tags like <IMG /> or <BR />

•   Also, no more minimalization. So, this is okay: <dl compact>

•   Basically, everything that was bad from HTML4 in XHTML5 is good again.

    •   Full circle, baby! One more time.

                                            36

Recommended for you

Blooms Planning Sheet
Blooms Planning SheetBlooms Planning Sheet
Blooms Planning Sheet

This document outlines Bloom's Revised Taxonomy, which categorizes levels of thinking skills from lower-order to higher-order. It lists actions and products for each of the six major cognitive process categories - Remembering, Understanding, Applying, Analyzing, Evaluating, and Creating. These categories move from simpler recall tasks to more complex skills such as synthesis, evaluation and creation. Learning activities are provided as examples for each level.

[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!

Although the specification is still being written, HTML5 can be implemented on your website today. Get an overview of the new HTML elements and their semantics, learn how to incorporate audio and video without Flash, get acquainted with new JavaScript APIs (like geolocation), and more.

htmlhtml5icanhaz
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5

The document provides an overview of HTML5 and its new features. It begins by explaining that HTML5 is not a programming language and is mainly used to write web pages. It then discusses how browsers have become application platforms, prompting the need to adopt HTML5. The document outlines some of the major new features in HTML5, including semantic elements like header and nav, new input types, geolocation, local storage, offline web applications, and video playback. It also addresses questions around the future of Flash and which companies are pushing adoption of HTML5.

gtalughtml5
BRINGING BACK <B>
 AND OTHER TAGS



        37
<p>My name is
<em>Jane</em>, not
    John.</p>


        38
<p>Sally thought to
herself, <i>when will IE6
     die?</i></p>


            39
<p><strong>Registration is
required</strong> for this
       event.</p>


            40

Recommended for you

TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單

The document discusses new features in HTML5 including semantic elements, form elements, and microdata. Some key points: 1. HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article>, and <section> to define different parts of a page and improve semantics and accessibility. 2. New form input types are added like email, url, tel, number, date to support validation and new UI widgets. Attributes like placeholder, autofocus, and autocomplete improve the form experience. 3. Microdata builds on microformats to embed structured data using attributes like itemscope, itemtype, and itemprop to identify items, properties and values for search engines and APIs

html5semantic web
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks

This document provides an overview of Object Oriented CSS (OOCSS), HTML5, and web performance. It discusses what OOCSS is, how to implement it, and why it is useful. It also briefly covers some HTML5 forms and communication features. Finally, it examines how to improve website speed. The goal is to look at these topics and discuss elegant and lean CSS as opposed to "fat sack of crap" code.

cssinternethtml5
Html5
Html5Html5
Html5

The document summarizes the history and key features of HTML5. It discusses the evolution of HTML from 1991 to the present, including versions like HTML4.01. It also covers new HTML5 elements like <header>, <nav>, <section>, <article>, and <footer> that replace older <div> elements. Additionally, it provides overviews of new HTML5 APIs and features like geolocation, WebSockets, and Web Storage, as well as CSS3 properties like text-shadow, RGBa colors, gradients, and transitions.

html5css3
<p><b>Once upon a
time,</b> there was a man
  who lost his mind.</p>


            41
<p><small>The owner of
this blog is not responsible
 for mind blowage. Please
   consume at your own
     risk.</small></p>

             42
<abbr title="Accessible
    Rich Internet
Applications">ARIA</
         abbr>

      No more <acronym>
              43
THE COOLEST THING
EVER ABOUT HTML5.
      (TO ME.)


        44

Recommended for you

Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11

Presentation for the Denver HTML5 Users Group on advanced HTML techniques. Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles

poshweb standardsmicroformats
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now

The final spec of html5 won't be ready until 2022, but you don't have to wait that long to start using it today and build really advanced web apps.

IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications

This document provides an agenda for a presentation on building responsive XPages applications using Bootstrap. The presentation will introduce Bootstrap 3 and 4, provide demos of features like grids and media queries, and cover tips and best practices. Speakers will discuss upgrading to newer Bootstrap versions, changes in Bootstrap 4, and tools for testing responsive designs. The ExtLibX project for supporting Bootstrap 4 in XPages will also be presented.

xpagesresponsiveconnect
<h1>
<a href="http://example.com">
 HTML5, for Fun &amp; Profit
</a>
</h1>

<a href="http://example.com">
<img src="logo.png" alt="HTML5 for
Fun and Profit" />
</a>

                 45
<a href="http://example.com">
<h1>HTML5, for Fun &amp; Profit</
h1>
<img src="logo.png" alt="HTML5 for
Fun and Profit" />
</a>



                 46
FIGURES & CAPTIONS



        47
<figure>
! <img src="chart.png" alt="Chart of
increasing awesomeness" />
! <figcaption>The increasing amount of
awesome that this blog
demonstrates.</figcaption>
</figure>


                  48

Recommended for you

Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5

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.

computingsasha vodnikhtml5
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags

This document provides an overview of HTML basics for an ARTDM 171 class. It discusses setting up local folders for HTML work, common HTML tags like <html>, <head>, <title>, <body>, and <p>, semantic tags, linking with <a> tags, adding images with <img>, lists with <ul> and <ol>, tables with <table>, <tr>, and <td> tags, and introducing CSS for styling. It provides examples of basic page structure and tags. Homework is to refine last week's work with additional CSS styling rules.

Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)

This document discusses techniques for progressively downloading and rendering web pages to improve performance and user experience. It covers topics like preventing blocking JavaScript and CSS downloads, using techniques like deferred and async scripts, inline CSS, and flushing to start rendering sooner. It also discusses using data URIs to reduce HTTP requests by inlining images and other assets. Formats like MHTML and chunked encoding are presented as ways to progressively deliver content across browsers. The goal is to start outputting content as fast as possible while downloading remaining assets in the background.

highload 2010
FIGURE

•   Not restricted to containing IMGs

    •   Tables

    •   Audio

    •   Video

    •   Charts

    •   Code snippets

                                        49
COLLAPSABLE CONTENT



         50
51
<details>
 <summary>Upcoming Topics</summary>
 <p>For the new year, we have a great line up
of articles!</p>
 <ul>
 <li>Understanding the
Outline Algorithm</li>
 <li>When to Use
! <code>hgroup</code></li>
 <li>Machine Semantics with Microdata</li>
</ul>
</details>
Only works in Chrome; all others - https://gist.github.com/370590
                               52

Recommended for you

Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices

Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014

developmentcssfrontend
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

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.

htmlariahtml5
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations

No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them. This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.

web performancejavascript
NUMBERING
  LISTS



    53
54
<ol start="3">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>




                   55
56

Recommended for you

Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers

The document provides tips for Rails developers when working with designers, suggesting they use consistent naming for models and views, integrate CSS stylesheets and images properly, and use techniques like conditional comments and body classes to target styles for different browsers like Internet Explorer.

railsdesigner
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4

This document provides an agenda and summary for a class on CSS, Flexbox, HTML, and JavaScript. It includes reminders on getting HTML elements from JavaScript using getElementById and creating elements. It reviews a homework assignment on those methods and creating elements. It then covers GitHub branches and commands for creating a new branch. Finally, it introduces CSS and selectors, exercises in CSS, an introduction to Flexbox with a Flexbox Froggy exercise, an introduction to the Bootstrap framework with exercises in using button styles and tooltips, discusses Bootstrap themes and templates, and assigns homework to create a resume using Bootstrap and Flexbox hosted on GitHub pages.

cssbootstrapjs
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate

Introduction to Paul Irish and Divya Manian's HTML5 Boilerplate project. HTML5 Boilerplate helps you to quickly get up and running with front-end web project.

html5 boilerplatehtml5media queries
<p>The results are in for your favorite fruit,
and we have a tie for first place!</p>
<ol>
<li value="1">Bananas</li>
<li value="1">Oranges</li>
<li value="2">Apples</li>
</ol>




                       57
EDITABLE ELEMENTS



        58
59
<div contenteditable>
<p>Quick Fox Jumped Over the Lazy Dog</
p>
</div>




                    60

Recommended for you

Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency

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.

efficient codingcssdenisejacobs
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut

The document discusses new features in HTML5 including: 1. New semantic HTML5 elements like <header>, <nav>, <section>, <article>, and <footer> that help structure and provide meaning to content. 2. New attributes like "role", "data-", "aria-", "draggable", and microdata attributes that add more semantics and meaning. 3. New form input types like email, number, date, time, etc. and new form attributes that make forms more usable.

html5webglapi
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers

This document introduces Diazo, an open source theme engine for bridging web designers and developers. It discusses how Diazo works by using XML rules and XSLT to transform unthemed HTML content into themed content. It provides examples of common rules for replacing elements, including and dropping content, and merging navigation. Diazo allows maintaining design templates separately from dynamic content and deploying transformed content through an XSLT processor. The conclusion recommends starting with example codes, using the editor for common tasks, and keeping organizational themes consistent.

plonepython
DRAG N DROP



     61
<h2 draggable>Block-Level Links</h2>




      http://html5doctor.com/native-drag-and-drop/
                           62
HTML5, MICROFORMATS
    & METADATA



         63
64

Recommended for you

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product

This document discusses best practices for using color in web design to ensure accessibility and avoid accessibility issues related to color contrast. It provides an overview of color theory terms, different color schemes, and examples of how top companies use color on their websites. It also reviews guidelines for sufficient color contrast from the WCAG and tools for checking color contrast. The key recommendations are to use color thoughtfully following principles of contrast and accessibility, apply sufficient contrast ratios to all elements, and proactively test color accessibility.

coloraccessibilityproduct design
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design

Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.

css3funkarwdimg
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

The document discusses adaptive images and responsive web design. It covers using srcset and sizes attributes, the <picture> element, and feature testing versus browser sniffing to determine the best image to display based on factors like screen width, resolution, and bandwidth. It also discusses workarounds like background-size, SVG, and font-based solutions for responsive images.

rwdhtml5rwdimg
“Designed for humans first and
       machines second,
microformats are a set of simple,
 open data formats built upon
      existing and widely
      adopted standards.”




               65
“HTML design patterns for common
chunks of content that web builders need
           to markup anyway.”

“Oh, and Google understands them, too.”




                   66
67
REPLACING ABBR

•   <ABBR> element is used by screenreaders to expand abbreviations
    like “lbs” or “NCAAP”

•   However unintended consequences occurred trying to workaround
    browser bugs for other HTML elements

•   What happens when a screenreaders text like this:

    •   “Let’s go to <abbr class="geo"
        title="30.300474;-97.747247">Austin, TX</abbr>”


    http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
                                        68

Recommended for you

[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014

The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.

cssweb design and developmentweb design
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design

The document summarizes Christopher Schmitt's presentation at RWD Summit 2014 on adaptive images in responsive web design. It discusses using feature testing over browser sniffing to determine screen resolution and bandwidth. It presents techniques like srcset, picture, and JavaScript solutions to serve appropriately sized images. It also covers workarounds like background-size, SVG, and font-based solutions when native techniques are not supported. The focus is on building responsive images that scale with the device and load quickly.

htmladaptive imageshtml5
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code

This document provides an overview of GitHub and version control using Git. It discusses how GitHub allows for cloud-based code repositories that enable social coding and collaboration. Key Git commands are explained such as add, commit, status, log, branch, merge. Remote repositories are covered, including cloning repositories and pushing code to GitHub. Conflict resolution during merges is demonstrated. Examples of open source projects and tools hosted on GitHub are provided.

github
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
 <span class="summary">Web 2.0 Conference</span>:
 <abbr class="dtstart"
title="2007-10-05">October 5</abbr>-
 <abbr class="dtend" title="2007-10-20">20</
abbr>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>


                            69
<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://
www.web2con.com</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart"
datetime="2007-10-05">October 5</time>-
 <time class="dtend"
datetime="2007-10-19">19</time>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>


http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
                                    70
POSTSCRIPT


•   <ABBR> issue has ben resolved with new pattern (dropping <ABBR>
    altogether):
    http://microformats.org/wiki/value-class-pattern

    •   <p>Let’s go to <span class="geo">51° 30' 48.45", -0° 8'
        53.23" (<span class="value">51.513458;-0.14812</
        span>)</span> </p>



                                    71
DATA-ATTRIBUTE

•   You can set data-attribute to any element you want.

•   Set meta information that can be utilized by JavaScript or CSS later on.

                <img src=“john-smith.jpg”
                data-imgtype=“mugshot”
                alt=“John Smith’s mugshot”>




                                       72

Recommended for you

[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. The presentation covered: 1. Using the browser width, screen resolution, and bandwidth to determine the appropriate image to serve through feature testing rather than browser sniffing. 2. Techniques for serving responsive images including using .htaccess files, the <picture> element, and JavaScript libraries like HiSRC that select images based on various tests. 3. Workarounds for older browsers including using background-size: 100%, SVG images, and font-based solutions.

htmlcsshtml5
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design

This document discusses responsive images and various techniques for implementing responsive images, including: 1. Using .htaccess files to serve different image sizes based on screen resolution. 2. Implementing the <picture> element and srcset attribute to serve different image sources based on media queries. 3. Using JavaScript solutions like HiSRC to programmatically swap image sources based on screen properties like pixel density and connection speed. 4. Various workarounds and tricks for responsive images, including using background-size: 100% for images, optimizing images as SVGs, and using font-based solutions.

htmlcsshtml5
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. The presentation discusses: 1) Using feature testing and media queries to determine screen width and resolution instead of browser sniffing 2) Techniques for serving adaptive images, including .htaccess redirects, srcset, picture, and JavaScript libraries 3) Workarounds like background-size: 100% and SVG when native image solutions don't work

adaptive imageshtml5css
ATTR SELECTOR


img[data-imgtype=“mugshot”] {
/* CSS rules go here */
}




              73
PAGE STRUCTURE



      74
DIV ID=“header”
               DIV ID=“nav”


DIV ID=“section”




                           DIV ID=“sidecolumn”
DIV ID=“article”




              DIV ID=“footer”
                    75
<HEADER>
             <NAV>


<SECTION>




                       <ASIDE>
<ARTICLE>




            <FOOTER>
               76

Recommended for you

[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.

html5cssresponsive web design
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design

This document discusses techniques for responsive images on the web. It begins by explaining how to use browser width, screen resolution, and bandwidth detection to serve appropriately sized images. It then discusses .htaccess and JavaScript solutions like Filament Group's responsive images and HiSRC. It argues that CSS media queries are best for layout, while these techniques focus on images. Background-size, SVG, and Modernizr checks are presented as workarounds. Overall, the document provides an overview of different responsive image implementation strategies.

html5cssresponsive web design
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design

The document discusses adaptive images in responsive web design. It covers using the browser's user agent string and feature testing to determine screen resolution and bandwidth instead of browser sniffing. Methods presented include using viewport width with JavaScript, jQuery, and CSS media queries; checking screen resolution directly and considering retina displays; and avoiding bandwidth speed tests. Workarounds discussed are using background-size: 100% with images, SVG, and a "Clown Car" SVG technique loading different image files via CSS media queries.

drupalimghtml5
ARTICLE VS ASIDE VS
                 SECTION

•   Marc Grabsanki says:

    •   Article is unique content to that document

    •   Section is a thematic grouping of content, typically with a heading -
        pretty generic

    •   Aside is content that is tangentially related, like a sidebar
        div has no meaning whatsoever, so there is nothing semantic about
        divs

                                      77
ARTICLE VS ASIDE VS
                    SECTION
•   Bruce Lawson says:

    •   Aside is for something tangentially related to its parent element. Or, if a
        sibling to the main content, it can be used to make sidebars of navigation,
        recent comments, colophons, author bios etc.

    •   Article is a discrete piece of content that could be syndicated - a blog
        post, a news item, a comment, a widget

    •   Section can also contain articles. for example, you could have a page with a
        <section> full of entertainment articles, and a section of political news etc.

                                            78
ARTICLE VS ASIDE VS
                   SECTION

•   Molly Holzschlag, Opera standards evangelist, says:

    •   <section> clarifies <div>

    •   <article> 'replaces' <div id="content">

    •   <aside> 'replaces' <div id="sidebar">

•   Chris Mills, Opera browser employee, plays it safe:
    http://boblet.tumblr.com/post/130610820/html5-structure1

                                       79
WHAT ABOUT THE DIVS?

•   Marc Grabanski, jQuery and HTML5 guy:

    •   “div has no meaning whatsoever, so there is nothing semantic about
        divs”

•   Bruce Lawson, Opera browser employee:

    •   “Like all semantic questions, it depends on the context. If your only
        reason for wanting an element is to group stuff for styling, it's a div.”


                                          80

Recommended for you

[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design

Christopher Schmitt presented on adaptive images in responsive web design. He discussed using browser features like width, resolution and bandwidth to determine the best image to serve rather than browser sniffing. Feature testing methods included JavaScript, jQuery and CSS media queries. Workarounds for older browsers included background images, SVGs and font-based solutions. Compressed JPEG images were also suggested to reduce file sizes.

htmlhtml5css
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design

The document discusses adaptive images in responsive web design. It covers techniques like using the browser width and screen resolution to determine the appropriate image size via JavaScript or media queries. It also discusses checking bandwidth and using techniques like picture, srcset, .htaccess rewriting, and single pixel GIFs to serve the right image. The document recommends using CSS media queries for design and covers workaround techniques like background-size, SVG, and font-based solutions.

htmlhtml5responsive web design
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code

The document discusses how GitHub can be used by non-technical people. It provides an overview of version control and Git basics such as forking a repository, making commits, and merging changes. It also covers how to set up Git on your local machine and connect to GitHub to share code. GitHub features like issues, milestones, apps and Pages are mentioned. An example is given of its use on President Obama's 2012 reelection campaign with 240 code repositories.

htmlweb designgithub
<body>
 <header>
 <h1>Heading </h1>
 </header>
 <nav>
 <h3>Site Navigation</h3>
 <ul>...</ul>!
 </nav>
 <section>
  <article>
 <h3>Weblog Entry</h3>
  </article>
 </section>!
 <aside>
  <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5
March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a
href="#">this collection</a>.</p>
 </aside>
 <footer>
 <p>...</p>
 </footer>
</body>

                                           81
82
83
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>




              http://ejohn.org/blog/html5-shiv/
                             84

Recommended for you

[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design

This document discusses adaptive images in responsive web design. It begins by introducing the speaker, Christopher Schmitt, and his credentials. It then explores using the browser's user agent string and feature detection to determine screen resolution and bandwidth rather than browser sniffing. The document discusses using CSS media queries, jQuery, and the picture element to serve adaptive images. It also proposes some workaround techniques like background sizing and SVG to improve responsive images.

html5responsive web designwcatx
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design

1. The document discusses various techniques for implementing adaptive images in responsive web design, including using the browser's user agent string, feature testing dimensions with JavaScript, and CSS media queries. 2. It describes approaches like modifying .htaccess files and using the <picture> element to serve different image sizes, as well as libraries that simplify the process like HiSRC. 3. Workarounds discussed include using background images, SVG images, font-based solutions, and compressed JPEG files to improve performance on different devices.

html5cssresponsive web design
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design

This document discusses various techniques for responsive images in web design, including browser sniffing versus feature testing, image sizes for different screen resolutions and bandwidths, and different implementation methods like .htaccess files, the <picture> element, and JavaScript libraries. It covers topics like using the browser width to determine layouts, screen resolution detection, and bandwidth testing. Workarounds discussed include using background images, SVGs, icon fonts, and compressed JPEGs. The document advocates a mobile-first approach and using CSS media queries to adapt designs based on screen size.

htmladpativecss
85
PROGRESSIVELY
ENHANCED HTML5
(INFUSED WITH SHIM)


         86
87
http://modernizr.com/
          88

Recommended for you

[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs

The document appears to be a presentation about designing web and mobile graphics. It discusses using different sized image assets and the <picture> element to serve the optimal image based on screen size. It shows examples of image sizes for different screen densities and dimensions. It also discusses compressing images to reduce file size while maintaining quality.

sxsw2013htmlweb design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design

Slides from my talk at HTML5tx 2013. Thanks to all the staff and volunteers at HTML5tx for putting on the event!

mobilemobile webrwdimg
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
<script src="-/js/modernizr.min.js" type="text/
javascript" ></script>




                          89
<html lang="en" class=" canvas canvastext
geolocation rgba hsla multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface">




                       90
.audio #error {
 display: none;
}
.no-audio #error-box {
 background-color: #ffffcc;
 padding: 1px 10px;
 color: #000;
 border: 5px solid #ffff66;
}



                  CSS Feature Detection
                              91
<script>
if (Modernizr.audio) {
 function playPause() {
  var myAudio = document.getElementsByTagName('audio')
[0];
if(myAudio.paused)
 myAudio.play();
  else
 myAudio.pause();
}
}
</script>
                 JS Feature Detection
                          92

Recommended for you

find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges

accommodate the strengths, weaknesses, threats and opportunities of autonomous vehicles

automotive self-driving car technology
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf

Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.

infrastructure as codeclouddevops
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});




                    JS Feature Detection
                                 93
94
Pick and Choose Features to Detect
                95
AUDIO/VIDEO



     96

Recommended for you

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In

Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk. What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year? Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year. This webinar will review: - Key changes to privacy regulations in 2024 - Key themes in privacy and data governance in 2024 - How to maximize your privacy program in the second half of 2024

data privacyprivacy complianceai
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence

Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently. Visit- https://onliveserver.com/linux-web-hosting/

cheap linux hosting
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

postgresqlpgsqldatabase
HTML5 AUDIO



     97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<audio src="html5test.ogg" autoplay controls>
! <a href="html5test.ogg">Download audio</a>
</audio>
! </body>
</html>



                              98
DEMO
 99
HTML5 AUDIO

•   AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
    LOOP, CONTROLS

•   If you don’t have CONTROL, player becomes transparent




                                   100

Recommended for you

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

Not so much to say

Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf

To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.

data recoverydatadiskwarrior
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses

CIO Council Cal Poly Humboldt September 22, 2023

national research platformdistributed supercomputerdistributed systems
HTML5 AUDIO SUPPORT

         FF3.5+   S4+         Ch3+   Op10.5+   IE9+

 Ogg
           Y                   Y       Y
Vorbis

MP3               Y            Y                Y


WAV        Y      Y                    Y

                        101
SUPPORTING AUDIO

<audio controls autobuffer>
 <source src="html5audio.mp3" />
 <source src="html5audio.ogg" />
 
</audio>




             Use Flash for older versions of IE
                             102
SUPPORTING AUDIO

•   If you do insert audio, setting the file to autoplay is not recommended,
    as it interferes with the experience for web surfers using screen
    readers.

•   Don’t use WAV file type.

    •   Better to ship a compact disc to the user instead.




                                        103
HTML5 VIDEO



     104

Recommended for you

論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023 https://arxiv.org/abs/2307.12980

7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx

MuleSoft Meetup on APM and IDP

mulesoftai
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
!    </head>
!    <body>
<h1>Video Example</h1>
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></
param><param name="allowFullScreen" value="true"></
param><param name="allowscriptaccess" value="always"></
param><embed src="http://www.youtube.com/v/
4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="425"
height="344"></embed></object>
!    </body>
</html>



                              105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<video src="html5test.ogg"
! width="320" height="240" controls
! poster="html5testvideoposter.jpg">
! <a href="html5testvideo.ogg">Download movie</a>
</video>
! </body>
</html>


                               106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Web Document Structure</title>
! </head>
! <body>
<h1>Video Example</h1>
<video src="html5test.ogg"
! width="320" height="240" controls
! poster="html5testvideoposter.jpg">



          DEMO
! <a href="html5testvideo.ogg">Download movie</a>
</video>
! </body>
</html>


                               107
HTML5 VIDEO

•   WIDTH and HEIGHT should be required, IMO, but movie plays anyway
    based on the values in the video file itself.

•   Video formats may have their own posterframe. The browser should
    use that by default unless overridden by valid POSTER attribute value.

•   Text can be included within VIDEO element to allow user to download
    video if their browser doesn’t support.

•   If you want to give users control, use CONTROL attribute.

                                      108

Recommended for you

Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM

Quantum Communications Q&A with Gemini LLM. These are based on Shannon's Noisy channel Theorem and offers how the classical theory applies to the quantum world.

quantum communicationsshannon's channel theoremclassical theory
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx

Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation

rpa in healthcarerpa in healthcare usarpa in healthcare industry
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation

Manual Method of Product Research | Helium10 | MBS RETRIEVER

product researchhelium10 | mbs retriever
HTML5 VIDEO


•   Video can start automatically if using the AUTOPLAY=”1” attribute and
    value.

•   Spec provides for LOOP, AUTOBUFFER which also take a value of O
    or 1.

•   Codecs support...



                                    109
HTML5 VIDEO
“It would be helpful for interoperability if all browsers could
support the same codecs.
However, there are no known codecs that satisfy all the
current players: we need a codec that is known to not require
per-unit or per-distributor licensing, that is compatible with the
open source development model, that is of sufficient quality as
to be usable, and that is not an additional submarine patent
risk for large companies.
This is an ongoing issue and this section will be updated once
more information is available.”
- http://www.whatwg.org/specs/web-apps/current-work/#video-and-
                 audio-codecs-for-video-elements
                                110
CODECS
•   Ogg (or “Vorbis”)

    •   No need to worry about patents

•   H.264

    •   Created by the MPEG group

    •   If you have blu-ray disc player, you are using it

•   WebM

    •   A wrapper for the VP8 video and Ogg audio streams

                                          111
VIDEO CODEC SUPPORT

        FF3.6+   S         Ch5+     Op10.6+   IE9+


Ogg       Y                  Y        Y


H.264            Y          Y*                 Y


WebM (W4.02+)              (Ch6+)     Y


                     112

Recommended for you

Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

fdmffffused deposition modeling
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition

The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.

LESSONS LEARNED
•   To get most <video> support, you need 2 video files: H.264
    and .OGG.

    •   iOS Devices can handle MP4 (H.264)

    •   Safari, IE, Flash can deliver MP4 (H.264)

    •   Firefox, Opera can deliver .OGG

    •   Then hit them with FLV video, which supports H.264

        http://camendesign.com/code/video_for_everybody


                                      113
http://firefogg.org/


        114
http://www.videolan.org/vlc/
             115
http://handbrake.fr/


         116

Recommended for you

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...

Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.

insider securitycybersecurity threatsenterprise security
LESSONS LEARNED

•   Use VLC or Firefogg to encode common movie files types to OGG

•   H.264 encoding? Use Handbrake

•   If you are hot to trot for HTML5 Video, like, right now, check out Mark
    Pilgrim’s tutorial:
    http://diveintohtml5.org/video.html

    •   Good primer:
        http://dev.opera.com/articles/view/introduction-html5-video/


                                       117
118
119
!   <script>
!   function playPause() {
!     var myVideo = document.getElementsByTagName('video')[0];
!     if (myVideo.paused)
!       myVideo.play();
!     else
!       myVideo.pause();
!   }
!   </script>




                                 120

Recommended for you

<input type=button onclick="playPause()" value="Play/Pause"
tabindex="0" />




                               121
XHTML, ...I THINK I WANT TO SEE
ANOTHER MARKUP SPEC.
                  122
RECOMMENDED

         Design for Web Applications by Matt May and Wendy
• Universal
 Chisholm

• Bulletproof Ajax   by Jeremy Keith

• Designing   with Progressive Enhancement by Filament Group

• Microformats   Made Simple by Emily Lewis

• HTML5   Cookbook by a whole bunch of people!

                                       123
THANK YOU!
   Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
             125

Recommended for you

More Related Content

What's hot

Html5 public
Html5 publicHtml5 public
Html5 public
doodlemoonch
 
Css3
Css3Css3
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
Christian Heilmann
 
HTML5
HTML5HTML5
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
Gautam Krishnan
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
beyond tellerrand
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
Marc Grabanski
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
Ralph Whitbeck
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
Christopher Schmitt
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
PalashBajpai
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
Cristina Chumillas
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
freshlybakedpixels
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
Bastian Grimm
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
Christopher Schmitt
 

What's hot (20)

Html5 public
Html5 publicHtml5 public
Html5 public
 
Css3
Css3Css3
Css3
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
HTML5
HTML5HTML5
HTML5
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Responsive Web Design: Tips and Tricks
Responsive Web Design: Tips and TricksResponsive Web Design: Tips and Tricks
Responsive Web Design: Tips and Tricks
 
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 

Viewers also liked

2020vision Case Praxis
2020vision Case Praxis2020vision Case Praxis
2020vision Case Praxis
Friso de Jong
 
Hr Summit 03 26 09
Hr Summit 03 26 09Hr Summit 03 26 09
Hr Summit 03 26 09
ericop
 
AlphaTech Brochure
AlphaTech BrochureAlphaTech Brochure
AlphaTech Brochure
thinkict
 
Web Communications Brochure
Web Communications BrochureWeb Communications Brochure
Web Communications Brochure
thinkict
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Guided reading implementation guide
Guided reading implementation guideGuided reading implementation guide
Guided reading implementation guide
Jennifer Evans
 
Open Office Impress : Lesson 08
Open Office Impress : Lesson 08Open Office Impress : Lesson 08
Open Office Impress : Lesson 08
thinkict
 
Blooms Planning Sheet
Blooms Planning SheetBlooms Planning Sheet
Blooms Planning Sheet
007aud
 

Viewers also liked (8)

2020vision Case Praxis
2020vision Case Praxis2020vision Case Praxis
2020vision Case Praxis
 
Hr Summit 03 26 09
Hr Summit 03 26 09Hr Summit 03 26 09
Hr Summit 03 26 09
 
AlphaTech Brochure
AlphaTech BrochureAlphaTech Brochure
AlphaTech Brochure
 
Web Communications Brochure
Web Communications BrochureWeb Communications Brochure
Web Communications Brochure
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
Guided reading implementation guide
Guided reading implementation guideGuided reading implementation guide
Guided reading implementation guide
 
Open Office Impress : Lesson 08
Open Office Impress : Lesson 08Open Office Impress : Lesson 08
Open Office Impress : Lesson 08
 
Blooms Planning Sheet
Blooms Planning SheetBlooms Planning Sheet
Blooms Planning Sheet
 

Similar to [heweb11] HTML5 Makeover

[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
Christopher Schmitt
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
Myles Braithwaite
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
Html5
Html5Html5
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
Emily Lewis
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
beglee
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Cengage Learning
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
Gilbert Guerrero
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
Ontico
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
Holger Bartel
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
Aaron Gustafson
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
Pai-Cheng Tao
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
Derek Jacoby
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
Michael Enslow
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Denise Jacobs
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
Thibaut Baillet
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
TsungWei Hu
 

Similar to [heweb11] HTML5 Makeover (20)

[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet![edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
[edUiconf] HTML5 does all that… and i can haz cheeseburger? You bet!
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Html5
Html5Html5
Html5
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 

More from Christopher Schmitt

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
Christopher Schmitt
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
Christopher Schmitt
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
Christopher Schmitt
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
Christopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
Christopher Schmitt
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
Christopher Schmitt
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

More from Christopher Schmitt (20)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design[funka] Adaptive Images in Responsive Web Design
[funka] Adaptive Images in Responsive Web Design
 
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
[Austin WordPress Meetup] Adaptive Images in Responsive Web Design
 
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014[CSSDevConf] Adaptive Images in Responsive Web Design 2014
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
 
[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design[rwdsummit] Adaptive Images in Responsive Web Design
[rwdsummit] Adaptive Images in Responsive Web Design
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design
 
[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design[parisweb] Adaptive Images in Responsive Web Design
[parisweb] Adaptive Images in Responsive Web Design
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
 
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 

Recently uploaded

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 

Recently uploaded (20)

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 

[heweb11] HTML5 Makeover

  • 1. HIGHEDWEB 2012 HTML5+CSS W O R K S H O P ! Christopher Schmitt | http://twitter.com/@teleject
  • 2. THINGS ARE GOOD BETWEEN US, XHTML, RIGHT? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF. 2 3
  • 4. 4
  • 5. “THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML, INCLUDING QUOTES AROUND ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND NAMESPACES ALL AT ONCE DIDN’T WORK.” SIR TIM BERNERS-LEE 5
  • 7. 7
  • 9. 9
  • 10. 10
  • 11. 11
  • 12. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 12
  • 13. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.” FRANK LLOYD WRIGHT 13
  • 14. AGENDA ITEMS • What’s different from XHTML to HTML5 • Why are you here? http://goo.gl/ozNbH (You are here.) • HTML5, then coding with HTML5 • CSS3, then coding with CSS3 • Prizes! http://interactwithwebstandards.com/ 14
  • 16. DOCTYPE 16
  • 17. HTML 4.01 Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> XHTML 1.0 Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 17
  • 18. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> 18
  • 19. EXERCISE • Go to HTML validator at http://validator.w3.org/#validate_by_input • Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p> 19
  • 20. 20
  • 21. 21
  • 24. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> http://shiflett.org/blog/2005/dec/googles-xss-vulnerability. 24
  • 26. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> 26
  • 28. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" /> <script src="scripts.js"></script> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> 28
  • 35. EVERYTHING THAT WAS BAD IN 1999 IS GOOD AGAIN 35
  • 36. RELEARNING SYNTAX • Attribute quotes “not really” required • UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing. • No more need to do self-closing tags like <IMG /> or <BR /> • Also, no more minimalization. So, this is okay: <dl compact> • Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby! One more time. 36
  • 37. BRINGING BACK <B> AND OTHER TAGS 37
  • 38. <p>My name is <em>Jane</em>, not John.</p> 38
  • 39. <p>Sally thought to herself, <i>when will IE6 die?</i></p> 39
  • 41. <p><b>Once upon a time,</b> there was a man who lost his mind.</p> 41
  • 42. <p><small>The owner of this blog is not responsible for mind blowage. Please consume at your own risk.</small></p> 42
  • 43. <abbr title="Accessible Rich Internet Applications">ARIA</ abbr> No more <acronym> 43
  • 44. THE COOLEST THING EVER ABOUT HTML5. (TO ME.) 44
  • 45. <h1> <a href="http://example.com"> HTML5, for Fun &amp; Profit </a> </h1> <a href="http://example.com"> <img src="logo.png" alt="HTML5 for Fun and Profit" /> </a> 45
  • 46. <a href="http://example.com"> <h1>HTML5, for Fun &amp; Profit</ h1> <img src="logo.png" alt="HTML5 for Fun and Profit" /> </a> 46
  • 48. <figure> ! <img src="chart.png" alt="Chart of increasing awesomeness" /> ! <figcaption>The increasing amount of awesome that this blog demonstrates.</figcaption> </figure> 48
  • 49. FIGURE • Not restricted to containing IMGs • Tables • Audio • Video • Charts • Code snippets 49
  • 51. 51
  • 52. <details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line up of articles!</p> <ul> <li>Understanding the Outline Algorithm</li> <li>When to Use ! <code>hgroup</code></li> <li>Machine Semantics with Microdata</li> </ul> </details> Only works in Chrome; all others - https://gist.github.com/370590 52
  • 54. 54
  • 56. 56
  • 57. <p>The results are in for your favorite fruit, and we have a tie for first place!</p> <ol> <li value="1">Bananas</li> <li value="1">Oranges</li> <li value="2">Apples</li> </ol> 57
  • 59. 59
  • 60. <div contenteditable> <p>Quick Fox Jumped Over the Lazy Dog</ p> </div> 60
  • 62. <h2 draggable>Block-Level Links</h2> http://html5doctor.com/native-drag-and-drop/ 62
  • 63. HTML5, MICROFORMATS & METADATA 63
  • 64. 64
  • 65. “Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 65
  • 66. “HTML design patterns for common chunks of content that web builders need to markup anyway.” “Oh, and Google understands them, too.” 66
  • 67. 67
  • 68. REPLACING ABBR • <ABBR> element is used by screenreaders to expand abbreviations like “lbs” or “NCAAP” • However unintended consequences occurred trying to workaround browser bugs for other HTML elements • What happens when a screenreaders text like this: • “Let’s go to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 68
  • 69. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http:// www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">20</ abbr>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div> 69
  • 70. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http:// www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart" datetime="2007-10-05">October 5</time>- <time class="dtend" datetime="2007-10-19">19</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div> http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 70
  • 71. POSTSCRIPT • <ABBR> issue has ben resolved with new pattern (dropping <ABBR> altogether): http://microformats.org/wiki/value-class-pattern • <p>Let’s go to <span class="geo">51° 30' 48.45", -0° 8' 53.23" (<span class="value">51.513458;-0.14812</ span>)</span> </p> 71
  • 72. DATA-ATTRIBUTE • You can set data-attribute to any element you want. • Set meta information that can be utilized by JavaScript or CSS later on. <img src=“john-smith.jpg” data-imgtype=“mugshot” alt=“John Smith’s mugshot”> 72
  • 75. DIV ID=“header” DIV ID=“nav” DIV ID=“section” DIV ID=“sidecolumn” DIV ID=“article” DIV ID=“footer” 75
  • 76. <HEADER> <NAV> <SECTION> <ASIDE> <ARTICLE> <FOOTER> 76
  • 77. ARTICLE VS ASIDE VS SECTION • Marc Grabsanki says: • Article is unique content to that document • Section is a thematic grouping of content, typically with a heading - pretty generic • Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs 77
  • 78. ARTICLE VS ASIDE VS SECTION • Bruce Lawson says: • Aside is for something tangentially related to its parent element. Or, if a sibling to the main content, it can be used to make sidebars of navigation, recent comments, colophons, author bios etc. • Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget • Section can also contain articles. for example, you could have a page with a <section> full of entertainment articles, and a section of political news etc. 78
  • 79. ARTICLE VS ASIDE VS SECTION • Molly Holzschlag, Opera standards evangelist, says: • <section> clarifies <div> • <article> 'replaces' <div id="content"> • <aside> 'replaces' <div id="sidebar"> • Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1 79
  • 80. WHAT ABOUT THE DIVS? • Marc Grabanski, jQuery and HTML5 guy: • “div has no meaning whatsoever, so there is nothing semantic about divs” • Bruce Lawson, Opera browser employee: • “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it's a div.” 80
  • 81. <body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul>! </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section>! <aside> <p>You are reading "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5 March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer> </body> 81
  • 82. 82
  • 83. 83
  • 85. 85
  • 87. 87
  • 90. <html lang="en" class=" canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface"> 90
  • 91. .audio #error { display: none; } .no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5px solid #ffff66; } CSS Feature Detection 91
  • 92. <script> if (Modernizr.audio) { function playPause() { var myAudio = document.getElementsByTagName('audio') [0]; if(myAudio.paused) myAudio.play(); else myAudio.pause(); } } </script> JS Feature Detection 92
  • 93. Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); JS Feature Detection 93
  • 94. 94
  • 95. Pick and Choose Features to Detect 95
  • 98. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <audio src="html5test.ogg" autoplay controls> ! <a href="html5test.ogg">Download audio</a> </audio> ! </body> </html> 98
  • 100. HTML5 AUDIO • AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS • If you don’t have CONTROL, player becomes transparent 100
  • 101. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y Y Vorbis MP3 Y Y Y WAV Y Y Y 101
  • 102. SUPPORTING AUDIO <audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT code here --> </audio> Use Flash for older versions of IE 102
  • 103. SUPPORTING AUDIO • If you do insert audio, setting the file to autoplay is not recommended, as it interferes with the experience for web surfers using screen readers. • Don’t use WAV file type. • Better to ship a compact disc to the user instead. 103
  • 104. HTML5 VIDEO 104
  • 105. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></ param><param name="allowFullScreen" value="true"></ param><param name="allowscriptaccess" value="always"></ param><embed src="http://www.youtube.com/v/ 4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> ! </body> </html> 105
  • 106. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <video src="html5test.ogg" ! width="320" height="240" controls ! poster="html5testvideoposter.jpg"> ! <a href="html5testvideo.ogg">Download movie</a> </video> ! </body> </html> 106
  • 107. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic HTML5 Web Document Structure</title> ! </head> ! <body> <h1>Video Example</h1> <video src="html5test.ogg" ! width="320" height="240" controls ! poster="html5testvideoposter.jpg"> DEMO ! <a href="html5testvideo.ogg">Download movie</a> </video> ! </body> </html> 107
  • 108. HTML5 VIDEO • WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself. • Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value. • Text can be included within VIDEO element to allow user to download video if their browser doesn’t support. • If you want to give users control, use CONTROL attribute. 108
  • 109. HTML5 VIDEO • Video can start automatically if using the AUTOPLAY=”1” attribute and value. • Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1. • Codecs support... 109
  • 110. HTML5 VIDEO “It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.” - http://www.whatwg.org/specs/web-apps/current-work/#video-and- audio-codecs-for-video-elements 110
  • 111. CODECS • Ogg (or “Vorbis”) • No need to worry about patents • H.264 • Created by the MPEG group • If you have blu-ray disc player, you are using it • WebM • A wrapper for the VP8 video and Ogg audio streams 111
  • 112. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+ Ogg Y Y Y H.264 Y Y* Y WebM (W4.02+) (Ch6+) Y 112
  • 113. LESSONS LEARNED • To get most <video> support, you need 2 video files: H.264 and .OGG. • iOS Devices can handle MP4 (H.264) • Safari, IE, Flash can deliver MP4 (H.264) • Firefox, Opera can deliver .OGG • Then hit them with FLV video, which supports H.264 http://camendesign.com/code/video_for_everybody 113
  • 117. LESSONS LEARNED • Use VLC or Firefogg to encode common movie files types to OGG • H.264 encoding? Use Handbrake • If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ 117
  • 118. 118
  • 119. 119
  • 120. ! <script> ! function playPause() { ! var myVideo = document.getElementsByTagName('video')[0]; ! if (myVideo.paused) ! myVideo.play(); ! else ! myVideo.pause(); ! } ! </script> 120
  • 121. <input type=button onclick="playPause()" value="Play/Pause" tabindex="0" /> 121
  • 122. XHTML, ...I THINK I WANT TO SEE ANOTHER MARKUP SPEC. 122
  • 123. RECOMMENDED Design for Web Applications by Matt May and Wendy • Universal Chisholm • Bulletproof Ajax by Jeremy Keith • Designing with Progressive Enhancement by Filament Group • Microformats Made Simple by Emily Lewis • HTML5 Cookbook by a whole bunch of people! 123
  • 124. THANK YOU! Christopher Schmitt schmitt@heatvision.com http://twitter.com/teleject 125