Volunteer Work
Categories
0
Comment
It’s very easy to number versions (e.g.,version 1, version 2, version 2.0) – it’s linear and you could place decimal points for smaller versions.
However, it’s boring. That’s why the likes of Microsoft, Android, WordPress (and a lot more) dub their versions or releases around a theme.
Let me introduce to you song titles from Gallagher Brothers’ bands (Oasis, Beady Eye, Noel Gallagher’s High Flying Birds).
But with a twist – to give it state-of-the-art, 21st century, electronic and digital age treatment (I won’t put an “e” or “i” as prefix nor remove any vowel before “r”), I will capitalize the letter of the second word found in a compound word. In case of two-word song title, I will compound them with the same capitalization (e.g., ChampagneSupernova).
HopScotch 3 is “WonderWall”.
The world is expected to grow 3.2 percent in 2015 and 3.7 percent next year after expanding 3.3 percent in each of the past two years, according to a Bloomberg survey of economists. China, the Philippines, Kenya, India and Indonesia, which together make up about 16 percent of global gross domestic product, are all forecast to grow more than 5 percent in 2015.
Source: The 20 Fastest-Growing Economies This Year on Bloomberg.com
Categories
Commenting is disabled.
I’m currently researching on how to design the content structure of article bylines – that section wherein you see the author’s name and the date the article was published.
The byline on a newspaper or magazine article gives the date, as well as the name of the writer of the article.
~ From Wikipedia
Some resources I’ve found useful:
Chikka v6.2 is here – featuring Group Chat.
The main idea behind generic class names is to have a standard naming convention for common HTML patterns and attaching it to specific class names.
For example, here’s a simple HTML markup of Skip Link component:
[html]
<div class="comp skip-link_comp">
<a class="skip-link_axn" href="#content">Skip to content</a>
</div><!– skip-link_comp –>
[/html]
Notice that there are two generic class names attached to specific class names:
- comp – short for component
- axn – short for action
Only comp is suggested to have a separate class name for CSS debugging purposes.
The syntax is: specific-name_generic-name
List of Generic Class Names
- comp – component
- cr – container
- ct – content
- hr – header
- name – title or heading
- desc – description
- grp – group or parent of number of items
- item – part of a number of items
- accessible-name – official name
- friendly-name – custom displayed name
- nav – navigation
- nav-grp
- nav-item
- axn – action
- axn-grp
- axn-item
- notice – notification message
- datetime – time
- sep – separator, divider
- label
- pred_label – (predicate) verb part of a label or phrase; e.g., in the phrase “Edit Entry”, “Edit” is the predicate
- subj_label – (subject) noun part of a label or phrase; in the example above, “Entry” is the subject
- prep_label – preposition
- verb_label
- noun_label
- adj_label
- form
- field
- field_cr
- field-axn
- field-axn_cr
– adjective
- colon_label – colon
- comma_label
- info
Standalone Generic Class Names
- comp
- nav
- axn-comp
List of IDs
- comments
Post in context: I am “refactoring” the existing HopScotch Free WordPress Theme . This is due to several improvements in standardization and content structure.
The example that I will be using is the most common element of web sites – the web site name and description. One encounters this in the form of web site logos and the usually the description is hidden from view.
Here are my notes as I go each step of the front-end design process.
Stages in Front-end Design
HTML
- Write the content in text format
- write the important information ahead of the less important (which comes first, an item’s name or its thumbnail?)
- think of it as words which will only be dictated by voice (like a screen reader)
- the information you are writing will be printed on paper (no images, only text in serif)
- only include images (icons, symbols) if they need to be translated or described in words, otherwise tackle during CSS stage
- e.g., should you write in text “cog icon” to represent it beside the “Settings” link?
- elements like <img> has the alt attribute which could contain a description of the image on display – this element, especially if a photo that supplements a text must be included with a <caption>
[html]
HopScotch
Champion of Content Structure
[/html] - Markup in HTML
- don’t use <div> or <span> (yet)
- if a text doesn’t match with any existing HTML element, use <p>
- for headings, use <h1> (change later when in context)
- add <a> for links and action elements
- always link up the web product’s name to the Home view
- related: HTML Outline
- separate objects and components with one vertical space (return)
[html]
<h1>
<a>HopScotch</a>
</h1><p>Champion of Content Structure</p>
[/html] - Add classes to elements
- start with generic class names (e.g., name, desc, axn, comp)
[html]
<h1 class="name">
<a class="axn">HopScotch</a>
</h1><p class="desc">Champion of Content Structure</p>
[/html] - Add HTML attributes
- HTML attributes are arranged by id, class, others
- add
titleattribute to <a> elements- accessed via tooltip; use it to display supplementary information
- add
roleattribute
[html]
<h1 class="name">
<a class="axn" title="Go to Home">HopScotch</a>
</h1><p class="desc">Champion of Content Structure</p>
[/html] - Componentize the elements
- wrap the grouped elements in <div>
- generic name of components is “comp”
- provide for specific class names in this syntax: specific-name_generic-name
- for a name grouping, separate with a hyphen (-)
- underscore(_) separates the specific from the generic
- put comment tag at the end of the component using the specific name
Only Generic Names:
[html]
<div class="comp"><h1 class="name">
<a class="axn">HopScotch</a>
</h1><p class="desc">Champion of Content Structure</p>
</div>
[/html] - wrap the grouped elements in <div>
The HTML markup of product-header_comp with specific class names:
[html]
<div class="comp product-header_comp">
<h1 class="product_name">
<a class="product-name_axn">HopScotch</a>
</h1>
<p class="product_desc">Champion of Content Structure</p>
</div><!– product-header_comp –>
[/html]
Note that comp is one of the standalone generic class names.
—
Conclusion
- don’t stress too much on class names – the important factor here is consistency
- the result is far from its final look since this component will still be put into context along with the site’s other components