html5 websites of san diego

1 2 3 4 5 6 7 8 9 10

san diego web studio name strip html5 and css3

HTML5: cutting edge web design

10 Good Reasons to Upgrade to HTML5

10 good reasons to upgrade to html5Html5 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?

Html5 is open source and just right thing to do for web design clientsit'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 google loves standard compliance and semantics...

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! Don't Flash the WebThe 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).

most common browsersmulti-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.

websites render gracefully on any device with proper use of html5 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.

keep it simple with 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.

Only One DocType Declaration in Html5Document 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:

New Html5 Markup Elementsaccessible 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 checkbox example: checked or unchecked checkbox example: unchecked, a button command button example:up, or radio box radio box command example.
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:

New Html5 Media Elementscanvas attributes

Html5 Canvas CapabilitiesThe "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 Html5 Canvas Feature is Hot 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.

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, and Semantics

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!
standard html5 logo design

cllick to jump to top of page

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 Html5 Media Elements 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

html5 video web standardsabout 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 video browser support and info .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 video browser support and info.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

New Html5 Web Standard Attributesenhanced 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

New Html5 Audio Standardsaudio 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 Html5 Form Elementsnew 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 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

New Html5 Web Storage StandardsHtml5 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:

websites render gracefully on any device with proper use of html5 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