June 2020

Brian Dys

Creative Leadership
Updates Category Archive Index
220
Categories

HTML Semantics

11:43:57
11:43:57
Brian Dys Avatar Brian Dys
0
Comment

I’m currently working on HopScotch 3 and it involves a lot of revising the HTML markup of content structure plus a lot of structural class names.

In relation to this HTML refactoring, I’d like to share with you some notes on writing the HTML markup of web sites:

  1. Text. Begin by writing in plain text all the important content your web site has. For example, you might have a web site logo – translate it into words; if you web site has a tagline or description, write that too.
  2. Tag. Follow it up by wrapping each text content in its semantic HTML tag. Avoid using div or span just yet. For example, your web site name should be wrapped in a heading tag like h1 since it is the title of your HTML document; your tagline could be wrapped in a p tag. At this point, all heading tags could be in h1 since we have not put these objects in context yet. Eventually, we would be arranging the hierarchy of these tags – from h1 to h6.
  3. Group. This is where div and span will come into play. You will have to group and segment the objects based on semantics and not on visual appearance. For example, you could wrap both the web site name and tagline in one div.
  4. Classify. Put the class names into the grouped structure of the objects. For example, the div that contains the web site name and tagline could be classified as “web-product-name”. The test for its semantics is if the name is true to the objects’ nature – something that isn’t tied up to visual appearance or layout.
  5. Format. To add another level of semantics and structure to the objects, we could use Microformats. It uses a vocabulary of class names that give structure to common content such as a person’s information, a movie’s information, an organization’s information and much more.

Related Reading

Further Reading

Categories

UI Condition

12:31:24
12:31:24
Brian Dys Avatar Brian Dys
0
Comment

Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object.

Example

To denote that an article entry does not have content, we add the class ui-cond__entry--blank which translates to “the UI condition of entry is blank”.

[html]
<div class="ui-cond__entry–blank">
…
</div>
[/html]

Categories

Structural Classes

04:51:33
04:51:33
Brian Dys Avatar Brian Dys
0
Comment

Structural Classes are classes that denote hierarchy in HTML tags particularly in div tags.

Example: Structure of a Component

[html]
<div class="comp">
<div class="cr">
<h class="accessible-name"></h>
<div class="ct">
Content
</div>
</div>
</div>
[/html]

Please note that h denotes a heading tag that varies from 1 to 6 depending on the HTML 4 outline.

The Structural Classes in this example are the following:

  • comp (component)
  • cr (container)
  • accessible-name (heading or official name)
  • ct (content).

Maximum Number of Classes

While building the structure, we will put generic and specific class names into each area. The suggested maximum number of classes to add into a single div is two (2).

The first class to be added is the generic class – which is basically, what the component is. The second class – if available – is the category it belongs to – which will become the specific class – this is usually inherited from its parent.

Example of Generic Class

In this example, we’ll use the Author Component.

The Author Component is part of an article byline wherein the name of the author is indicated (along with the date the article was published).

Name of component (generic class): Author
Category of component (specific class): Article Entry

Using this information, we can plot the classes into the structure.

[html]
<div class="comp author_comp article-entry-author_comp">
<div class="cr author_cr article-entry-author_cr">
<h class="accessible-name"></h>
<div class="ct author_ct article-entry-author_ct">
Content
</div>
</div>
</div><!– article-entry-author_comp –>
[/html]

This structure now features the following:

  • a generic class (author_comp) which will be used in any instance of author in the HTML document
  • specific class (article-entry-author_comp) which could be used to directly select the component (e.g., for use in CSS)

Other Guidelines

The objects inside ct (content) could simply have their generic classes – just like with the heading tag which only has accessible-name as its class.

Categories

Introducing UI View and UI Container

14:28:34
14:28:34
Brian Dys Avatar Brian Dys
0
Comment

There’s a need for web pages to be defined in which view it is in and in which type of container the whole view is in.

In this regard I am using ui-view--<view name> and ui-cr--<container name> (cr short for container).

UI View

UI View is the representation of the totality of the page or screen the user is in. Common examples of this is the Sign In screen of web apps, Dashboard, or Home views.

Example: If you are on the Terms & Conditions page or a web site, you could classify it as:

<div class="ui-view--terms-conditions">

UI Container

UI Container, on the other hand, is the type of user interface that contains the components or even the whole view (in this case, it is usually called screen or page).

Example: Using the example above, the page is contained in some sort of container – it is usually contained in a page or screen. For the sake of being device-agnostic, I would define it as screen – it being displayed thru a screen.

<div class="ui-cr--screen">

Other types of UI Containers are:

  • screen
  • dialog box
  • drawer
  • panel
  • pop-over
  • overlay

Erratum

In my entry, UI Type and State Class Naming Convention, I used UI Type to define a dialog box – while in this entry, I used dialog box as one of the standard UI Containers.

I am now using UI Type to define a specific UI – something that one invents and not a standard in the community. For example, you’ve created a three-column panel that slides one by one – you could dub it as “three-col-panel” thus <div class="ui-type--three-col-panel">

UI Container is a modifier – once you’ve added this class to a component, it modifies its standard structure to take the form of the said container. The same can be said for UI Type, but what it modifies is the whole view, including the containers. Simply put, you may be in Terms & Conditions view, and while it is contained in a screen or page, once you’ve added a three-column-panel UI Type, the layout transforms into a three-column type of layout.

Categories

Dubbing HopScotch Versions

08:02:55
08:02:55
Brian Dys Avatar Brian Dys
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).

Oasis Tapes
Cassette tapes of Oasis.

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”.

Categories

Philippines Is on a Roll

10:44:52
10:44:52
Brian Dys Avatar Brian Dys
0
Comment

The 20 Fastest-Growing Economies This Year

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