Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
- Keeping Your Design Mind New and Fresh
- NFTs are a dangerous trap
- The Many Faces of Career Reinvention
- Humble Exits
- The Antikythera Cosmos
- Onboarding Yourself
- OpenAI’s state-of-the-art machine vision AI is fooled by handwritten notes
- The fallacy of “what gets measured gets managed”
- What is a Growth Mindset?
- How to Apologize to Your Kids
Previously, we have tackled the Text stage of RE:Creation wherein we came up with a textual content of the front panel of the packaging which is our basis for this stage.
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individual elements in HTML
Marking up means identifying elements, defining, and labeling them. It is just like in Text stage when we labeled elements and grouped them — but this time, we take it a step further by using HTML tags which has the capability to define where a markup starts and where it ends.
In HTML, we’ll use start and end tags to enclose elements. Once elements are enclosed by these tags, web browsers will be able to interpret and display them accordingly.
Speaking of HTML tags, they have a syntax for us to follow. Syntax is the arrangement of symbols and rules that constitute the correct form of a language just like HTML. As an example for the label “Header”, the HTML tag will be
</header>; for “Main”,
</main>; and for “Footer”,
It is one thing to make our content readable for web browsers (for them to properly interpret and display it) and another thing to make it readable for humans (us and other coders who will be reading or modifying our works).
The fact that we have marked up our content in HTML tags, that makes it readable for web browsers. Indentation, on the other hand, makes it readable for human readers. All content within structures can be indented; the same as content within groups. In this way, we could see how the content is nested by looking at it.
Step 1: Mark up the structure in HTML
- Enclose the structure labels in “less than” (<) and “greater than” (>) signs
- For their delimiters or boundaries, simply add a “slash” after the “less than” (<) sign
- Convert the labels to the “small caps” (e.g., “Header” becomes “header”)
- Indent the nested elements within the structure
At this point in our activity, we can already view the result of our markup in a web browser. In our demo in CodePen, you can see on one side what the browser will display given our markup. It’s not apparent because the text elements are still placed side by side, but the result already shows the structure we made: the “Header”, starting with “Product name”, the “Main”, starting with “Product main description”, and “Footer”, starting with “(none)”.
Step 2: Mark up the groups in HTML
- Similarly with step 1, mark up the groups by converting their labels into HTML start and end tags
- For the syntax, aside from making everything in “small caps”, convert spaces to underscores (“_”)
- Again, indent the nested elements within groups for readability
Step 3: Mark up the individual elements in HTML
Individual elements are the actual textual content inside the structure and groups. We could combine steps 2 and 3 once we’re used to marking up content in HTML.
- Similarly with step 2, mark up the individual elements by converting their labels into HTML start and end tags
- As an added effort for readability, we could remove empty lines between groups and their nested content, to make them visually grouped together
The result of our markup may not visually show much improvement but we’re already paving the path for a solid basis of HTML and CSS.
For our next activity, we will be going into the details of HTML tags. Since HTML is a language, it has a vocabulary — meaning, it already has a set of tags that is equivalent to what we created at this stage.
I admit, I am amazed by technology when it can bring photos to life. Decades ago, I scanned my paternal grandparents’ wedding portrait with the purpose of restoring it. It was scanned in four parts and the best restoration that I could do was stitch them together and remove some blemishes using Photoshop. I thought that I needed some painting skills if I wanted to restore the cracked part (which I didn’t).
Fast forward to 2021, my mind was blown to discover that technology could make animated portraits. Literally, it could make old stagnant photos come alive. If you want to see it for yourself, upload some pictures at MyHeritage Deep Nostalgia.
Here are they in their wedding day. Nanay, as we call our grandmother, survived her husband, Tatay. She’s now in her mid-80s, still as witty and beautiful as ever.
While I was at it, I also ran their portrait in MyHeritage In Color to somewhat colorize and enhance it. Amazing!
Update: 3 April 2021
When Nanay saw the moving portrait
Sabagay nung teenager ako, nanalo ako sa beauty contest. Kinukuha ako mag-artista ng tauhan ng Sampaguita Pictures, ayaw ng stepmother ko, baka raw mapariwara lang ang buhay ko. Sa Castillejos, Zambales yun, year 1949.Nanay Carolina
I said that if ever she took the offer, she would be alongside Susan Roces in Ang Probinsyano. She corrected me by saying that her colleagues would be Tita Duran, Pancho Magalona, Rogelio de la Rosa, and, Carmen Rosales. And that we won’t be born into the world. But she reassured me that all of us, my brothers and I, would be actors as well.
- What’s the actual risk of telling a little white lie on your résumé?
- How MyHeritage Brought Family Pictures to Life Using D-ID’S Live Portrait
- The Velocity of Skill Development: Quickly Closing the Gap
- Ness Labs
- When Everyone’s a Genius (A Few Thoughts on Speculation)
- Non-fungible token
- Why did I leave Google or, why did I stay so long?
The first time I’ve been at Avaloq’s office at Philam Life building was during my second interview. I was impressed by the interior design of the pantry. There by the couch were some company brochures in the style of a newspaper. I took one home to familiarize myself with the new company that I was planning to join.
Fast forward to almost a year, I was back to this office to get a Macbook device which was an official issue for UX designers.
While waiting, I hang out by the pantry and had some coffee. There were wine bottles and glasses on the wall but only as decor (they were empty, I checked).
Outside, during lunch, it was a typical workday — only that everyone’s wearing face shields and masks. There were many people lining up at Dunkin’ at Paseo Center. I went to Yellow Cab for a grub.
I was oblivious to the fact that some companies have their employees back on site until I went to the office myself. This was also evident on the road, by the number of vehicles going somewhere. Life goes on, indeed, with the pandemic still as dangerous as it started — we just managed to become familiar of how to stay safe in the outside world. I hope complacency in being careful does not get the best of anyone.
It was a Friday — a celebratory day wherein just last year when my officemates / friends would go out for dinner and some drinks, and sometimes the office turned on its party mode. Now, I had to rush home to avoid the heavy traffic in EDSA.
What permanently changed, we’ll only know as we’re putting old normal things one by one into the new normal.
This year is brighter at Avaloq as we’re growing within UX design team and others as well.
See if there is a good fit?