html5 websites of san diego
HTML5: cutting edge web design
10 Good Reasons to Upgrade to HTML5
Html5 is the cutting edge website development language for embedding streaming video and audio files, frying Flash in the pan. Html5 semantically interprets MicroData in the spirit of forward compatibility with XML.
Most importantly, html5 finally eliminates the need for various DocType Definitions, and supports dynamic interactivity such as Canvas drawing and Presentation capabilities.
San Diego Web Studio picked just ten of the numerous reasons and benefits Html5 provides for upgrading website design structural code and dynamic media delivery!
What are some of the differences and benefits of Html5 over previous versions, such as Html4?
it's dynamic!
1. Html5 delivers very enhanced capabilities and support for video, audio, canvas drawing, dynamic content, storage, and functionality. Html5 supports easy, lightweight embedding of movies, sound, images, and vastly improved functionality for forms and intermutual files. Along with newly introduced elements such as navigational and webpage designations, Html5 also includes deprecation of outdated and unnecessary features from previous versions of Html.
open-source!
2. Html5 is open-source and nonproprietary! There is no cost or purchase necessary to implement Html5 and derive the many benefits, including increased download speed of webpages, client-side storage capabilities, image galleries and picture slideshows, intuitive and seamless web form completion and submission, and more. Html5 is supported and endorsed by nearly all major online communities including Google, Mozilla Firefox, Microsoft, Opera, Apple, IBM, Nokia, AOL, and hundreds of other vendors that comprise almost every significant online entity.
All new features of Html 5 are based on Html, CSS, Javascript, and the DOM.
next-generation standardized...now!
3. Html5 is the planned standard web building language. Html is replacing use of all previous versions of Html, xHtml, and the Html DOM. Html is the collaborative product resulting from the co-contributions of the W3C and the WHATWG.
google love 
...
4. Google retracted "Google Gears" in support of Html5 and Open Source Programming Languages. Earlier this year, after launching and introducing a program called "Google Gears", the leading search engine formally abandoned their proprietary and client-side storage driven program in support of Html5. Google is also a strong advocate of open source programming vs. proprietary applications such as Flash.
no flashing...
5. Don't Flash Me! 
The word among web developers is that Html5 will replace the controversial and slow-loading use of Flash, a proprietary and search engine non-friendly animation program now owned by Adobe. Ipads and Iphones are already manufactured without the ability to render Flash based elements and websites. Html5 decreases the need for external and proprietary browser plugins. Apple doesn't like Flash...(and we don't either).
multi-browser compatible...
6. Html5 is supported and effective in almost every modern browser's latest version. The latest versions of Google Chrome, Safari, Mozilla Firefox, and and Opera are Html5 compatible. Microsoft's Internet Explorer, in atypical fashion of IE, is also planning Html5 support in the upcoming IE9 Release. One of the many objectives of Html5 is standard compliant multi-browser compatibility. Another objective is elimination of the need for various DocTypes, as with previous versions for Standards and Quirks mode. The new Html is replacing use of all previous versions of Html, xHtml, and the Html DOM. Html is the collaborative product resulting from the co-contributions of the W3C and the WHATWG.
device independent ...
7. Html5 is device independent regardless of brand or gadget. Want your website to render gracefully on any device or computer? Try that with proprietary software programs!...Open Source Html5...we've got you covered! Html5 is technically engineered to render gracefully among all devices and brands, whether viewed via a mobile phone, an iPad, a PC, or a Mac, to name just a few of the devices and computers supported by Html5.
simplicity...
8. Less plugins required, less scripting, only one document type! Html5 requires only one document type, as opposed to numerous document types required in previous versions of Html.
Document Type declarations for webpages have long been a source of confusion and hindrance to web developers in past html versions, not to mention a frequent cause of chaos when validating code per w3c standards. The one and only document type required for Html5 is: !DOCTYPE HTML. Html5 is much more efficient at handling errors caused by browser bugs and...ahem, web development mistakes.
robust capabilities...
9. What can Html5 do that old Html can't? A lot! Html5 can create a canvas that facilitates freestyle drawing by mouse or other input device. The new version also enables integration of advanced video and audio controls for site visitors to playback media seamlessly, offline storage on site visitor's computer or portable storage device, such as a flash drive or mp3 player, electronic forms with interactive features that include date, time, email, url, search, and calendar. Also supported are web document section specifiers, such as "section", "header", "footer", and "navigation".
new markup ...
10. What's all the further hype about Html5? Html5 can do so much, and tell search engines exactly what they want to know by use of enhanced semantical markup of elements. It can also give site visitors and end users more control, quicker and increased interactivity, and superior functionality. The following new elements are listed, along with their proper purpose, for our technically savvy clients who monitor the coding of their websites during new site construction and website repair and site redesign. In the event you see elements in the code you're not familiar with, the following list can serve as a quick reference resource:
* (Html5 presents a dynamic and creative playground! Note the trend toward semantical markup...Google is encouraging [ultimately driving the web toward] Ontology Web Language [OWL])
New HTML5 Elements:
accessible markup capabilities:
- article:
- The "article" designation is intended to identify and reference externally acquired or generated content originating at another location on the web, or offline.
- aside:
- The "aside" element is intended for content related to the main topic with which it is included, however content tagged "aside" should be supplemental, related, auxiliary, or augmented, such as an afterthought, commentary, or editorial, as in an individual's opinion, for example. It is not intended to be used as a sidebar or navigational section, unless pointing to
- command:
- The command button is intended to designate a "command button", or end user choice, such as a checkbox, checked
or unchecked 
, a button 
, or radio box 
. - details:
- The "details" element is intended to define the details related to a specific document, details aimed at a specified section of a webpage, or other part(s) of the page. It is an "about" information tag.
- summary:
- The "summary" element is intended for use within the "details" element. As the tag name implies, a summary tag will provide a concise description of the of the content that the "details" element defines.
- figure:
- The "figure" tag is designed to group internal elements of a section on a webpage. The grouping inside of a figure tag should be stand-alone information, that if moved to outside the document, will suffice enough information to be independent. Examples of elements appropriately contained in a "figure" tag are H1, H2, Paragraph, etc.
- figcaption:
- The "figcaption" tag is intended for use inside the "figure" element, described above, and should designate a caption entry of the content tagged "Figure". A caption typically describes a photograph, video, chart, or some other visual presentation.
- footer:
- The "footer" tag, as the name implies, officially designates the bottom "footer" area of a document, or the bottom footer area of a section of an html document. In Html5., it is the sister tag to the new "header" element, described below.
- header:
- The "header" element, somewhat self-explanatory, is intended to designate the top section of a webpage, and typically precedes the document's content area and includes the logo and slogan. The header tag often contains a horizontal navigation bar.
- hgroup:
- The "hgroup" element is intended to designate a group of heading tags, from h1 to h6, with h1 being the topmost heading in largest font, and decreasing in size with every subheading from h2 to h6.
- mark:
- The "mark" element designates "marked" content or text and is very versatile. "Mark" can be styled in CSS and used to highlight, emphasize, separate, bolden, increase or decrease font size, or otherwise make text stand out. It is a convenient alternative to the "em" and "span" tags.
- meter:
- The "meter" tag was created in Html5 to define a measurement, but to be used only in instances where the exact minimum and maximum measurements are established. For proper use of the "meter" tag, the range of measurement must be specified.
- nav:
- The new "nav" tag defines a navigational area. Placing menus, sidebar menus and navigational areas inside a "nav" element is optional. However, when creating paginated menus, such as "next" and "previous" buttons and/or or number only buttons, commonly found on blogs, it is strongly recommended that these buttons are enclosed in the "nav" tag.
- progress:
- The"progress" element designates work in progress, such as a download in progress, a partially finished project, a process, or some other measurable entity marked by a percentage or other compatible measurement.
- ruby:
- The "ruby" element contains one or more characters necessitating pronunciation support and / or definition. "Ruby" is used in East Asia for pronunciation purposes. Ruby tags are supported by "rp" and "rt" elements, defined below.
- rt:
- The "rt" tag is related to the "ruby" and "rp" tags. It is intended for supporting pronunciation and definitions in Eastern Asiatic languages. To be used internally with the "ruby" tag defining the pronunciation of the word(s) or symbols contained in the "ruby" tag.
- rp:
- The "rp" tag acts as an auxiliary support tag for browsers that do not support the "ruby" element that "rp" is associated with. In the event the site visitor's browser does not support "ruby", the end user will
- section:
- The "section" element denotes different "areas" or "parts" of a document. Appropriate document areas for use of section tag include the header, footer, navigation area, content area, or any other "section" enhanced by more extensive designation or styling.
- time:
- As the "time" tag name implies, "time" is intended to designate a specific time and / or date. The tag is "semantical" in nature, as it tells the search engines what is enclosed in the element. Ie, written at 10:00 a.m.. The text in italics would be enclosed in the "time" tag, and let the search engines know what type of data is indicated by the tagged text. The time tag itself, like other html5 elements, can be defined by a "title" entity that provides further information to the site visitor on mouse-over, or in the form of a "tooltip".
- wbr:
- Lastly, the "wbr" tag is associated with layout regarding word wrap. Instead of specifying "no-wrap", "wbr" is an abbr for "word break", directing the browser to break a line of text at a specific point, or word in the sentence. For example, a document might contain a sentence such as "it was a 70 year old building", and you may want to break the line specifically after the word "a" vs. "70". Menial? No. Developers dedicated to proper code and markup hate using the "break" tag; "wbr" is a clean solution that can be kept off page in the CSS styling.
New HTML5 Canvas Element:
canvas attributes
The "canvas" element, intended as a graphic "container" only, works in conjunction with scripting to provide a "drawing" canvas that is interactive with the end user's input device, such as a mouse or other hardware device.
The canvas area takes a rectangular shape and allows the end user to control the pixels within the canvas area. The "canvas" element is supported by several drawing methods, including characters, circles, boxes, paths, drag and drop capabilities for images. JavaScript support is required to enable the canvas to be drawn upon by the site visitor.
got code?
We do! And we sure would like to give your site a makeover. Give us a call for improved performance. Put your site on vee-ag-gra with html5 and css 3. Wow! 619.504.0450
html5: open source website technology!
HTML5: speed up & modernize your website
navigate this page
ta-ta flash!...toodles
True. Flash will not go out without a biggg fight. And if Macromedia wins that fight, or perseveres for a substantial amount of time, it will likely benefit the entire creative industry. Flash will be tested, challenged, and hopefully inspired to take several leaps ahead of its most competitive threat to date; open source, and wow us all. Until then, open source is the way to go. Google thinks so, the inventor of the web thinks so; Tim Berners-Lee, and so do our puny selves! Concurred.
new dynamic html5 media elements
open source video & audio capabilities
- audio:
- The "audio" element defines sound files such as music, text to voice, audio for webinars, slides, documents, etc. It is a highly configurable element that has several attributes; autoplay controls, loop, preload, and 'src".
- video:
- The "video" tag, as the name implies, supports movie files, clips, and video streams. "Video" is highly customizable by several instrumental attributes; autoplay, controls, height, width, loop, preload, and "src".
- source:
- The "source" tag as it relates to media, is newly introduced with Html5 for support of various media resources and types. It is supported by Html5's standard attributes, as well as the "type" element (for designating at which point the media should begin playing; if left unspecified, the start point will default to the beginning of the video or audio file), the "media" tag (i.e., .ogg, .wav, .mp3, etc.), and the "src" element, which designates the appropriate url pointing to the media location and/or folder.
- embed:
- The "embed" tag, newly introduced in Html5, efficiently streamlines and simplifies the embedding of objects and media such as audio and video files with minimal mark up and coding.
w3c web standardized video integration
about html5 video
For the first time in the history of web development, the use of audio in webpages will be standardized, along with video and embedding capabilities that are open source, non-proprietary, and free. Media delivery can be independent and free of browser plugins, software, helpers, and finally bring an end to slow loading, heavy applications such as Flash, and forced agreement to end user licensing terms that infringe on privacy and inhibit search engine robots and indexing.
- new:
- Until the debut of Html5 [not yet the standard at the time of this writing, September 2010] yet strongly supported and accommodated for in W3 Web Validation Tools. Html has not been significantly changed since 1999, more than a decade of videos and movies relying on proprietary browser plugins and software such as Flash, now owned by Adobe. Flash, associated and known for long, slow download delays and heavy workloads on end users' computer capabilities, as well as serious obstacles for search engine indexing and SEO performance.
- seamless:
- No longer bound by inherent inconvenience, web video is liberated, standardized, and simplified with Html5. We're taking back the web! Open source, simple coding is all that is necessary to seamlessly, swiftly, and integrally render videos, movies, sound files, and more! No special plugins, no special software, no comprising privacy for usage, and no lengthy, mandatory EULA's (end user license agreements) to accept! No more fine print, no more dependence on privatization and corporate profits...no implied consent, or consent by default! Truly, an improvement for end users and web developers (and their clients) alike!
- flashless
- Which translates into no plugin crashes to the browser, either.
open source web video
.ogg capable
Browsers, current versions at time of writing [September, 2010], support capabilities for html5 standalone .ogg video format: :
- firefox:
- yes
- opera:
- yes
- ie 8:
- No [but ie9 claims html5 support]
- safari:
- No. Mpeg4 support only.
html5 & mpeg4
.mpeg4 browser support
Browsers, current versions at time of writing [September, 2010], support capabilities for html5 standalone .mpeg4 video format: :
- firefox:
- no
- chrome:
- yes
- opera:
- yes
- ie 9:
- yes
- safari:
- Yes. Mpeg4 support only.
html5 streaming media
enhanced movie capabilities
video attributes
- autoplay
- autoplay is the html5 video setting for automatic play upon load
- controls
- Indicates video controls are made available, such as play, pause, volume, etc.
- height
- Indicates vertical size of media player measured in pixels
- loop
- Continuous play setting
- preload null
- if autoplay is set to true. Otherwise, preloads video in preparation for end user demand.
- source
- absolute or relative path to video location on server
- width
- Indicates horizontal size of media player measured in pixels
new html5 audio capabilities
audio attributes
The audio feature in Html5 can play sound files and streaming music in three audio file formats, listed below and browser supported by varying degrees, as indicated:
.ogg Vorbis audio support
- ogg audio
- Firefox 3.5: Y
- Opera 10.5: Y
- Chrome 3.0: Y
- Safari 3.0: No
- IE8: No
- mp3 audio
- Firefox 3.5: No
- Opera 10.5: No
- Chrome 3.0: No
- Safari 3.0: Y
- IE8: Y
- wav audio
- Firefox 3.5: No
- Opera 10.5: Y
- Chrome 3.0: Y
- Safari 3.0: No
- IE8: Y
* Note: Safari supports only MP3 and WAV audio files. Internet Explorer will begin supporting Standardized audio files with the upcoming browser release, IE9 [currently in beta].
html5 audio attributes:
Much like Web Standardized Video, the Html5 Audio element supports autoplay, controls, loop, preload, and source. Audio is supported by more than half of the attributes associated with Html5 video, with the exception of height, width, and preload.
dynamic html5 forms
new form elements
- datalist:
- The "datalist" element is designed to specify a list of options provided in an html5 electronic submission form. Typically, these options are offered in the form of a drop down selection box, or list denoted by radio buttons or check boxes. In conjunction with the "input" tag, the datalist defines what attributes the input element may consist of.
- keygen:
- The "keygen" tag generates an encrypted user identification RSA "key" to authenticate the site visitor. Of all the new html5 tags, at the time of this writing (9/2010) the "keygen" tag appears to be the most vaguely described and ambiguously supported. It is purported to be somewhat outdated, even prior to its official debut. An RSA key is an algorithm, or code, for encryption and decryption across the web. Attributes that support the "keygen" tag, used in the format of an input field in an online form, include autofocus, challenge (ensures the key is secure and free of tampering or network security deficiencies), disabled, form, keytype, and name. It is said to be technically obsolete, by popular opinion, in comparison to Microsoft's current authentication formula that serves the same purpose.
- output:
- The "output" form element supports dynamic content created "on the fly" by scripting integration, and is supported by the for, form, and name attributes.
new html5 form input values
- tel:
- Telephone number format/parameters. Checks syntax before submitting to server.
- search:
- Input is a search field
- url:
- Input value is a url (website or i.p. address)
- email:
- Value is an email address syntax with the @ sign and a TLD suffix
- datetime:
- Syntax value is of a date and / or time of day
- date:
- Input value is month (numerical)
- month:
- Input value for month, numerically
- week:
- Input value for week, numerically
- time:
- Input must be time compatible syntax
- date time local:
- Value allows for local time and / or date (ie; GMT -0700)
- number:
- Allows for input of numerical syntax only
- range:
- Input value allows for a range syntax, as in "1 to 5" or "over $100,000" Slight variation from the numerical input attribute
- color:
- Syntax requires hexadecimal entry, i.e., "#000000"
client side resources
Html5 Web Storage:
Html5 provides two options for storing data on the "client". In non-technical terms, this means storing data (content related to a website's features, interactivity, and functionality) on the end user's computer, ipad, netbook, mobile phone, etc.
The two types of storage options provided by html5 are termed "local storage" which has no time limits (such as a cookie that never expires), and "session storage" which means that a website will use the site visitor's device to store data that will remain on the end user's device or computer only for the duration of the time the website is being used.
In html5, utilization of the "session storage" type, the info is erased and no longer exists in memory once the site visitor closes the window or tab to the site storing info, somewhat similar to a "session cookie".
ta-ta cookies!
The concept of a website storing information on an end user's computer is not new, and up until the debut of Html5, was accomplished by the use of "cookies". The disadvantages of using the cookie method for interaction between website and site visitor include extreme latency and demand on the server. The burdensome nature the old html4 method is exacerbated by the fact the data, or "cookies", are passed every time there is a request on the server. In other words, every time the end user (site visitor) make an entry or mouse click.
Advantages of Web Storage:
With Html5, data stored on the client's computer or device is only accessed / required when applicable to an event or entry necessitating the info, rather than every click or navigational move the site visitor makes. So when the data is needed, it is transferred...when it is not needed, it remains dormant thus preserving resources and enabling the website to perform swiftly and unencumbered.
Another advantage of Html5's storage feature is adeptness at managing large volumes of data, whereas cookies were very limited in capacity. Html5 incorporates JavaScript for functionality.
need more reasons to upgrade?
To name just a few:
- semantically outlined
- open source
- efficiency
- dynamic content
- google favorable
- website performance
- faster download speed = better seo
Website Development Intro
