
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.
I received a confirmation that HopScotch got approved in WordPress Themes Directory.
There are several blog entries in Design DriveThru about the practical application of HTML and CSS, simple ideas as well. In order to put these entries in a clearer light, there needs to be specific categories where they fall under. This will put things in context so that the reader would know to which extent the entry applies to him or her.
For example, as we talk about Notes on SASS File Structure, how does one try to absorb this concept? You might ask if this entry is important for you as a web or front-end designer. The answer can be made easier by categorizing the topics.
The first categories deal with a particular web concept as being either of the two:
Theory deals with general principles.
Theory is a contemplative and rational type of abstract or generalizing thinking, or the results of such thinking. Depending on the context, the results might for example include generalized explanations of how nature works.
Source: Wikipedia
An example of a Theory is CSS Principles.
Technique on the other hand, deals with practical application.
A technique is a procedure to complete a task.
Source: Wikipedia
An example of Technique is Recreating Spotify’s Album Cover.
There could also be an entry with both Theory and Technique as its categories, for example: Using <body> to Define UI States and Types. This entry talks about principles and demonstrates how to apply it.
The second part of categories is about the web being generally split into two – it is either:
The latter is from The Elements of User Experience by Jesse James Garrett.
Web Documents deals mainly with information like Wikipedia or a WordPress blog. This is the primitive beginnings of HTML wherein information are linked to other information via anchor elements.
Web Applications deals mainly with services that foster activities and enable the users to accomplish specific tasks. Good examples range from Google Sheets to InVision.
This category set could be mutual like Flickr, for example – it is a webapp yet it deals with images and videos with rich information.
I would be using these categories to contextualize entries mostly discussing HTML because each web object, whether a simple web document or a webapp deals with HTML.
Hopefully this categorization technique will be useful in mapping the context of Front-End Design entries.
I took a portrait using my DSLR. It produced an image with a 3:2 aspect ratio.
I went to a photo lab to have it printed.
Do I want it cropped? Hell, no.
I spent hours enhancing and editing it. Besides, I already cropped it to perfection in Photoshop.
No cropping? Then here are the only popular photo paper sizes that I could choose from:
The other sizes like 3.5×5 (3R), 5×7 (5R), 8×10 (8R) will crop my masterpiece.
So I had it printed on an 8×12 photo paper.
I went to the picture frames section of my favorite department store.
Only to find out that they are only selling these frame sizes (cue Psycho shower theme):
Now, do I end up snipping the printed photo to fit into an 8R frame?
No. I ended up buying a certificate frame with enough margin to fit my photo.
This age is digital age; this year is 2014 and it’s ending. Everyone has a digital camera in his or her pocket.
Most likely, the digital picture that one camera produces has either these aspect ratios:
Even a full frame film camera is in 3:2.
So why in the world are photo labs and picture frames still speaking in the language of 5Rs and 8Rs?
Photo papers and picture frames must cater to the popular aspect ratios.
Support 1:1 Instagram size if you must!
Reading in Facebook about an upcoming Procurement Hack by the Open Data Philippines and PhilGEPS, I followed a link to http://data.gov.ph/hackathon and I was shown a 404 Not Found page.
I could have been well within my wits to simply use Google Search but the immediate thing I did was to search for the word “hackathon” using data.gov.ph’s Search Form – that’s why it’s there, right?
There, I saw the title of what I was looking for as the second result – #KabantayNgBayan.
The link took me to another page with yet another link.
Hoping to “learn more” about #KabantayNgBayan, I followed the link to http://beta.data.gov.ph/news/kabantayngbayan-hacking-national-budget which turned out to be worse than a 404.
Now I already knew where the real page was upon hitting that Server Not Found (thanks, Google Search). But we should expect more from Government websites to provide us with the information we are looking for – immediately.
Let me itemize the things that must not be experienced by other users – be it those looking for hackathon information or those looking for more important information on Philippine Government websites.
Hackathons are like sleepover without the sleep – in a workshop with only cardboards, glues, and scissors as your materials and you are expected to come up with a rocket ship to relocate Philae to a sunny spot. Overnight.
But the websites hosting hackathons shouldn’t appear as if it was done in a half-hackathon event and launched. Think of UX Event websites that actually do not understand what “UX” means.
It’s true that this is a simple case of a broken link (or a user who opted not to use Google Search). Besides, I already found what I was looking for. But this scenario has proven to me that there’s a lot to improve regarding how the Government publishes and maintains information on its websites – not to mention when it comes down to searching for it – will the user find what he or she is looking for immediately?
Infomap is a spinoff of information architecture – it is a small part of it and is specifically for the usage of designers in creating Interaction Diagrams (basically a diagram of wireframes showing interaction; details on this in the future).
It helps in setting up the environment for the web product’s navigation and content structure.
1. Purpose of the web product
2. Business goals
3. User goals
4. Features
Basically, a Product Requirements Document (PRD).
Let’s use a Messaging app as an example – basically it allows the user to send and receive messages to a recipient; the app also requires the user to accept the Terms & Conditions before usage. For the sake of simplicity, let these be the only functions of the app.
That’s it – as for the other views, every link must have its own View (so that your views will be: Entrance, Home/Read Messages, Compose Message, etc.)
All in all you must end up having the following:
If you’re travelling to or from Metro Manila, expect the rush hours of 7 to 10 a.m. and 5 to 9 p.m on weekdays. Your usual question before going must be, “How’s the traffic?”
Here are several ways to be informed of the traffic conditions if you really want to go with the flow (or not).
Hosted in Interaksyon.com, I personally find the Line View the most useful of all views – with its linear presentation and color coding of traffic levels, you could easily see the reds.
In case you want to see for yourself if a particular area is jammed, there are live traffic monitoring cameras available for online viewing.
Upon reaching the site:
Note: Currently there seems to be a bug if you try to view an area on its own page (this will happen if you don’t press “View All Cameras”).
To avoid wasting time standing in long lines at MRT3, check out the situation first via Live CCTV. Sometimes it’s better to take the road than to take the train.
Below the main view of the camera are the other views such as the North/Southbound ticketing and platform areas.
For other roads and streets not listed via Metro Manila Traffic Navigator, there’s Waze. It relies on its mobile users to report the road condition at their current location. So you could be warned if there are scrupulous traffic officers hiding under a bridge and even find out if there’s saklaan sa may kanto.
It only takes a minute or two to check the status of the roads you’re taking when travelling somewhere. If you’re well-informed, you could save time and even contribute to lessen the influx of people/vehicles in a common route during rush hours.