
👋 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.
After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS).
To be able to ease the process of writing the style sheets, we must segment it into levels:
Ideally, each level must be buildt on top of the previous one yet still independent. For example, leaving the style sheet at browser level must present usable information. The same principle applies as one builds the style sheet level per level.
In time for the celebration of International Women’s Day today – we celebrate women’s achievements, we call for greater equality. #MakeItHappen
It is good news that Philippines ranks number 9 out of 142 countries in the Global Gender Gap Report 2014. This means that the gap between genders in many aspects of our economy is getting slimmer.
People and their talents are two of the core drivers of sustainable, long-term economic growth. If half of these talents are underdeveloped or underutilized, the economy will never grow as it could. Multiple studies have shown that healthy and educated women are more likely to have healthier and more educated children, creating a positive, virtuous cycle for the broader population. Research also shows the benefits of gender equality in politics: when women are more involved in decision-making, they make different decisions—not necessarily better or worse—but decisions that reflect the needs of more members of society.
~ Klaus Scheab – Founder and Executive Chairman, World Economic Forum
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:
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
.div
.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.Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object.
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”.
<div class="ui-cond__entry–blank"> … </div>
Structural Classes are classes that denote hierarchy in HTML tags particularly in div
tags.
[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).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.
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:
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.
Commenting is disabled.