Archive

Archive for the ‘HTML5’ Category

HTML5: Associated Technologies

2012/01/05 Leave a comment

Geolocation API

  • Build location-aware applications.
  • Doesn’t use IP Addresses.
  • Opt-In
  • navigator.geolocation: global navigator object
    • getCurrentPosition() : single-shot method to return location data
    • watchPosition() : tracks location data over time
    • timestamp
    • coords
      • latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed

Webstorage API

  • Instead of cookies (small amount of data) or server-side storage (slower)
  • Stores data in key/value pairs and can store up to 5mb
  • Session Storage: Stores data for a single session in a single window
  • Local Storage: controls data that’s in more than one window and more than one session

WebSockets

  • Bi-directinoal client server connection
  • Browser native

CSS3

  • CSS3 specification is split off into Modules: Selectors, Fonts, Colors…etc
  • Improved element and content targeting
  • Allow for new styling options like drop shadows and opacity
  • Improved support for fonts
    • @font-face lets you directly reference fonts

Encoding Video (for HTML5)

2012/01/03 Leave a comment

If you don’t have video editing tools available, these are great free open-source tools:

  • Firefogg.org has a plug-in for firefox that can encode to Ogg codec. (ogv file)
  • HandBrake can encode to H.264 mp4.
Categories: HTML5, Video, Web Tags: , ,

HTML5 Video

2012/01/03 Leave a comment

HTML5 video support means Flash is no longer the default choice when distributing video over the web. Native video support means:

  • No need for 3rd party plug-ins.
  • Cross-browser compliance
  • Current specification does not declar a standard video codec (H.264, VP8, OGG Theora)

<video src=”myVideo.mp4″ width=”320″ height=”240″ controls preload=”false”></video>

  • controls: adds play, pause, button, volume slider

To ensure a browser will play the video, the video can be defined with multiple video sources using different codecs:

  • <video width=”320″ height=”240″ controls preload=”false”>
    <source src=”video1.mp4″ type=”video/mp4″ />
    <source src=”video1.ogv” type=”video/ogg” />
    </video>
Categories: HTML5, Video, Web Tags: ,

HTML5 Drag & Drop API

2012/01/03 Leave a comment

Unlike Canvas, the Drag & Drop API implementation isn’t consistent across different browsers.

In general, drag & drop works like this…

  • Define an object as being draggable
    • <img src=”cat.jpg” draggable>
    • links and images are draggable by default. IE restricts draggable elements to links and images (hrefs only).
    • Draggable elements can be copied, moved, or linked.
  • Define a drop target
    • <image class=”droptarget” ondragenter=”dragEnterHandler(event)” ondragover=”dragOverHandler(event)” ondrop=”dropHandler(event)”>
    • ondragleave is optional
    • dataTransfer.setData(“text/plain”)
    • dataTransfer.getData(“text”)
  • Use the API to handle the interaction between the two.

 

Categories: HTML5, Web Tags: ,

HTML5: Canvas tag and Canvas API

2012/01/03 Leave a comment

The new <canvas> element in HTML5 lets you draw within the browser. It has it’s own set of specifications.

<canvas id=”myCanvas” width=”600″ height =” 300″> Your browser does not support canvas. Please upgrade your browser </canvas>

  • id: allows scripts to identify which canvas to draw on
  • width & height: how big to make canvas
  • text within tags: fall back content. Dont’ use as alt tag. don’t use as accessibility content.

To draw in the canvas, use the Canvas 2D API as part of a javascript function

  • beginPath()
  • moveTo(): Moves to a specified point on the canvas
  • lineTo(): Defines a line from the previous point
  • stroke(): Draws the line and stroke
  • closePath()
  • drawImage()
  • beginPath(x coordinate, y coordinate),
  • fillRect(),
  • fillStyle()
  • lineWidth=4 ;
    • lines are drawn with the path at the center. half of the width will fall one either side, so try to use an even number
  • lineJoin=”round”;
    • Round, bevel or miter are the options
  • strokeStyle=”#CCCCCC”;
  • can be used to animate, re-size, move…etc
  • Write as part of a javascript function.
Categories: HTML5, Web Tags: ,

HTML5 Forms

2011/12/29 Leave a comment

HTML5 has many improvements for forms! Now you don’ t have to use javascript for a lot of the functions… as soon as all browsers support it.

Input Types

  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range : a range of numbers
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

Auto Focus

<input type=”text” name=”name” id=”name” tabindex=”10″ autofocus>

Placeholder Text

<input type=”text” name=”name” id=”name” tabindex=”10″ placeholder=”place holder text here”>

Form Validations (Required Fields)

<input type=”text” name=”name” id=”name” tabindex=”10″ required>

Numbers

<input type=“numbers” name=”howmany” id=”howmany” tabindex=”10″ min=”1″ max=”10″ value=”1″>

  • Step = increments value
  • max = maximum number
  • min = minimum number
  • value = default number value

Date Pickers

<input type=“date” name=”name” id=”name” tabindex=”10″ min=”1″ max=”10″ value=”1″>

  • input type=”date” : gives you a calendar
  • input type=”month” calendar with month pull down menu
  • input type=”week” calendar with week pull down menu
  • input type=”datetime”  calendar with a time picker
  • input type=”datetime-local”  date time with no time-zone offsetl
  • input type=”time” no calendar, just a time picker

HTML5 Doctype and Character Encoding Declarations

2011/12/28 Leave a comment

HTML5 makes it easy to start off your document. No more messy and long winded doctype and character encoding declarations!

Categories: HTML5, Web Tags: , , ,
%d bloggers like this: