SlideShare a Scribd company logo
Easing Into
                   HTML5 and CSS3
                               Brian Moon
                              dealnews.com
Who attended the
HTML5 and Javascript
                              @brianlmoon
tutorial yesterday?    http://brian.moonspot.net/
What is in HTML5?
• New Semantic Tags
 • <article>, <header>, <footer>, etc.
• New Multimedia Tags
 • <canvas>, <video>, <audio>, etc.
• New Javascript APIs
• data- attributes
• HTML5 Forms
What is in CSS3?

• New Properties
• New Selectors
• Device dependent Media Queries
What is not
   HTML5 nor CSS3?

• SVG - been around, browsers just got
  better
• Geo-Location - Separate W3C spec from
  HTML5

Recommended for you

Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals

This document discusses strategies for modernizing front-end codebases in an incremental way. It suggests starting with basic modularization by splitting code into logical chunks, then concatenating and minifying modules. Next steps include loading modules on demand using various module systems. Graceful deprecation is recommended over breaking changes. The document also advocates trying new frameworks on side projects first before adopting one. Maintaining good development practices like testing, linting, code style rules and performance testing is emphasized over choosing any particular framework.

JavaOne 2015 - Swimming upstream in the container revolution
JavaOne 2015 - Swimming upstream in the container revolutionJavaOne 2015 - Swimming upstream in the container revolution
JavaOne 2015 - Swimming upstream in the container revolution

Bert Jan Schrijver discusses Malmberg's transition from traditional operations to a containerless continuous delivery model using DevOps principles. Some key challenges included cultural resistance to change, infrastructure limits with Amazon, and ensuring proper testing environments. The approach established expert teams, defined clear principles like infrastructure as code and no downtime, and benefited the business through increased agility, availability, and cost reductions. Areas of ongoing focus include monitoring, performance and security testing, and automated resilience testing.

continuous deliverydevops
Drupal Performance
Drupal Performance Drupal Performance
Drupal Performance

A fast website is a good website, but making a website fast takes work. This session of couch coding will discuss the tips & tricks necessary to build the feeds & speeds into your website to make it soar.

drupalperformancepantheon
Who uses your site?

• Are the tech savvy?
• Are they sensitive to change?
• Are they in China? (Lots of IE6 still)
• All Mobile?
dealnews browsers
IE6 0.30%
IE7 4.19%
IE8 11.91%
             22%
                                           IE9+
                                           FF3.5+
                                           Chrome
                                           Safari
                                     78%
                                           3.1+


                   Modern Browsers
                   Other
Our design goals

• Identical UI and UX on modern browsers
• Fully functional and usable on IE8, IE7 and
  Opera
• Page should render and users should be
  able to click things in IE6
First Step



All browsers process pages with
this doctype in standards mode.

Recommended for you

Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version

Today, a web page can be delivered to a desktop computer, a television, or a handheld device like a tablet or a phone. While a technique like responsive design helps ensure that our web sites look good across that spectrum of screen sizes we may forget our web sites should also be able to perform equally well across that same spectrum. While more and more of our users are shifting their Internet usage to these more varied platforms and connection speeds our development practices might not be keeping up.In this session we’ll review why optimizing web performance should be an important step in the development of responsive websites. We’ll look at the tools that can help you understand and measure the performance of those sites as well as discuss front-end and server-side techniques that can be used to help you improve their performance. Finally, since the best way to test your site is to have real devices in hand, we’ll share “lessons learned” so you can set-up your own device lab similar to what we have at West Virginia University.This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

hewebarweb performancewvu
Continuous Deployment at Etsy: A Tale of Two Approaches
Continuous Deployment at Etsy: A Tale of Two ApproachesContinuous Deployment at Etsy: A Tale of Two Approaches
Continuous Deployment at Etsy: A Tale of Two Approaches

1. Etsy has transitioned from infrequent deployments that took weeks of work and often broke the site, to deploying up to 25 times per day with near effortless deploys. 2. By deploying frequently with small code changes and thorough testing, the probability and severity of degradations is reduced, allowing issues to be detected and resolved quickly. 3. Etsy's continuous deployment approach enables rapid experimentation and improvement through frequent analysis of deployment outcomes and re-examination of assumptions.

WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project

Jumping into pre-built Drupal projects sometimes requires a leap of faith as much for clients as for developers. The client is usually coming out of a bad previous business relationship and the code is not always structured according to your standards. During this talk, Symetris will share its experience and provide tips on how to navigate these often uncharted waters. Our goal is to help you convert an uncertain client into a long term partner and have a checklist of what to look out for as developers.

drupaldrupalcampwebsite
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx




<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
                           Semantic Tags
</head>
<body>
    <header>
        <hgroup>
             <h1>Header in h1</h1>
             <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
             <li><a href="#">Menu Option 1</a></li>
             <li><a href="#">Menu Option 2</a></li>
             <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
             <header>
                 <h1>Article #1</h1>
             </header>
             <section>
                 This is the first article. This is <mark>highlighted</mark>.
             </section>
        </article>
        <article>
             <header>
                 <h1>Article #2</h1>
             </header>
             <section>
                 This is the second article. These articles could be blog posts, etc.
             </section>
        </article>
    </section>
Semantic Tags
• Older browsers don’t treat these as block
  elements
• CSS can fix it in some browsers
• Javascript (HTML Shiv) required in older IE
  versions
• Good semantic HTML4 markup and
  Microformats already recognized by scrapers
• Would use in new projects.YMMV on ROI for
  converting well done HTML
data attributes problem


• Unknown attributes are ignored by
  browsers, but the pages don’t validate.
• Hacks exist where classes are used
  (e.g. class=”artid-574244”)
data- attributes
<div class="art body" data-artid="574244">

   • Allows you to store data as an attribute
     that is ignored by the browser
   • Any attribute prefixed with data- is ignored
     by the browser (as all unknown attributes
     are) and are treated as valid HTML5.
   • Use element.getAttribute(“data-artid”); to
     get the data
   • Use it now. Works in all browsers.

Recommended for you

TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source ToolsTYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools

In diesem Talk beschreibe ich die Continuous Integartion Pipeline von punkt.de und deren Entstehen. Es wird motiviert, warum es sich lohnt, eine solche Pipeline zu implementieren und welche Tools wir dafür verwendet haben. Neben der Beschreibung von Git, Jenkins, Chef, Vagrant, Behat und Surf geht es auch um Integration der einzelnen Tools in eine Deployment Kette.

opscode chefvagrantgatling
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...

The document discusses how to continuously innovate with software given the rapid pace of new technologies being introduced and the large research and development budgets of corporations. It emphasizes the need to build solutions that address business needs rather than adopting every new tool, and to develop an adaptive culture within teams that can respond to changing technologies and industry trends. Examples are provided of how open source technologies like Docker have evolved and best practices for evaluating and using new software.

devopsdays tel avivdevopsdays
London Atlassian User Group - February 2014
London Atlassian User Group - February 2014London Atlassian User Group - February 2014
London Atlassian User Group - February 2014

Continuous deployment is causing organisations to rethink how they build and release software. Atlassian Bamboo is rapidly adding features to help with automating deployment, but there are a lot of other practical and organisational issues that need to be addressed when adopting this development model. The Atlassian business-platforms team has been dealing with these issues over the last few months as we transition our order system to continuous deployment. This talk will cover why we adopted this model, some of challenges we encountered, and the approaches and tools we used to overcome them.

continuous deploymentatlassian
Video & Audio
• Well documented licensing war
• Great idea, caught up in licensing issues
• May have to store your media in more than
  one format
• Javascript libraries exist to help with
  fallback
• Have used it via JS libs. Eases the pain. Falls
  back to Flash.
Canvas
• Graphics via markup/JS
• Not generally lighter weight than images, so
  not a replacement for static images
• Great for graphs and such
• Many, many javascript libraries to help build
  graphs via Canvas.
• Used for internal reporting where we
  dictate browser versions. Publicly,YMMV.
          Wanna waste time? http://canvasrider.com/
New JS APIs

• Web Performance - neat
• Local Storage - requires user prompt
• Web Workers (IE10)
• Web Sockets - very new, has issues
• You really need a good use case for these
HTML5 Forms
<input name=”email” type=”email”>

<input name=”url” type=”url”>

<input name=”name” type=”text” required>

<input name=”search” type=”text”
placeholder=”Search”>

Recommended for you

DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...

There are numerous examples of DevOps and Continuous Delivery reference architectures available, and each of them vary in levels of detail, tools highlighted, and processes followed. Yet, there is a constant theme among the tool sets: Jenkins, Maven, Sonatype Nexus, Subversion, Git, Docker, Puppet/Chef, Rundeck, ServiceNow, and Sonar seem to show up time and again.

continuous integratondevopsopen source
Delivery Free of Charge
Delivery Free of ChargeDelivery Free of Charge
Delivery Free of Charge

The document discusses how people build software and modern development processes. It describes a traditional agile development process with sprints, planning, integration, reviews and retrospectives. It then summarizes a modern CI/CD DevOps workflow with continuous collaboration, integration, deployment to production and issue closing. It also discusses tooling, architecture principles, DevOps, templates, orchestration, inventory, machine templates and application templates.

all things openato2015open source
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and Pantheon

Drupal 8 sets a new standard for ease of use, and allows users to create and deploy content in a whole new way. You’ve seen the platform designed for Drupal, now see Drupal designed for the platform.

drupal 8pantheondrupal
HTML5 Forms
• Reduce custom validation Javascript
• You can query if a field is valid with
  checkValidity().
• Custom validation possible via event
  handlers
• Requires IE10 =(
• Some javascript libs can close the gap.
CSS3
Eye Candy
• border-radius (i.e. rounded corners)
• box-shadow
• gradient backgrounds
• multiple backgrounds
• transforms
• transitions
Use with fallback
• border-radius
• box-shadow
• gradient backgrounds
• multiple backgrounds
• Make sure the design holds up to your
  standard on browsers that don’t support
  these

Recommended for you

Using CI for continuous delivery Part 1
Using CI for continuous delivery Part 1Using CI for continuous delivery Part 1
Using CI for continuous delivery Part 1

This is part 3 of "Using CI for continuous delivery" in which we test drive Go. More details can be found at www.vishalbiyani.com/ci-continuous-delivery

thoughtworksdeployitcd
Devops at Startup Weekend BXL
Devops at Startup Weekend BXLDevops at Startup Weekend BXL
Devops at Startup Weekend BXL

Kris Buytaert discusses the Devops movement and how bringing developers and operations teams together earlier improves systems. He advocates for automation throughout the development and deployment process, from version control and testing to configuration management, monitoring, and upgrades. Adopting a Devops culture and practices like continuous integration, delivery, and deployment can help teams deploy better systems faster at lower risk.

swbrukrisbuytaertdevops
Continuous deployment steve povilaitis
Continuous deployment   steve povilaitisContinuous deployment   steve povilaitis
Continuous deployment steve povilaitis

Steve Povilaitis presented on continuous deployment and its benefits. Continuous deployment involves continuous developer integrations and deployments executed by automatic builds. It reduces risk by integrating code changes frequently through automated testing and deployment. The presentation outlined a roadmap for implementing continuous deployment practices like version control, automated builds, testing, and deployment through tools like Jenkins.

Example

FF12




IE8
Example 2

 IE9   FF12




 IE7    IE8
Gnarly CSS
.cta {
    display: inline-block;
    vertical-align: bottom;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
    -moz-box-shadow:    1px 1px 2px 0px rgba(0,0,0,0.5);
    box-shadow:         1px 1px 2px 0px rgba(0,0,0,0.5);
    border-width: 0px;
    border-style: none;
    border-color: rgba(0,0,0,0);
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;

    /* The is for the most commonly used design */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 12px;
    font: bold 12px arial,helvetica,clean,sans-serif;
    line-height: 20px;
    color: white;
    background: #6ecb12; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(118,215,24,1) 19%, rgba(88,168,11,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(118,215,24,1)),
                                        color-stop(100%,rgba(88,168,11,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(118,215,24,1) 19%,
                                        rgba(88,168,11,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76d718',
                                      endColorstr='#58a80b',GradientType=0 ); /* IE6-9 */
}
CSS3 Tools

• http://css3generator.com/
• http://border-radius.com/
• http://www.colorzilla.com/gradient-editor/

Recommended for you

DevOps - A Gentle Introduction
DevOps - A Gentle IntroductionDevOps - A Gentle Introduction
DevOps - A Gentle Introduction

DevOps is a set of practices intended to reduce the time between committing a change to a system and deploying it to production while ensuring high quality. It focuses on bridging the gap between developers and operations teams. Key DevOps principles include systems thinking, amplifying feedback loops, and a culture of experimentation. DevOps aims to achieve continuous delivery through practices like automated deployments, infrastructure as code, and deployment strategies like blue-green deployments and rolling upgrades.

cloudautomationcloud computing
Continuous Integration using TFS
Continuous Integration using TFSContinuous Integration using TFS
Continuous Integration using TFS

This presentation talks about the concepts of continuous Integration with TFS as an example platform on whihc you can implement this concept but it can apply to open source platforms as well

continuous integration
Gearmanpresentation 110308165409-phpapp01
Gearmanpresentation 110308165409-phpapp01Gearmanpresentation 110308165409-phpapp01
Gearmanpresentation 110308165409-phpapp01

Gearman is a software tool for distributing tasks to multiple machines or processes for parallel processing. It allows for jobs to be dispatched to multiple machines and processed asynchronously. Some key points: - Gearman was originally created by Danga Interactive and allows tasks to be handled across multiple servers and programming languages. - It provides features like load balancing, scalability, and no single point of failure. Companies like Digg and Yahoo have used Gearman to distribute large numbers of jobs across many servers. - The Gearman software includes client libraries for submitting jobs, worker applications for processing jobs, and a job server for handling requests and responses. It supports distributing jobs asynchronously or synchronously.

gearmangearmanpresentation
Transitions
• Replaces javascript for some types of
  animations
• CSS language to define how an element
  changes from one state to another
• Should be treated as optional and have a fall
  back or the page should work without
  them
• Can be taxing on the browser
Transitions
#delay1 {  
  position: relative;  
  transition-property: font-size;  
  transition-duration: 4s;  
  transition-delay: 2s;  
  font-size: 14px;  
}  
  
#delay1:hover {  
  transition-property: font-size;  
  transition-duration: 4s;  
  transition-delay: 2s;  
  font-size: 36px;  
}  
Transforms
• CSS language for scaling and rotating
  elements
• Mixed with transistions, animation can be
  achieved.
• May require browser specific tweaking or
  even non-standard CSS for IE.
• Can confuse the box model and page flow
Example
          The labels are
          rotated 90
          degrees, but as
          you can see,
          Firebug things
          the element is in
          a different place
          than where it
          appears when
          drawn.

Recommended for you

Quick Introduction to Gearman
Quick Introduction to GearmanQuick Introduction to Gearman
Quick Introduction to Gearman

Giuseppe Maxia gives a presentation introducing Gearman, a technology for distributed computing. Gearman allows clients to submit tasks or jobs to a central server, which then distributes the jobs to registered worker processes and returns the results to the clients. It provides flexibility by allowing clients, servers, and workers to run on different operating systems and communicate using different programming languages. Gearman also enables redundancy through its ability to use multiple servers for high availability.

computingdistributedgearman
Gearmam, from the_worker's_perspective copy
Gearmam, from the_worker's_perspective copyGearmam, from the_worker's_perspective copy
Gearmam, from the_worker's_perspective copy

Gearman is a distributed processing platform that allows users to offload tasks like image resizing or text filtering to worker machines. It supports asynchronous and synchronous requests and restarting failed work. Clients can submit tasks that workers process in different programming languages. Gearman handles load balancing, prioritizing tasks, and monitoring workers. It provides features like chunked data transfer, error handling, and large message sizes up to 4GB.

Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011

The document discusses several tools for improving application performance, including Gearman for distributing jobs across worker processes, Memcached for caching data in memory, and Sphinx for indexing and searching large amounts of data. It provides examples of how each tool works and can help address bottlenecks. Alternatives to each tool are also mentioned, along with some implementation details and considerations.

sphinxand memcachedconfoo 2011
Transforms
.accordion .panel-label {
    -moz-transform-origin: 100% 0;
    -moz-transform: rotate(-90deg);
    -webkit-transform-origin: 100% 0;
    -webkit-transform: rotate(-90deg);
    -o-transform-origin: 100% 0;
    -o-transform: rotate(-90deg);
    transform-origin: 100% 0;
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    white-space:nowrap;
    text-align: right;

    /* MSIE < 10 */
    filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3)9;
    left: 0px9;

}
Eye Candy Issues

• All of these techniques can be taxing on the
  browser and or device.
• Excessive use of gradients and transforms
  can cause major browser lag
• Many require browser prefixes (-moz or
  -webkit) or IE specific syntax (filter)
Selectors
tr:nth-child(2n+1)   /*   every odd row of an table */
tr:nth-child(odd)    /*   same */
tr:nth-child(2n+0)   /*   every even row of an table */
tr:nth-child(even)   /*   same */

tr:nth-last-child(-n+2) /* the two last rows of an table */

a:first-child /* a is first child of any element */

Also:
:first-of-type
:only-child
:only-of-type
:empty
          Browser performance may suffer using these
            on large, complex documents. Only use
           these when you can’t control the markup.
How Selectors Work
          This is not CSS3, but just general knowledge you need




• CSS is parsed and ALL rules are evaluated.
  More rules, more work for the browser
• Rules are evaluated right to left
• “.foo a” matches ALL a tags in the document
  and walks up the DOM to decide if they
  have a .foo parent.

Recommended for you

Website review
Website reviewWebsite review
Website review
 
by spg
Work Queues
Work QueuesWork Queues
Work Queues

The document discusses using work queues with Gearman and CodeIgniter. It begins with an introduction to work queues, describing them as sequences of stored data or programs awaiting processing. It then discusses the client worker pattern for processing asynchronous jobs, some limitations of this approach, and how Gearman can help address those limitations by facilitating work distribution across languages and servers. The document provides instructions for installing and configuring Gearman to add work queue functionality.

ciconfphpgearman
Scale like a pro with Gearman
Scale like a pro with GearmanScale like a pro with Gearman
Scale like a pro with Gearman

Gearman is a job server that allows clients to distribute jobs to workers. It manages communication between clients and workers, which can be written in different programming languages. Clients submit jobs to Gearman that workers then process asynchronously. Gearman provides features like parallel processing, callbacks, prioritization, and monitoring of job status. It allows scaling applications by distributing work across multiple workers.

hasgeekgearman
Media Queries
@media all and (max-width: 699px) and (min-width: 520px),
               (min-width: 1151px) {
  body {
    background: #ccc;
  }
}


   • Allow you to specify different CSS for
      different device specifications
   • You can use these now to help with mobile
      design and usability. Those devices support
      it, older browsers ignore it.
Experiment
                     Firefox



                       IE6




http://brian.moonspot.net/experimenting-with-html5
Conclusion
• Understand your audience
• HTML5 Doctype works for HTML4, try it
• Use HTML5 semantic tags to fix bad HTML
  or on new projects
• Video is not the Flash killer we all hoped
  for. But, it does have its uses.
• HTML5 Forms have great potential, but still
  a nice to have for now.
Conclusion
• CSS3 eye candy is a great extra bit for
  users that can see it. Be sure you are happy
  with the fallback for others.
• New CSS3 selectors are powerful, but
  good markup with classes is still better
• CSS media queries are very helpful for
  formatting your pages on smaller screens
  and are supported on those platforms

Recommended for you

Gearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applicationsGearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applications

Gearman is an open source job server that allows distributing asynchronous jobs to worker processes. It provides a way to offload CPU-intensive tasks from web servers to separate worker processes. PHP applications can use the Gearman extension to create clients that send jobs and worker scripts that receive and execute jobs. Managing many worker processes across servers can be challenging. The Gearman Agent Manager aims to address this by providing centralized management and monitoring of Gearman workers through a web API.

barcampsaigonphpgearman
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development

Talks about the best practices in web development regarding semantics, accessibility, SEO and performance.

semanticsweb developmentperformance
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features

HTML5 presented at the Fox Valley Computing Professionals on December 14, 2010. Explores the history, philosophy, and drama behind this popular new spec for the web, and looks at some of the key new features.

htmlxmlwww

More Related Content

What's hot

Continuous delivery with open source tools
Continuous delivery with open source toolsContinuous delivery with open source tools
Continuous delivery with open source tools
Sebastian Helzle
 
Testing Your Code as Part of an Industrial Grade Workflow
Testing Your Code as Part of an Industrial Grade WorkflowTesting Your Code as Part of an Industrial Grade Workflow
Testing Your Code as Part of an Industrial Grade Workflow
Pantheon
 
Continuous Delivery: The Dirty Details
Continuous Delivery: The Dirty DetailsContinuous Delivery: The Dirty Details
Continuous Delivery: The Dirty Details
Mike Brittain
 
Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
cgack
 
JavaOne 2015 - Swimming upstream in the container revolution
JavaOne 2015 - Swimming upstream in the container revolutionJavaOne 2015 - Swimming upstream in the container revolution
JavaOne 2015 - Swimming upstream in the container revolution
Bert Jan Schrijver
 
Drupal Performance
Drupal Performance Drupal Performance
Drupal Performance
Pantheon
 
Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
Dave Olsen
 
Continuous Deployment at Etsy: A Tale of Two Approaches
Continuous Deployment at Etsy: A Tale of Two ApproachesContinuous Deployment at Etsy: A Tale of Two Approaches
Continuous Deployment at Etsy: A Tale of Two Approaches
Ross Snyder
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
Symetris
 
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source ToolsTYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
Michael Lihs
 
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
DevOpsDays Tel Aviv
 
London Atlassian User Group - February 2014
London Atlassian User Group - February 2014London Atlassian User Group - February 2014
London Atlassian User Group - February 2014
Steve Smith
 
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
Sonatype
 
Delivery Free of Charge
Delivery Free of ChargeDelivery Free of Charge
Delivery Free of Charge
All Things Open
 
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and Pantheon
Pantheon
 
Using CI for continuous delivery Part 1
Using CI for continuous delivery Part 1Using CI for continuous delivery Part 1
Using CI for continuous delivery Part 1
Vishal Biyani
 
Devops at Startup Weekend BXL
Devops at Startup Weekend BXLDevops at Startup Weekend BXL
Devops at Startup Weekend BXL
Kris Buytaert
 
Continuous deployment steve povilaitis
Continuous deployment   steve povilaitisContinuous deployment   steve povilaitis
Continuous deployment steve povilaitis
Steve Povilaitis
 
DevOps - A Gentle Introduction
DevOps - A Gentle IntroductionDevOps - A Gentle Introduction
DevOps - A Gentle Introduction
Ganesh Samarthyam
 
Continuous Integration using TFS
Continuous Integration using TFSContinuous Integration using TFS
Continuous Integration using TFS
Mohamed Samy
 

What's hot (20)

Continuous delivery with open source tools
Continuous delivery with open source toolsContinuous delivery with open source tools
Continuous delivery with open source tools
 
Testing Your Code as Part of an Industrial Grade Workflow
Testing Your Code as Part of an Industrial Grade WorkflowTesting Your Code as Part of an Industrial Grade Workflow
Testing Your Code as Part of an Industrial Grade Workflow
 
Continuous Delivery: The Dirty Details
Continuous Delivery: The Dirty DetailsContinuous Delivery: The Dirty Details
Continuous Delivery: The Dirty Details
 
Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
 
JavaOne 2015 - Swimming upstream in the container revolution
JavaOne 2015 - Swimming upstream in the container revolutionJavaOne 2015 - Swimming upstream in the container revolution
JavaOne 2015 - Swimming upstream in the container revolution
 
Drupal Performance
Drupal Performance Drupal Performance
Drupal Performance
 
Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
 
Continuous Deployment at Etsy: A Tale of Two Approaches
Continuous Deployment at Etsy: A Tale of Two ApproachesContinuous Deployment at Etsy: A Tale of Two Approaches
Continuous Deployment at Etsy: A Tale of Two Approaches
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
 
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source ToolsTYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
TYPO3 Camp Stuttgart 2015 - Continuous Delivery with Open Source Tools
 
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
How to survive continuous innovation - Sebastien Goasguen - DevOpsDays Tel Av...
 
London Atlassian User Group - February 2014
London Atlassian User Group - February 2014London Atlassian User Group - February 2014
London Atlassian User Group - February 2014
 
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
DevOps and Continuous Delivery Reference Architectures (including Nexus and o...
 
Delivery Free of Charge
Delivery Free of ChargeDelivery Free of Charge
Delivery Free of Charge
 
Drupal 8 and Pantheon
Drupal 8 and PantheonDrupal 8 and Pantheon
Drupal 8 and Pantheon
 
Using CI for continuous delivery Part 1
Using CI for continuous delivery Part 1Using CI for continuous delivery Part 1
Using CI for continuous delivery Part 1
 
Devops at Startup Weekend BXL
Devops at Startup Weekend BXLDevops at Startup Weekend BXL
Devops at Startup Weekend BXL
 
Continuous deployment steve povilaitis
Continuous deployment   steve povilaitisContinuous deployment   steve povilaitis
Continuous deployment steve povilaitis
 
DevOps - A Gentle Introduction
DevOps - A Gentle IntroductionDevOps - A Gentle Introduction
DevOps - A Gentle Introduction
 
Continuous Integration using TFS
Continuous Integration using TFSContinuous Integration using TFS
Continuous Integration using TFS
 

Viewers also liked

Gearmanpresentation 110308165409-phpapp01
Gearmanpresentation 110308165409-phpapp01Gearmanpresentation 110308165409-phpapp01
Gearmanpresentation 110308165409-phpapp01
longtuan
 
Quick Introduction to Gearman
Quick Introduction to GearmanQuick Introduction to Gearman
Quick Introduction to Gearman
Giuseppe Maxia
 
Gearmam, from the_worker's_perspective copy
Gearmam, from the_worker's_perspective copyGearmam, from the_worker's_perspective copy
Gearmam, from the_worker's_perspective copy
Brian Aker
 
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Bachkoutou Toutou
 
Website review
Website reviewWebsite review
Website review
spg
 
Work Queues
Work QueuesWork Queues
Work Queues
ciconf
 
Scale like a pro with Gearman
Scale like a pro with GearmanScale like a pro with Gearman
Scale like a pro with Gearman
Amal Raghav
 
Gearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applicationsGearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applications
Teamskunkworks
 

Viewers also liked (8)

Gearmanpresentation 110308165409-phpapp01
Gearmanpresentation 110308165409-phpapp01Gearmanpresentation 110308165409-phpapp01
Gearmanpresentation 110308165409-phpapp01
 
Quick Introduction to Gearman
Quick Introduction to GearmanQuick Introduction to Gearman
Quick Introduction to Gearman
 
Gearmam, from the_worker's_perspective copy
Gearmam, from the_worker's_perspective copyGearmam, from the_worker's_perspective copy
Gearmam, from the_worker's_perspective copy
 
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
Kill bottlenecks with gearman, sphinx, and memcached, Confoo 2011
 
Website review
Website reviewWebsite review
Website review
 
Work Queues
Work QueuesWork Queues
Work Queues
 
Scale like a pro with Gearman
Scale like a pro with GearmanScale like a pro with Gearman
Scale like a pro with Gearman
 
Gearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applicationsGearman and asynchronous processing in PHP applications
Gearman and asynchronous processing in PHP applications
 

Similar to Ease into HTML5 and CSS3

Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
Robert Nyman
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
Dave Ross
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introduction
vrt-medialab
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
Sergejus Barinovas
 
Html forfood
Html forfoodHtml forfood
Html forfood
Cristiane Zimmermann
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
Marvelic Engine Co., Ltd.
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
Html5 public
Html5 publicHtml5 public
Html5 public
doodlemoonch
 
C# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPC# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASP
Mohammad Shaker
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
Ignacio Coloma
 
Html5
Html5Html5

Similar to Ease into HTML5 and CSS3 (20)

Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
html5 an introduction
html5 an introductionhtml5 an introduction
html5 an introduction
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
Html forfood
Html forfoodHtml forfood
Html forfood
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
C# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPC# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASP
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
 
Html5
Html5Html5
Html5
 

Recently uploaded

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
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
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
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
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
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
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
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
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
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
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
 

Recently uploaded (20)

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
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
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
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
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
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
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
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
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
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 

Ease into HTML5 and CSS3

  • 1. Easing Into HTML5 and CSS3 Brian Moon dealnews.com Who attended the HTML5 and Javascript @brianlmoon tutorial yesterday? http://brian.moonspot.net/
  • 2. What is in HTML5? • New Semantic Tags • <article>, <header>, <footer>, etc. • New Multimedia Tags • <canvas>, <video>, <audio>, etc. • New Javascript APIs • data- attributes • HTML5 Forms
  • 3. What is in CSS3? • New Properties • New Selectors • Device dependent Media Queries
  • 4. What is not HTML5 nor CSS3? • SVG - been around, browsers just got better • Geo-Location - Separate W3C spec from HTML5
  • 5. Who uses your site? • Are the tech savvy? • Are they sensitive to change? • Are they in China? (Lots of IE6 still) • All Mobile?
  • 6. dealnews browsers IE6 0.30% IE7 4.19% IE8 11.91% 22% IE9+ FF3.5+ Chrome Safari 78% 3.1+ Modern Browsers Other
  • 7. Our design goals • Identical UI and UX on modern browsers • Fully functional and usable on IE8, IE7 and Opera • Page should render and users should be able to click things in IE6
  • 8. First Step All browsers process pages with this doctype in standards mode.
  • 9. http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx <!DOCTYPE html> <html> <head> <title>Title</title> Semantic Tags </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section>
  • 10. Semantic Tags • Older browsers don’t treat these as block elements • CSS can fix it in some browsers • Javascript (HTML Shiv) required in older IE versions • Good semantic HTML4 markup and Microformats already recognized by scrapers • Would use in new projects.YMMV on ROI for converting well done HTML
  • 11. data attributes problem • Unknown attributes are ignored by browsers, but the pages don’t validate. • Hacks exist where classes are used (e.g. class=”artid-574244”)
  • 12. data- attributes <div class="art body" data-artid="574244"> • Allows you to store data as an attribute that is ignored by the browser • Any attribute prefixed with data- is ignored by the browser (as all unknown attributes are) and are treated as valid HTML5. • Use element.getAttribute(“data-artid”); to get the data • Use it now. Works in all browsers.
  • 13. Video & Audio • Well documented licensing war • Great idea, caught up in licensing issues • May have to store your media in more than one format • Javascript libraries exist to help with fallback • Have used it via JS libs. Eases the pain. Falls back to Flash.
  • 14. Canvas • Graphics via markup/JS • Not generally lighter weight than images, so not a replacement for static images • Great for graphs and such • Many, many javascript libraries to help build graphs via Canvas. • Used for internal reporting where we dictate browser versions. Publicly,YMMV. Wanna waste time? http://canvasrider.com/
  • 15. New JS APIs • Web Performance - neat • Local Storage - requires user prompt • Web Workers (IE10) • Web Sockets - very new, has issues • You really need a good use case for these
  • 16. HTML5 Forms <input name=”email” type=”email”> <input name=”url” type=”url”> <input name=”name” type=”text” required> <input name=”search” type=”text” placeholder=”Search”>
  • 17. HTML5 Forms • Reduce custom validation Javascript • You can query if a field is valid with checkValidity(). • Custom validation possible via event handlers • Requires IE10 =( • Some javascript libs can close the gap.
  • 18. CSS3
  • 19. Eye Candy • border-radius (i.e. rounded corners) • box-shadow • gradient backgrounds • multiple backgrounds • transforms • transitions
  • 20. Use with fallback • border-radius • box-shadow • gradient backgrounds • multiple backgrounds • Make sure the design holds up to your standard on browsers that don’t support these
  • 22. Example 2 IE9 FF12 IE7 IE8
  • 23. Gnarly CSS .cta { display: inline-block; vertical-align: bottom; -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); border-width: 0px; border-style: none; border-color: rgba(0,0,0,0); cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; /* The is for the most commonly used design */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 12px; font: bold 12px arial,helvetica,clean,sans-serif; line-height: 20px; color: white; background: #6ecb12; /* Old browsers */ background: -moz-linear-gradient(top, rgba(118,215,24,1) 19%, rgba(88,168,11,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(118,215,24,1)), color-stop(100%,rgba(88,168,11,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(118,215,24,1) 19%, rgba(88,168,11,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76d718', endColorstr='#58a80b',GradientType=0 ); /* IE6-9 */ }
  • 24. CSS3 Tools • http://css3generator.com/ • http://border-radius.com/ • http://www.colorzilla.com/gradient-editor/
  • 25. Transitions • Replaces javascript for some types of animations • CSS language to define how an element changes from one state to another • Should be treated as optional and have a fall back or the page should work without them • Can be taxing on the browser
  • 27. Transforms • CSS language for scaling and rotating elements • Mixed with transistions, animation can be achieved. • May require browser specific tweaking or even non-standard CSS for IE. • Can confuse the box model and page flow
  • 28. Example The labels are rotated 90 degrees, but as you can see, Firebug things the element is in a different place than where it appears when drawn.
  • 29. Transforms .accordion .panel-label { -moz-transform-origin: 100% 0; -moz-transform: rotate(-90deg); -webkit-transform-origin: 100% 0; -webkit-transform: rotate(-90deg); -o-transform-origin: 100% 0; -o-transform: rotate(-90deg); transform-origin: 100% 0; transform: rotate(-90deg); position: absolute; top: 0; white-space:nowrap; text-align: right; /* MSIE < 10 */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)9; left: 0px9; }
  • 30. Eye Candy Issues • All of these techniques can be taxing on the browser and or device. • Excessive use of gradients and transforms can cause major browser lag • Many require browser prefixes (-moz or -webkit) or IE specific syntax (filter)
  • 31. Selectors tr:nth-child(2n+1) /* every odd row of an table */ tr:nth-child(odd) /* same */ tr:nth-child(2n+0) /* every even row of an table */ tr:nth-child(even) /* same */ tr:nth-last-child(-n+2) /* the two last rows of an table */ a:first-child /* a is first child of any element */ Also: :first-of-type :only-child :only-of-type :empty Browser performance may suffer using these on large, complex documents. Only use these when you can’t control the markup.
  • 32. How Selectors Work This is not CSS3, but just general knowledge you need • CSS is parsed and ALL rules are evaluated. More rules, more work for the browser • Rules are evaluated right to left • “.foo a” matches ALL a tags in the document and walks up the DOM to decide if they have a .foo parent.
  • 33. Media Queries @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { body { background: #ccc; } } • Allow you to specify different CSS for different device specifications • You can use these now to help with mobile design and usability. Those devices support it, older browsers ignore it.
  • 34. Experiment Firefox IE6 http://brian.moonspot.net/experimenting-with-html5
  • 35. Conclusion • Understand your audience • HTML5 Doctype works for HTML4, try it • Use HTML5 semantic tags to fix bad HTML or on new projects • Video is not the Flash killer we all hoped for. But, it does have its uses. • HTML5 Forms have great potential, but still a nice to have for now.
  • 36. Conclusion • CSS3 eye candy is a great extra bit for users that can see it. Be sure you are happy with the fallback for others. • New CSS3 selectors are powerful, but good markup with classes is still better • CSS media queries are very helpful for formatting your pages on smaller screens and are supported on those platforms

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n