25 May 2015

How to use topic and form labels for blog content classification

A. Two-Level Classification: Topics and Form

One way to classify your blog content is to use a two-level classification system.
  • Topic: Blogging, Marketing, Physics
  • Form: Blog, Books, Photos, Posters.
The Topic labels classifies the blog post according to the different subject areas, while the Form labels classifies the blog post according to what form did the topic incarnate itself--something you can see, touch, and feel, e.g. book, photo, slide, or poster.  For example, in Blogger, I may classify this post as follows:
  • Topic: Blogging, Library Science
  • Form: Blog
But since Blogger does not make distinctions between Categories and Labels, you just write the following words in the Labels field separated by commas: 
  • {Blogging, Library Science, Blog}

B. Set Theory: Union of Sets

In set-theoretic language, we say that Topic labels comprise a set distinct from that of the the Form labels. That is 
  • Topic = {Blogging, Library Science}
  • Form = {Blog}
When we put these two sets together, we get a union of sets:
  • Label = {Blog, Blogging, Library Science}
Unless the reader knows beforehand that you make distinctions between Topic and Form labels, he cannot easily separate the two types of labels in his mind because the two labels become ineffably united to each other, like water mixed with wine.

To help the reader know your two-level content classification system, go to the Blogger Dashboard, click Layout, and insert a Labels gadget in our menu header.  Check the Topic labels but not the Form labels, and click save. Next, insert another Labels gadget menu header below the previous one. Check the Form labels, but not the Topic labels, and click save.

C. Conclusions

Blog posts may be classified both by topic (e.g. blogging, marketing, and design) and by form (e.g. blog, slides, posters, videos).  We may combine elements of these two sets of labels to serve as your  blog post labels. Since it is difficult for the reader to intuit your two-level classification system, you may wish to put a two-level menu header consisting of Topic labels on the top menu and Form labels on the bottom menu.


20 May 2015

Quiznos Restaurant at Regis Center, Katipunan, Quezon City

Quiznos' Logo at Regis Center, Katipunan.  Quiznos logo name is red, with the Q in red and green.  The Q is shaped like a pan or two chili fruits of differnt color. At the background is the Quiznos counter with the menu shown on the screen.

This is the view of Quiznos before you ascend the escalator at Regis Center, Katipunan.  The brown tiled wall on the left is near the elevator.  The wavy silvery-white wall on the right is what you immediately see if you go down via the escalator.  The place is ideal for those on the go--those who just want to grab a sub and eat it later.




16 May 2015

Interior design of Ersao restaurant along Katipunan Avenue, Quezon City

The Ersao restaurant opened for about a year in Katipunan Avenue, Quezon City. Then it closed. I had some good photos of the restaurant's interior design a few days after it opened. It's a good case study in graphic design.

Ersao's name and logo.
Ersao's name and logo.  The logo is a head of a girl with two black hair buns. Ersao's name is in blue-green bold sans serif.   The restaurant's Chinese name in red follows.  The background is green with large black wood border.

Ersao's interior design
Ersao's inerior design.  The walls and tables are white.  Sofas are grey and avocado green.  The black-brown motif lines on the wall serve as table and borders for the pictures

Ersao's interior design
Ersao's interior design.  The tables and walls are white.  The chairs are brown wood while the grills are black.  A horizontal green line hangs above the windows.  On the left side are the condiments.


14 May 2015

Ateneo Arete Site Marker: Blue Eagle's Nest by Niccolo Jose

The Blue Eagle's Nest by Niccolo Jose was once the site marker for the Ateneo Arete:
The “Areté,” named after the Greek word for excellence, will be the central space for the integral formation of Ateneans in the liberal arts and the sciences, all in the Jesuit tradition. The three-level structure will house a museum where the Ateneo Art Gallery will transfer; a state-of-the-art 900-seater theater and concert hall; a Black Box theater with a seating capacity of up to 250; The Learning Innovation Wing that shall bring together the various disciplines; a contemporary classroom called the “Sandboxes” that can serve as a lab, studio, and consultation/workshop area; and art studios for rehearsals for visual performing and visual arts.
That was April 24, 2014. Now the site marker is gone--nothing but a heap of ruins of tumbled branches in a barren field.  In order to see what the Blue Eagle's Nest looked like before, here are some photos.

Blue Eagle's Nest marker in wood and soil
Blue Eagle's Nest marker in wood and soil.  The two eggs are made of branches, just like the nest itself. The nest sits on top of a mound of orange soil. On the background are trees under the sky.
The Arete site marker
The Arete site marker sign. There's a black cloth which surrounds the working site. I love the blueness of the sky and swirling clouds!
Billboard: On this site will rise the Arete
Billboard: On this site will rise the Arete.  The architecture of Arete is very modern like a warped tin foil placed beside a trapezoidal building.
Niccolo Jose's Blue Eagle's Nest.  At the background is the Oracle Hotel and Residences (center) and Regis Center (right).
Niccolo Jose's Blue Eagle's Nest.  At the background is the Oracle Hotel and Residences (center) and Regis Center (right). The steps reminds me of the Ziggurats of Babylon
Niccolo Jose's Blue Eagle's Nest
Niccolo Jose's Blue Eagle's Nest.  Shown here is the stairway that leads to the nest. This must be what it looks like when you're an Aztec priest ascending to the top of the pyramid to offer a human sacrifice by tearing the victim's hear and offer it to the gods.
Billboard describing Niccolo Jose's Blue Eagle's Nest
Billboard describing Niccolo Jose's Blue Eagle's Nest.  The caption below is the Ateneo Fine Arts Program and the Arete  You can click on the picture to see an enlarged version.
Tangled branches in Niccolo Jose's Blue Eagle's Nest
Tangled branches in Niccolo Jose's Blue Eagle's Nest. This reminds me of the deathbed of Denethor during the seige of Gondor in the Lord of the Rings, when he burned himself out of despair, after seeing the coming of the Black Ships of Umbar.


13 May 2015

Gateway Mall at Araneta Center, Cubao

Gateway Mall's G logo. The logo consists of a script G in pink and a sans  serif G in green with a yellow background. Below the logo are the following  signs: Cineplex 10, Food Express, and Rustans
Gateway Mall's G logo. The logo consists of a script G in pink and a sans serif G in green with a yellow background. Below the logo are the following signs: Cineplex 10, Food Express, and Rustans

Gateway Mall's main entrance.  Note the glass dome structure with steel frame.  The Gateway name is above the entrance.
Gateway Mall's main entrance.  Note the glass dome structure with steel frame.  The Gateway name is above the entrance.

Gareway Mall's main entrance.  On the right are the grass and palm trees. The overall effect is an oasis in the desert.
Gareway Mall's main entrance.  On the right are the grass and palm trees. The overall effect is an oasis in the desert.

Three palms in front of Gateway Mall's main entrance. Actually there is a  fourth palm, but the three palms provide a strong anchor to the image.
Three palms in front of Gateway Mall's main entrance. Actually there is a fourth palm, but the three palms provide a strong anchor to the image.

Gateway Mall's name at the entrance. The letters have different colors: pink, yellow, orange, blue-violet, yellow, pink, and yellow green. The Gateway name has a violet underline.  Some palm fronds partially cover the name.  Note the ribbed steel overhang at the entrance below the name.

The white bird design at the main entrance of Gateway Mall. The bird looks like a parrot.  Below the bird is probably a cluster of flowers.  Two plants flank the bird art near the two polished steel columns.
The white bird design at the main entrance of Gateway Mall. The bird looks like a parrot.  Below the bird is probably a cluster of flowers.  Two plants flank the bird art near the two polished steel columns.


07 May 2015

The Luigans Spa and Resort Hotel in Fukuoka, Japan

Last 2-6 March 2015, I went to Fukuoka, Japan to present a poster in the United Nations/Japan Workshop on Space Weather: Science and Data Products from ISWI Instruments. The workshop was held in The Luigans Spa and Resort Hotel in Fukuoka, Japan.  Below are some photos of the hotel's architecture and landscape. If you wish to use some of the photos, copy the attribution license at the bottom of this blog post.

The entrance to the hotel. The design looks like an entrance into a traditional Japanese home with large roof beams and post columns.
The entrance to the hotel. The design looks like an entrance into a traditional
Japanese home with large roof beams and post columns.

I see pine trees with box trees.
I turned around and this is what a I saw.  I see pine trees with box trees.  It's a
forest island that marks as the rotunda, so that cars go around it during entrance
and  exit to the hotel. I like the contrast of the blue sky with the brown-green
leaves.

It's a tiled pavement with trees growing in the  middle
This is to the right of the entrance. It's a tiled pavement with trees growing in the
middle. On the right side of the pavement is an orange rectangular facade of the
building under a blue sky.  
Tiled pavement with trees and palms
This is to the left of the entrance. It's the same tiled pavement with trees growing
in the middle.  But the facade has turned to white with dull rusty brown at the
first floor. Beside the buildings are palms shaped like Abaca in the Philippines.
Two red lampshades stand at both ends  of the desk
The reception desk. Notice that the wood is solid and carved into rectangular
block with an axe--definitely not sawed. Two red lampshades stand at both ends
of the desk.A reddish golden curtain hangs behind.
It's raining outside and  a man and a woman are wearing umbrellas
This is the view of the entrance as seen from the inside.  It's raining outside and
a man and a woman are wearing umbrellas.  The roads were transformed into a
dark mirror. I think the grilled pink roofs are meant to protect from the snow,
but allows them to drip down.
Flat grassland with palms jutting out of the ground.
We went out to see the sea.  It's a flat grassland with palms jutting out of the ground.
Across the sea you can see some giraffe-like structures.  It looks like a port.
Port city as a backdrop behind the three palms
Here is a closer view of the port city as a backdrop behind the three palms.

A white tent rises out of the fields beneath the cloudless sky
A white tent rises out of the fields beneath the cloudless sky. The wind is cold
out here. The sea is to the right.
This is a view of the hotel's facade facing the sea. At the centerpiece is the palm
garden. Notice that the benches are connected to the tables.  In this way, the
whole thing moves as a group and the symmetry is preserved even if you want to
rearrange them to have a better view of either the hotel or the sea.
Yellow backdrop for ceremonies and there are pink columns on the sides
This is the facade from another angle without the benches and tables. There's a
yellow backdrop for ceremonies and there are pink columns on the sides.

Yellow backdrop with three brown archs and conifers
A closer look at the yellow backdrop. The sign says something like, "Venue
Chapel"? There are some ornate white metal chairs. Beside the backdrop are
the three brown arch.  Some conifers grow at the center.
A pool with palm trees
A view of the pool in front of the hotel's facade. The area surrounding the pool is
paved with wood. Beside the pool are some palm trees.  Notice the sticks
connecting the palms to make sure they grow straight together.

Benches for sun bathing beside the pool
I moved back a bit to see rows of benches for sun bathing beside the pool.
Notice that the benches are grouped by twos.


Behind the benches is a curved yellow guard wall that leads to a white tent.
Another view of the rows of benches for sun-bathing. Behind the benches is a
curved yellow guard wall that leads to a white tent.
  Creative Commons License
The Luigans Spa and Resort Hotel in Fukuoka, Japan by Quirino Sugon Jr is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at http://quirinosugonjr.blogspot.com/2015/05/luigans-spa-resort-hotel-fukuoka-japan.html.

06 May 2015

How the dragonfly got out of the window pane

Last night, I heard a tick-tick-tock in one of the fluorescent lamps in my office.  It does not sound like the flies that swarm the light during rainy season. I looked up: it's a dragonfly.

I don't know how it entered my office.  I think it passed through the windows in the toilet: it is made of cement with slits slanting downwards.  A tree frog used to enter that way.  And now a dragonfly.

Perhaps, the dragonfly mistook the fluorescent lamp for the sun.  I checked the literature on the photoreceptors of the dragonfly's eyes.  Their eyes are sensitive to UV, Blue, and Green. The fluorescent spectrum have peaks at red, green, and blue.  So the dragon fly saw the blue and the green, but not the red.

This morning, I heard the tick-tick-tock again, but this time not on the fluorescent bulbs but on the glass windows facing west.  The window is about 6 feet above the floor.  To open the window, you have to turn the latch at the bottom pane, then move the window outward.  The hinge is on the upper pane.

The window is closed.  The dragonfly can't get out.

I climbed the aluminum stairs below the window and tried to open the window.  The latch is stuck.  It hasn't been opened for a very long time, about three years, I guess.  Oh, what will I do?

But the dragonfly is gone!

I checked the bottom of the window pane.  It is partially open, just enough for the dragonfly to climb out and fly. How did it know that there was an opening?  I guess because of the wind currents.  It went where the wind blows.  Only a living thing can swim against the current: it is true with fishes and also with dragonflies.

It is only by faith that I say so, but it is enough reason for me to smile.  There is hope not only for flowers but also for dragonflies.

05 May 2015

How to make image snippets appear in Blog List or Popular Post in Blogger

If you are using Google's Blogger, you may have known about Google's Popular Posts and My Blog List gadgets.  The Popular Posts gadget counts the number of visitors per post in your specified time interval--one week or one month--and displays the blog posts ranked according to the number of visitors.  The My Blog List, on the other hand, provides a list of the blogs that you like with text and image snippets of the article (see Fig. 1). To make the image thumbnails and snippets appear, make sure that that you have ticked the corresponding boxes.  (See Fig. 2).

Sometimes, you will notice that even if you ticked the image thumbnail box, no image appears in some of your Blog List and Popular Posts.  What happened?

You have to understand that Blogger gets pictures only from your web album that is linked to the Gmail account that you used to open your blog.  If you only placed pictures to your blog through url links---Facebook, Wikipedia, or Google+,  Blogger won't use your pictures as image snippets in your Popular Posts and Blog List gadgets.  To make sure that this image thumbnail appears, you have to upload the picture using the "Upload from this Computer" option.  The images will then go the Picasa web album and they would appear in your gadgets that allows image snippets.

Fig. 1 My Blog List and Popular Posts gadgets as they would appear in your blog


Fig. 2. How to configure your My Blog List and Popular Posts gadgets



04 May 2015

How to make laundry washing a habit


For people who live by themselves or for newly married couples just learning how to do laundry chores, here's a system that I use which saves me the effort of scrubbing too hard:
  • Pour one sachet of powdered detergent into a basin filled with water 
  • Mix the detergent in water using your hand by waving them left to right 
  • Put the white laundry on the detergent mixture and soak for 24 hours. 
  • Hand wash the laundry, then rinse and hang to dry.
Twenty-four hours may appear too long. But the entire process just takes about 20 minutes in all from soaking the clothes to hanging them to dry--if we don't count the waiting of 23 hours and 40 minutes.

Actually, this waiting time of about 24 hours is ideal.

First, you give the detergent sufficient time to seek out the dirt and bind on them, so that you can flush them easier after you rinse your laundry. This means you don't anymore need to scrub those stubborn stains near the armpits and genital areas. You may not even need to use bleach. You just let the detergent do the action for you.

Second, if you soak your laundry the first thing in the morning, you can rinse them at the same hour the following day. In this way you build a ritual or a habit. Habits frees your mind from thinking too much on the task at hand, so that you can think of more important things, such as the meaning of life.

My system worked for me for several months now. If this also worked for you, let me know.

01 May 2015

How to draw lines and circles in HTML5 Canvas using JavaScript

I like drawing. I can do freehand sketch in 2 minutes. I can also draw perspectives using the principle of projective geometry. That's why, whenever I try to learn a computer language, I always check out first its drawing tools and commands. So far, my expertise in drawing is limited to MS Paint, Open Office Draw, BRL CAD, AutoDesk, LATEX, and MS Excel. Now, I want to add to my repertoire of skills by learning how to draw in HTML5 Canvas. Just for fun, I made a tutorial below on how to draw lines and circles in order to draw a music sheet, because I also love music. The subheadings of the article are from the lyrics of You Decorated my Life by Kenny Rogers:

1. All my life was a paper / Once plain, pure and white

 Let us first draw a canvas with dimensions 400 px by 300 px, and let us define the border to be black.  We modify the W3C Schools code a bit:

<canvas height="300" id="Canvas1" style="border: 1px solid #000000;" width="400"></canvas >

This is what we see:

Your browser does not support the HTML5 canvas tag.

2. Till you moved with your pen / Changing moods now and then / Till the balance was right

We now need to draw something in the canvas.  But before we do that, we need first to understand the coordinate system of the canvas element.  The upper right hand corner is the origin $(0,0)$.  The $x-$axis points to the right (standard), but the $y-$axis points down (disorienting at first, but you'll get the hang of this).  In the figure below, the orange point has the coordinate $(x,y)$

Fig. Coordinate system in the canvas element
Fig. Coordinate system in the canvas element

Now, suppose we draw some lines. To draw a line, the first point is defined by the command $moveTo(x_1,y_1)$, the succeeding point by $lineTo(x_2,y_2)$, and the actual line connecting the two by $stroke()$. Here is a sample code that draws four horizontal lines and two vertical lines at both ends:
<canvas height="300" id="Canvas2" style="border: 1px solid #d3d3d3;" 
width="400">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("Canvas2");
var ctx=c.getContext("2d");

ctx.moveTo(50,100); ctx.lineTo(350,100); ctx.stroke();
ctx.moveTo(50,120); ctx.lineTo(350,120); ctx.stroke();
ctx.moveTo(50,140); ctx.lineTo(350,140); ctx.stroke();
ctx.moveTo(50,160); ctx.lineTo(350,160); ctx.stroke();
ctx.moveTo(50,180); ctx.lineTo(350,180); ctx.stroke();

ctx.moveTo(50,100); ctx.lineTo(50,180); ctx.stroke();
ctx.moveTo(350,100); ctx.lineTo(350,180); ctx.stroke();


</script>


This is how it would look like:

Your browser does not support the HTML5 canvas tag.

3. Then you added some music / Every note was in place

A half note is defined by a open circle with a stem. A quarter note is a filled circle with a stem. And an eighth note is a quarter note with a flag.

A circle is drawn using beginPath, arc, and stroke commands. The arc function has the following arguments: $arc(x, y, r, \theta_0, \theta)$, where $(x, y)$ is the center of the circle, $r$ is the radius, $\theta_0$ is the initial angle in radians, and $\theta$ is the final angle to define the arc.

We can label the notes using $font$ and $\textrm{fillText}("\textrm{Text here}", x, y)$, where $(x,y)$ is the initial position of the text.

Here is a sample code that draws the notes:
<canvas height="300" id="Canvas3" style="border: 1px solid #d3d3d3;" 
width="400">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("Canvas3");
var ctx=c.getContext("2d");

ctx.moveTo(50,100); ctx.lineTo(350,100); ctx.stroke();
ctx.moveTo(50,120); ctx.lineTo(350,120); ctx.stroke();
ctx.moveTo(50,140); ctx.lineTo(350,140); ctx.stroke();
ctx.moveTo(50,160); ctx.lineTo(350,160); ctx.stroke();
ctx.moveTo(50,180); ctx.lineTo(350,180); ctx.stroke();

ctx.moveTo(50,100); ctx.lineTo(50,180); ctx.stroke();
ctx.moveTo(350,100); ctx.lineTo(350,180); ctx.stroke();

ctx.beginPath(); ctx.arc(100,180,8,0,2*Math.PI); ctx.stroke();
ctx.beginPath(); ctx.arc(150,160,8,0,2*Math.PI); ctx.fill();
ctx.beginPath(); ctx.arc(200,140,8,0,2*Math.PI); ctx.fill();
ctx.beginPath(); ctx.arc(250,170,8,0,2*Math.PI); ctx.fill();
ctx.beginPath(); ctx.arc(300,150,8,0,2*Math.PI); ctx.stroke();

ctx.moveTo(108,180); ctx.lineTo(108,145); ctx.stroke();
ctx.moveTo(158,160); ctx.lineTo(158,125); ctx.stroke();
ctx.moveTo(208,140); ctx.lineTo(208,105); ctx.stroke();
ctx.moveTo(258,170); ctx.lineTo(258,135); ctx.stroke();
ctx.moveTo(308,150); ctx.lineTo(308,115); ctx.stroke();

ctx.moveTo(158,125); ctx.lineTo(208,105); ctx.stroke();

ctx.font = "20px Arial"; ctx.fillText("mi",92,220);
ctx.font = "20px Arial"; ctx.fillText("sol",142,220);
ctx.font = "20px Arial"; ctx.fillText("ti",192,220);
ctx.font = "20px Arial"; ctx.fillText("fa",242,220);
ctx.font = "20px Arial"; ctx.fillText("la",292,220);

</script> 


Here is what it looks like:

Your browser does not support the HTML5 canvas tag.

This is all for now. Next time, I'll teach you how to add colors. But if you can't wait, check out W3Schools.com.

How to create a menu header with post number in Blogger

Sometimes, you may like to see the number of posts per menu in your blog header.  This information is useful if you wish to know what topics you like to write about and what topics you neglect.  This information is also useful for your reader, so that they can see at a glance the range of topics you write about. If they click on one of the menus, then they will see more of your posts in that topic.  This increases your reader's engagement time in your blog.  If your blog is your business, then the more time the reader spends on your blog, the greater chances you'll earn something, e.g. advertising or purchase.

To create a menu header with post number in Blogger, go to your Blog Layout. Click Add Gadget. Chose Labels. To configure your label, choose by frequency in list form and check the show number of posts option. Click Save.  You can always uncheck your choices, so don't worry.



Notice

The author is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for him to earn fees by linking to Amazon.com and affiliated sites.