👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
My parents went to Teekay office to officially file for Papa’s resignation. He served there for 25 years already. He resigned to get the remaining cash to invest into the car wash business. I am very proud of my father for sacrificing his time and strength to put us in good schools. And undoubtedly, my mother, who was physically there to guide us while growing up. I will always be grateful for my parents.
Structural Classes are classes that denote hierarchy in HTML tags particularly in
Example: Structure of a Component
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:
accessible-name(heading or official name)
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.
<div class="comp author_comp article-entry-author_comp">
<div class="cr author_cr article-entry-author_cr">
<div class="ct author_ct article-entry-author_ct">
</div><!– article-entry-author_comp –>
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)
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.
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 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:
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.
Other types of UI Containers are:
- dialog box
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
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.
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.
Chikka v6.2 is here – featuring Group Chat.
Discovery has always been part of our experience in using web sites and apps. They could be in any form:
- clicking an ambiguous icon to find out what it does
- going through multiple pages to find information
- finding out what’s causing an alert icon beside a label
- learning and memorizing keyboard shortcuts
…and the list goes on.
One UI element that helps us in most discovery processes is the tooltip. Users of Windows or Mac have surely encountered it when you hover your mouse cursor on certain items in your computer desktop (maybe by chance or out of curiosity if you don’t want to click something). It is in the form of a box with text label or description.