sonofbluerobotFront-End Engineering With Standards
Archive for May, 2011
links for 2011-05-27
Posted on: No Comments-
<script src="http://awesomize.me/j.albert.bowden.ii/embed.js" type="text/javascript"></script>
links for 2011-05-26
Posted on: No Comments-
matrix
-
byte order mark (bom)
-
postscript
-
Authenticode Code Signing
-
security attribute
Firefox Shield
Posted on: No Comments@F_i-refox shield
posted by @STHLMwebmonkeys #08wm
The description, as entered by the person who uploaded it.
59446316@N08 The ID of the content owner – you can use this to link to their buddy icon. like so @STHLMwebmonkeys #08wm
jalbertbowdenii Your Flickr screen name.
links for 2011-05-25
Posted on: No Comments-
Procedural Surfaces
-
ypical default display properties
menu {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
margin-start: 0;
-webkit-margin-end: 0;
padding-start: 40px; } -
webp
-
<meta http-equiv="X-UA-Compatible" content="IE=9">
Fun with Old School Mario and css3 transitions
Posted on: No Comments
I’ve been working on some css3 transitions and animations lately, partially because I’m a total frontend freak and partially because html5/JavaScript is going to be used to build full-feature games in the not-so-distant future. I have a raging desire to recreate The Legend of Zelda from the nes and/or Contra and know that css3 can and will be used heavily in such endeavors.
As I was going through some basic examples, I realized that I could start toying around with these notions in my examples, rather than just using basic, default css styles and I came up with this basic example, that is only super awesome because it’s Mario going down the pipe. Simply position your cursor over the Italian Stallion and down he goes! It doesn’t work in ie because it’s entirely css3 based; weak sauce, I know, but lame-browser compatibility was not on my agenda today.
You can view the demo on jsfiddle if you want to play with it.
meta-element
Posted on: No CommentsThe meta element allows authors to attach additional information (representing metadata) to their documents. This information can be used by the user agent for rendering content, it can provide meta information for indexing, it can be used to simulate http Response Headers, and it also can be used to reload the document. The additional information also represents various kinds of metadata that cannot be expressed using the title, base, link, style and script elements.
The meta element belongs in a document’s head and has no content; its attributes define name/value pairs associated with the document. The meta element information is machine-parsable (read: machine tags and all browsers expose meta information via the dom. These name/value pairs can be used by the server to further define the document type to the user agent.
The meta element is a void element: an element whose content model never allows it to have contents under any circumstances; It requires exactly one of the attributes of name, http-equiv and charset must be specified. If the name or http-equiv attributes are specified then the content attribute must also be specified, otherwise omit content.
html5, whatwg and the dcmi are all working to create a standard lists of meta properties, however currently none exists.
name="" Attribute
The name="" attribute is the name in the name/value pair and represents document-level metadata. This representation specifies what aspect of metadata is being set. If the content="" attribute is omitted then the value of the name/value pair is an empty string. If not provided, the name of the name/value pair is taken from the http-equiv="" attribute.
The name="" attribute must be a defined metadata name or a registered metadata name. name IDL attributes must reflect the respective content="" attributes of the same name.
w3c Defined Metadata Names
application-name: the value of the content="" attribute must be a string representing the name of the Web App the page represents. If document is not a Web App, don’t use it. Cannot have more than one per document. User Agents can use application name in ui instead of the title element because title could have status messages, etc. relevant to the status of the page at a particular time.
author: value of the content="" attribute must be a string giving the name of the author(s) of the document.
description: value of content="" attribute must be a string describing the page. Must be appropriate for use in a search engine. Document cannot have more than one.
generator: value of the content="" attribute must be a string identifying software used to generate the document. Do not use this value on hand-authored pages (notepad denied!).
keywords: value of content="" attribute must be a set of comma-separated strings, where each string is a relevant keyword to the document.
w3c Other Defined Metadata Names
keyword: actual name being defined; should not be similar to any other defined name (like differing only in case).
brief description: short, non-normative description of what the metadata name’s meaning is, including the format the value is required to be in.
specification: link to a more detailed description of metadata name’s semantics and requirements.
synonyms: list of names that have exactly the same processing requirements. do not use the named defined to be synonyms, they’re only intended to allow user agents to support legacy content. Synonms not in practice can be removed, only names that need to be processed as synonyms for compatibility with legacy content are to be registered this way.
status: has three possible values: proposed, ratified, and discontinued
name="status" content="proposed": name has not received wide peer review and approval; name has been proposed and is or soon will be in use.
name="status" content="ratified": name has received wide peer review and approval. its specification unambiguously defines how to handle pages using the name including when used incorrectly.
name="status" content="discontined": metadata name has received wide peer review and has been found wanting. May be in use on existing pages, but new pages should not used it. If anything, “brief description” and “specification” entries give details of what the author should use.
whatwg Registered Metadata Names (technically none so far)
baiduspider– synonym forrobotstargeting Baidu only.googlebot– synonym forrobotstargeting Googlebot only.ia_archive– synonym forrobotstargeting Archive and Alexa only.msnbot– synonym forrobotstargeting Bing only.robots– comma-separated list of operators telling search engine bots how to treat content.slurp– synonym forrobotstargeting Yahoo! only.teoma– synonym forrobotstargeting Teoma and Ask.com only.viewport– allows documents to specify size, zoom factor and orientation of the viewport used as the base for document’s initial containing block. The following properties can be used in the value of thecontent=""attribute: width, height, initial-scale, minimum-scale, maximum-scale, user-scalable.audience– aids search engine classification and aids directory compiliations by providing the audience most appropriate for the page. Values are case-insensitive and comma-separated (singular and plural values are equal).bot-– represents all bots prefixed withbot-.created– document creation datetime (ISO8601 date); must follow w3c ISO-8601 datetime profile with a granularity of “complete date” or finer.creator– off-Web/pre-Web creator of a work for which an author authored a document, so the creator and author can be different people. One element represents one creator; multiple creators need to be represented by multiple creator elemetns.datetime-coverage– value is a non-vague date or non-vague time (not a range) expressing which time frame is most relevant to the content.datetime-coverage-end– identical to datetime-coverage except only representing the end. When used without datetime-coverage-start, it is interpreted as ending a range without a start.datetime-coverage-start– identical to datetime-coverage except representing only the start; if used without datetie-coverage-end, is interpreted as starting a range with no end.datetime-coverage-vague– identical to datetime-coverage except its value is not clear; use when datetime-coverage, datetime-coverage-end, datetime-coverage-start are all inappaproiate (example: Tuesdays).DC– stands for Dublin Core, maintained by the dcmi, reserves all strings that begin withDC..dir-content-pointer– helps search engines organize results by identifying similar sections of pages in a directory with a standard vocabulary. Useful when using different conventions for displaying or printing content. Recognized values are pointer types to which numbers may be suffixed: start, toc (table of contents), intro, abstract, main, bibliography, index, afterword, update, credit and author bio. Number suffixes tell the search engine/directory to arrange like itmes in numerical order within the results. Each directory and subdirectory has its own sequence.expires– defines expiration date of the document which can be used in preparation for an upcoming event (when you have a pre-set date when the document will no longer be valid, like a sign-up form for an event). Search engines should remove this page from their main search results after the expiration date or by telling the user the result is out of date.format-print– informs operating system/printer driver of the preferred print medium (like paper size). Recognized values are letter, A4, legal, A5, B5, monarch, envelope 10, envelope 6-3-4 as well as values with integers and decimals, like 8.5 x 11, paper (default color), weight (usually 20lb. stock). You can specify a medium of the given color or mixed by using white, yellow, pink, blue, green, violet or multicolor. Letterhead, p2 letterhead (letterhead for all pages minus first page), watermark and plain (not preprinted/not letterhead).geographic-coverage– specify geographic relevance of content.keywords-not– negative keywords that distinguish closely-related themes from a document’s theme. Supports Booleannotsearches.page-datetime– tells search engines recency or relevance to an event date.page-version– Versions regardless of date may show consecutiveness and can replace vague dates; a version number can be more useful in this case. Versions0and0.nsignify beta versions, where.nis number of places and1or higher implies final-release versions.publisher– provides the document’s publisher, which often differs from creator/author when the publisher is an institution.referrer– controls the sharing of referrer information with linked resources and followed links at the meta level. The content attribute accepts three values, always, default (include referrer information in non-secure conext or for https resources with same origin) and never; The never value is redundant withlink rel="nofollow"and supplants saidlinkelement, which provides more control.resolutions– specifies high-resolution versions of images that the browsers should use in place of lower-resolution default images if a high-resolution screen is detected to be in use.rights– used to assert intellectual property rights in source code.rights-standard– enable search engines to compile the types of rights allocated to the document; the example belows implies that the Page code is cc By Attribution, Share alike<meta name="rights-standard" content="code;cc:bysa" />subj-...– To classify by subject a page’s content, a standard subject taxonomy that will be recognized by a search engine or directory will help. Because many such high-quality taxonomies exist, only a prefix is proposed. Over time, particular taxonomies, in print or online, may be recognized here and keywords assigned for each.MSSmartTagsPreventParsing– ie6 beta feature allowed browser to add information that wasn’t supplied by the document; this prevents that.
meta Pragma Directives
The http-equiv attribute is an enumerated attribute (taking one of a finite set of keywords), and if a meta http-equiv element is present within the document, the user agent must run the algorithim appropriate for that State. keywords and appropriate algorithims below:
State Content Language maps to keyword content-language; Content language state (http-equiv="content-language"): this pragma sets the pragma-set default language; until successfully processed, there is no pragma-set default language.
note: this will trigger a warning in validators, use lang attribute instead.
State Encoding Declaration maps to keyword content-type; Encoding declaration state (http-equiv="content-type") alternative form of setting charset="" attribute; is a character encoding declaration. Encoding declaration state’s user agent requirements are entirely handled by the parsing section of the specification.
State Default Style maps to keyword default-style; Default style state (http-equiv="default-style"): this pragma sets the name of the default alternative style sheet.
State Refresh maps to keyword refresh; Refresh state (http-equiv="refresh"): pragma acts as a timed redirect.
State Cookie Setter maps to keyword set-cookie although Cookie Setter is non-conforming; Cookie setter (http-equiv="set-cookie"): pragma sets http cookie. Is non-conforming, you should use real http Headers instead.
Pragma Directive http-equiv="" Attribute
The http-equiv="" attribute is the name in the name/value pair; tells the server to include said pair in the mime document header that is passed to the browser before actually sending the document. When the http-equiv="" attributee is used, the server adds these name/value pairs to the content header it sends to the browser.
The http-equiv="" attribute is restricted to these values: refresh, default-style and content-type in html5.
http-equiv="refresh" Pragma Directive
The http-equiv="" attribute whose value is refresh represents a pragma directive specifying either a number of seconds after which to reload the current page, or a number of seconds after which to reload a different page and the url for the replacement page.
http-equiv="default-style" (Preferred Stylesheet) Pragma Directive
meta http-equiv element attribute whose value is default-style represents a pragma directive that specifies the document’s preferred stylesheet. content=default-style-name where default-style-name is the name of the preferred stylesheet and must either match the value of the link title="name" that also has href="" attribute referencing the location of said stylesheet or, the names must match the value of the style title="name" whose contents are a css stylesheet.
http-equiv="content-language" (Default Language) Pragma Directive
meta http-equiv element attribute whose value is content-language represents a pragma directive specifying a document-wide default language; this is obselete, specify the language on the root element instead.
http-equiv="content-type" (Document Character-Encoding Declaration) Pragma Directive
meta http-equiv element attribute whose value is content-type and has an accompanying content attribute and value represents a character encoding declaration.
meta http-equiv="content-type" indicates the meta element is in the encoding declaration state and represents a character encoding declaration.
meta http-equiv="content-type" content="meta-charset string" is a specially formatted string providing a character encoding name whose value is content-type and which has an accompanying content attribute and value is said to be in the encoding declaration state.
Non-standard meta http-equiv Values
AllowContent-EncodingContent-LanguageContent-LengthContent-TypeDateExpiresLast ModifiedLocationSet-CookieWWW-Authenticate
content Attribute
The content attribute is the value in the name/value pair. The value can be any valid string and should always be used in conjunction with a name or http-equiv attribute. It gives value of the document metadata or pragma directive when the meta element is used for these purposes. The content contains the actual metadata defined by the The name attribute.
charset Attribute (Document Character-Encoding Declaration)
The charset attribute specifies the character encoding used by the document (aka character encoding declaration). It has no effect on xml documents, and is only used to facilitate migration to/from xhtml. The charset attribute represents a document’s character encoding declaration when an html document is serialized to string form. There must be no more than one meta element with charset attribute per document.
The charset attribute represents a character encoding declaration, where charset="name" specifies a character encoding name specified by the iana registry that has a Name or Alias field labeled as “preferred mime name“, or if none of the Alias fields are so labeled, a Name field in the registry.
scheme Attribute
The scheme attribute defines the scheme that should be used to interpret the property’s value, which should be defined within the profile specified by the profile attribute of the head element. It provides additional information about the meta information; used in conjunction with the profile attribute of the head element (which provides a pointer to instructions about the contents of the profile which are directly related to meta name attribute values). The value of scheme is a uri specifying the location of the profile information on the server.
The scheme attribute is obselete; use only one scheme per field or make the scheme declaration part of the value.
Bibliography
- meta name – name-value-metadata html5
- MetaExtensions
- meta http-equiv=refresh – "refresh" pragma directive HTML5
- meta – Elements of html5
- meta html Elements w3c Wiki
- Meta html Element
- Meta Content html Attribute
- Meta Scheme html Attribute
- Dublin Core Metadata Initiative (dcmi)
- Meta http-equiv html Attribute
- Proposal for Native Browser Support of High-Resolution Image Substitution
- Meta Object
links for 2011-05-20
Posted on: No Comments-
Assistive Technology
-
Speech Recognition.
-
Color Contrast Ratio Calculator
-
speech interface
-
jaws
link rel="prefetch" Element
Posted on: No Comments
Prefetch Your Content for a Primed Cache Experience
By Anticipated Preloading and explicitly pre-loading files, docs, resources that are not immediately in use, you give users a primed cache experience.
<link rel="prefetch" href="http://domain.com/pix/of-your-moms/at-my-house.png" />
link rel="prefetch" directs the browser to begin loading the image specified by href="" once the current document has completely loaded. When the user directs to the page (hopefully it’s next, but not necessarily) that has prefetched images, you have one less request necessary to make that page load.
Assistive Technologies
Posted on: No CommentsAssistive Technology or Adaptive Technology refers to assistive, adaptive, and rehabilitative devices for people with disabilites, including the process used in selecting, locating, and using them.
- Screen Readers - Jaws, VoiceOver, WIndowEyes
- Screen Magnifiers
- Captions for Audio and/or Video
- High Contrast Mode
- Voice Recognition and Alternative Input
Screen Readers
Screen Readers are software applications developed to interpret what is sent to standard output (displayed on screen usually) and then to display said interpretations to the user in a format accessible to their situation. Possible display implementations are text-to-speech, sound icons, Braille output device to name a few.
Screen Readers are a form of at mostly for users with vision impairments.
Orca
Orca is a free, open source, flexible, and extensible screen reader that provides access to the graphical desktop via speech, braille, magnification and combinations of the three.
Orca supports the Assistive Technology Service Provider Interface (at-spi), which is the primary assistive technology infrastructure for Solaris and Linux operating environments.
Emacspeak
Emacspeak is a speech interface that enables visually impaired users to interact independently and efficiently with the box(es). Audio formatting and full support for acss allows Emacspeak. to produce rich aural presentations of data. Ecmaspeak speech-enables local and remote information via a consistent and well-integrated user interface.
Linux Screen Reader (lsr
The lsr project is an open source effort to develop an extensible assistive technology for the gnome desktop environment.
nvda (NonVisual Desktop Access)
nvda is a free, open source screen reader for Windows (written in Python).
jaws (Job Access With Speech)
jaws is a screen reader for Windows. jaws provides users access to screen information via text-to-speech or Braille display. jaws provides users access to the jaws Scripting Language, which effectively gives them the power to make the most of their Web experience. It is also $1,000, which makes me physically ill, but providing a scripting language to let users customize as they see fit almost makes that ok in my world.
Window-Eyes
Window-Eyes is a Windows screen reader which converts components of Windows into synthesized speech allowing for complete and total access to Windows. Windows-Eyes is a ridiculous $895.00, so you have to pay the price for a second box just to be able to use your current box…on top of whatever disability you have to cope with. Personally, I’ll never recommend Windows-Eyes based on that; moreover, I’ll do everything in my power to deter anyone and everyone interested to find another solution.
VoiceOver
VoiceOver is a screen reader built for os x, enabling access to Macintosh and/or iOS devices (via spoken descriptions) and access to the Mac (via keyboard). VoiceOver not only addresses visually impaired users, it address users with dyslexia.
Screen Magnifier
A Screen Magnifier is software that interfaces with a computer’s graphical output to present enlarged screen content. It is a type of assistive technology suitable for visually impaired people with some functional vision; visually impaired people with little or no functional vision use a screen reader.
The simplest form of magnification presents an enlarged portion of the original screen content, the focus, so that it covers some or all of the full screen. This enlarged portion should include the content of interest to the user and the pointer or cursor, also suitably enlarged.
Screen Magnifiers are common in ranges of 1 – 16, the greater the magnification the smaller the proportion of the original screen that can be viewed; so users will tend to use the lowest magnification they can manage.
Common Features in Screen Magnifiers
- Color Inversion – Many people with visual impairments prefer to invert the colors, typically turning text from black-on-white to white-on-black. This can reduce screen glare and is useful for those suffering from age-related macular degeneration.
- Smoothing – Text can become blocky and harder to recognize when enlarged. Some Screen Magnifiers anti-alias or smooth text to compensate.
- Cursor Customization – The mouse and text cursors can often be modifed in several ways, such as circling it to help the user locate it on the screen.
- Different Magnification Modes – Screen Magnifiers can alter how they present the enlarged portion: covering the full screen, providing a lens that is moved around the un-magnified screen, or using a fixed magnified portion.
- Screen Reader – Some magnifiers come packaged with a basic screen reader, allowing whatever the user is pointing out to be read alout.
Captions for Audio and/or Video
Closed Captioning is the process of displaying text on a television, video screen or other visual display to provide additional or interpretive information to individuals who wish to access it. Closed Captioning typically show a transcription of the audio portion of a program as it occurs (either verbatim or in edited form), sometimes including non-speech elements.
The term “closed” in closed captioning indicates that not all viewers see the captions—only those who choose to decode or activate them. This distinguishes from “open captions” (sometimes called “burned-in” or “hardcoded” captions), which are visible to all viewers.
Subtitles (captioning) are textual versions of the dialog occuring on the television; Subtitles usually appear at the bottom of the screen, displaying audio content as text.
Television teletext subtitles carry additional sound representations for deaf and hard of hearing viewers; Teletext Subtitle Language follows the original audio, except in mult-lingual countries where the broadcaster may provide subtitles in additional languages on other teletext pages.
High Contrast Mode
High Contrast is an accessibility feature designed to address visual impairments. People afflicted with visual impairment can use High Contrast Color Schemes to increase legibility via heightening screen contrast with alternative color combinations (some also enlarge the font size).
High Contrast Mode is an os feature; it is accessible in Windows by pressing Ctrl+Left Shift+PrintScreen.
In High Contrast Mode all images and colors are discarded. A predominant color pair is then used to display the entire os interface (usually white or yellow on black, or vice-versa).
Voice Recognition and Alternative Input
Voice Recognition
Voice Recognition is a software app that allows users to generate text (dictation) and/or operate a computer (command and control) using the sound of their own voice! Speech Recognition uses a neural net to become familiar with a user’s voice. This neural net is constructed from data the app captures and stores regarding pronounciation charicteristics for every single word a user says. Speech Recognition also uses grammatical context and frequency of use to try and predict the word a users wishes to input.
Alternative Inputs
Access/Ability Switches: are alternative input methods that can utilise controlled movement (from blinking one’s eyes, exhaling, a foot, etc.). Switch operation greatly varies according to its make/model and requirements of use. Switch Access is frustrating and time consuming and should be only used as a last resort.
Access/Ability Switches are ideal for users with physical impairments and/or dexterity difficulties.
Braille Keyboards
Braille Keyboards are not the magic bullet they sound like; usually they support a full standard keyboard but only allow the input of Grade 1 Braille.
Braille Keyboards are primarily used for terminal emulation software; their usage is mostly limited to blind or visually impaired users.
Ergonomic Keyboards
Ergonomic Keyboards designed and shaped to reduce pain/effort from typing. Ergonomic Keyboards are touted as Carpal Tunnel Syndrome killers, they reduce strains, movements of the arms, hands, wrists, fingers, etc.
Twiddler
Twiddler input device is strapped to a user’s hand (looks similar to a remote control); Equipped with twelve buttons and a mouse pointer, Twiddler is ideal for users with dexterity difficulties.
BAT Chording Keyboard
BAT Chording Keyboard has only seven keys, however via multiple keystrokes, still offers same functionality as a standard keyboard.
Overlay/Concept Keyboards
Overlay/Concept Keyboards equipped with adaptable interface that is customizable for users needs. Can have large/small keys; keys can have large/small gaps between, etc. Ideal for users with learning disabilites and/or dexterity difficulties.
