by Penny Angeles-Tan | Aug 4, 2016 | Book Reviews
This blog post about Harry Potter and the Cursed Child is a review, of sorts. I will try my best to avoid spoilers when I can help it so that those of you who intend to read it can still enjoy it spoiler-free (from me, at least).
When the last movie version of the Harry Potter story, The Deathly Hallows Part 2 hit the theaters there were rumors about another story in the making, presumably the Cursed Child. Some said it was going straight to film, while others said it would be a short story. There have even been rumors of a play and even animated shorts. But the one thing everyone was clear on was that JK Rowling did not intend to write another book that involved her much-loved character, Harry Potter. After all, if I recall correctly, JK Rowling herself said so. 🙂
But the epilogue of The Deathly Hollows left her fans expecting more.
Nineteen years after the Battle at Hogwarts, we see Harry married to Ginny, and Ron to Hermione. We see that all of them have children, including Harry’s school nemesis, Draco Malfoy. We discover that Neville now teaches in Hogwarts. But what brings our tiny hearts a-skipping is this scene …
We get to see Harry’s son! And he was blessed/cursed with:
- having Harry for a father, and
- being named after two of the biggest heroes in the history of the wizarding world: Albus Dumbledore and Severus Snape.
And right then and there we just know that the story has not ended … but in what medium it will appear, we still didn’t know.
The Cursed Child

JK Rowling, author of the Harry Potter series
JK Rowling did not disappoint her fans. She later announced that, yes, there will be another Harry Potter installment … but it will be a stage play. This news was met with mixed emotions.
Those who resided in the UK and those who can afford to go to the UK had no problem (other than how much the tickets would cost). For the rest of the world, though, we mostly felt sadness and regret and resigned ourselves to the fact that it may take years before we would be able to enjoy The Cursed Child ourselves.
And then, sneaky JK, announced in Pottermore that they will be publishing the script of The Cursed Child. Oh, gladness! Yes, I realize she said SCRIPT, not book, but for bookworms like me who grew up reading Shakespearean plays it didn’t really matter. Reading a book for me is like watching a movie in my head. And reading a script actually helps me in blocking my characters in the scenes in my head.
Of course, I realize that JK didn’t write the script herself (it was actually Jack Thorne who wrote it) but JK was part of the process from the beginning. After all, this is her “child” we are talking about. Additionally, the finished product has her stamp of approval and that is good enough for me. 😀
The Cursed Child Unboxed
So on July 31, 2016 (Sunday PHT) Harry Potter fans from all over the world prepared to go to their favorite bookstore for the worldwide unboxing of Harry Potter and the Cursed Child … which opens at the same time as the play itself!
In the Philippines, Scholastic (the U.S. Publisher) partnered with National Bookstore for local distribution. And it was at the Glorietta branch of National Bookstore that Hogwarts Philippines (the official fan club of Harry Potter in the Philippines) invited Potter fans from all over the metro to join in the fun and excitement of being the first to own and read this much-awaited publication.
Fully Booked also came out with their copy of Harry Potter and the Cursed Child but, apparently, they are the distributor of the UK Publisher, Little Brown UK.
My personal opinion …
My sister and I split the cost of the book and bought it and then tried to take turns reading it as we had free time since she worked at night and I worked during the day. My sister actually started reading the book immediately while I was buying a cool beverage. 😀

I do not recommend that you do that, by the way. It is difficult to read a play unless you read it all the way through. It’s like stepping out of the theater for a potty break and then coming back a few minutes later and missing your place.
As I said at the beginning, I will try my best not to post spoilers but I cannot always tell if what I will say is a spoiler or not so if you are unsure then you can stop reading right now. 🙂

Ebony wand pen and bookmark were giveaways at the unboxing event.
It is a script of a stage play. Transitions are fast and it lacks the setup narration of regular books but, as I said … it is a stage play. The script of a stage play usually just gives a brief description of the scene, then focuses on the dialogue of the characters plus some direction on what possible action/emotion the character is supposed to portray. This is so that the directors and the cast have leeway to infuse the story with their own special brand.
For people who are unused to reading plays, this book will be confusing. They will go, “Wait! didn’t he just get on the train as a first-year? How come he is a second-year a page later, and THEN a 3rd-year another page later? Where are all the Hogwarts years?”
Ok, my first advice to this person would be “catch a play sometime”. I don’t mean to be rude. It’s just that understanding it is a play and knowing the mechanics of a play would make them understand the transitions better.
My second piece of advice would be “don’t fixate. It only means the ‘action’ does not happen until later so there is no need to take the slow route.”
Friendship

Scorpius and Albus
Just as with the original Harry Potter books, the main theme of this story is friendship. And in this story, centers on the friendship between Albus Severus Potter (Harry’s second child) and Scorpius Malfoy (Draco’s son).
They create a bond from the very beginning … on the Hogwarts Express as they share a compartment on their way to school. Because of his parentage, Scorpius is shunned by his peers as most are under the impression that his real father was Voldemort. Albus, on the other hand, is burdened by his legacy … of being the son of the famous Harry Potter.

Hermione, Harry, and Ron
It also shows us how the friendship between Harry, Ron, and Hermione has grown over the years as they assume their roles as responsible adults and parents.
Harry and Hermione work at the Ministry of Magic (only to be expected, don’t you think?) and Ron, well, I don’t want to spoil it so let me just say Ron is doing something else.
Father and Son

Harry and Albus
It also tackles the relationship between Harry and Albus. Think of Albus as the rebel — the misunderstood kid that his parents couldn’t understand. Because, in a nutshell, that is what he was. He didn’t fit in at home, he didn’t fit in at Hogwarts.
Where his dad, Harry was Mr. Popularity, Albus’ only friend was Scorpius.
Perhaps it is because they are so alike that made it difficult for them to understand each other. And just like his dad, Albus wanted to do the right thing and right a wrong that happened many years ago even before he was born.
If at first, you don’t succeed, try and try again. And THAT is how the trouble began.
As I continue reading, though, I found myself wondering who was really the cursed child. Initially, of course, I assumed it was Albus, because, the title did say Harry Potter and the Cursed Child, which kind of implies it would be his son. But then knowing Scorpius’ story I couldn’t help but think that is it possible that it is actually him?
I got choked up
Call me sentimental but my heart soared at the cameos of some of my favorite, much-loved, or even drool-worthy characters. I laughed, I cried, and I had to pause to wipe my tears. My heart was squeezed in a giant fist and seeing new heroic moments in my head was just phenomenal! Even if they turned this play into a movie, it just won’t be the same without them.
In conclusion …
I loved it! I had to repeat it from the beginning and then read it straight through to the end for five hours straight. I only took short breaks in between to shift position on the bed and to go to the toilet. Would I read it again? Absolutely! But I will wait until the rest of my family has read it, too. 🙂 We are mostly theater enthusiasts so I am confident they will enjoy it as well.
I do hope the play comes to Manila, too.
How about you? How did you like Harry Potter and the Cursed Child? Share your thoughts below.
- All photos from the play were taken from Rappler.com.
by Penny Angeles-Tan | Jul 31, 2016 | Business

Reader’s Digest’s Trusted Brand Award
MediCard, a leading health maintenance organization (HMO) provider, has been given the Reader’s Digest Trusted Brand 2016 Gold award in the Health Card category. Now on its 18th year, the Reader’s Digest Trusted Brands Awards commends products and services most trusted by Filipinos.
How are the Trusted Brand awardees selected?
Brands were chosen by consumers and were rated on the following attributes:
- trustworthiness and credibility
- quality
- value
- understanding of customer needs
- innovation
- and social responsibility.

Dr. Nicky Montoya
President of Medicard Philippines
“We are honored to receive this prestigious award because it reflects the trust given to us by consumers. MediCard takes pride of its highly competent and well-trained doctors and medical professionals who can help and present solutions for the health and wellness of their patients,” said Dr. Nicky Montoya, president of MediCard Philippines.
What services does Medicard offer?
MediCard offers services such as:
- preventive health care
- hospital confinement
- outpatient care
- emergency care
- members’ financial assistance
- and dental care
It also has numerous freestanding clinics and satellite clinics nationwide, bringing the best and accessible medical care to its members.
To help its patients practice a healthy lifestyle, MediCard also has the MediCard Lifestyle Center, which is designed to offer effective solutions for wellness. According to their website:
A first-of-its kind, The MediCard Lifestyle Center is designed to offer effective solutions for wellness and lifestyle diseases. Housed in a new and modern edifice, the MediCard Lifestyle Center is home to, among others, a state-of-the-art dermatological center, a fitness facility, an eye and colorectal center, dental clinics and a yoga center. The MediCard Lifestyle Center also has a coffee shop that serves organic food to help clients stay on track of their health and fitness goals.
Visit http://mlc.medicardphils.com for more details on the Medicard Lifestyle Center.
With the Reader’s Digest Trusted Brand 2016 Gold award reinforcing MediCard’s accomplishments, MediCard continues its commitment to bringing trustworthy and excellent healthcare services to Filipinos.
by Penny Angeles-Tan | Jul 30, 2016 | Tech Tutorials
In the 90s we designed websites with tables. It was chunky but as web layout tools go it worked. It helped in making sure that all the elements of the website were organized. Today tables are still in use but not as a layout tool for websites. Tables are usually used for organizing tabular data instead … which is what it was created for in the first place.
The trend now, in web design, is to create web layouts with the use of a GRID.
Grid layout
A grid supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. The grid does not have the concept of the row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out content. (original source: Xamarin.com)
Think of a web page as a pie and each slice of a pie is the specific content of your website. It could be an image, a video, or text content. It could be a map or even an ad. Whatever it is, at the end of the day, we assign a size to this element and we also assign a place for it on our page.
How do we create a grid?
There are two ways to create a grid … fixed measurements like pixels (px) and variable measurements like percent (%). Let’s take a look at the table below.
| Col or span | Width (px) | Width (%) | Gutter (px) | Gutter (%) | Offset | Margin-left |
| 1 | 30 | 6.25% | 10 | 1.0416666667% | 1 | 8.3333333% |
| 2 | 140 | 14.5833333333% | 10 | 1.0416666667% | 2 | 16.6666667% |
| 3 | 220 | 22.9166666667% | 10 | 1.0416666667% | 3 | 25% |
| 4 | 300 | 31.25% | 10 | 1.0416666667% | 4 | 33.3333333% |
| 5 | 380 | 39.5833333333% | 10 | 1.0416666667% | 5 | 41.6666667% |
| 6 | 460 | 47.9166666667% | 10 | 1.0416666667% | 6 | 50% |
| 7 | 540 | 56.25% | 10 | 1.0416666667% | 7 | 58.3333333% |
| 8 | 620 | 64.5833333333% | 10 | 1.0416666667% | 8 | 66.6666667% |
| 9 | 700 | 72.9166666667% | 10 | 1.0416666667% | 9 | 75% |
| 10 | 780 | 81.25% | 10 | 1.0416666667% | 10 | 83.3333333% |
| 11 | 860 | 89.5833333333% | 10 | 1.0416666667% | 11 | 91.6666667% |
| 12 | 940 | 97.9166666667% | 10 | 1.0416666667% | 12 | 100% |
The left part illustrates the widths, the middle part, the gutter, and the part on the right the offset or indent.
Don’t let the math scare you! After all, we’ve already done all the computations for you. 🙂 But if you are curious about how we came up with those numbers, here is how each one was computed.
What is the basis for the maximum width? Shouldn’t it just be 100%?
It starts off with the premise that we are designing for a standard resolution of 1024×768 and that we will not be utilizing the entire screen. Therefore, 100% of the container will be 960.
Why 960?
It is the biggest number closest to 1024 which is divisible by 12.
Why is the gutter 10px (or 1.0416666667% in percent)?
In my opinion, the reason is that 10px has been an industry standard for minimum measurement since the beginning, whether it is font size or margins, or padding. Another reason though had to do with the equal distribution of elements. 🙂
Why are there 2 kinds of measurements – in pixels and percent?
Widths defined in pixels (px) are what we call fixed widths. This means that no matter what size screen (or device) is used the size will remain constant. Therefore, there may be times when an element would be too big or too small for the screen.
Widths defined in percent (%) are called variable widths. This means that the width of the element will adjust to the size of the screen or device when viewed.
How wide can an element be?
Visualize your webpage in your head. Now let’s focus on just one straight horizontal line. Now divide that line into 12 parts but put some space in between each part. Do you see it yet?

12 columns in a row
In the picture above take note of the blue border. That is what we refer to as the GUTTER. It is the designated space separating each element of your website that you will use. In the table above the gutter is equivalent to 10px (1.0416666667%).
Let’s do some math
How did we come up with those numbers? Here’s how it was computed

the grid layout
| col1 (or span1) | (960/12)=80-20 (this is the gutter on the left and right side)=60; | therefore, (60/960)x100=6.25% |
| col2 (or span2) | col1 (or span1)x2=160-20=140; | therefore, (140/960)x100=14.5833333333% |
| col3 (or span3) | col1 (or span1)x3=240-20=220; | therefore, (220/960)x100=22.9166666667% |
| col4 (or span4) | col1 (or span1)x4=320-20=300; | therefore, (300/960)x100=31.25% |
| col5 (or span5) | col1 (or span1)x5=400-20=380; | therefore, (380/960)x100=39.5833333333% |
| col6 (or span6) | col1 (or span1)x6=480-20=460; | therefore, (460/960)x100=47.9166666667% |
| col7 (or span7) | col1 (or span1)x7=560-20=540; | therefore, (540/960)x100=56.25% |
| col8 (or span8) | col1 (or span1)x8=640-20=620; | therefore, (620/960)x100=64.5833333333% |
| col9 (or span9) | col1 (or span1)x9=720-20=700; | therefore, (700/960)x100=72.9166666667% |
| col10 (or span10) | col1 (or span1)x10=800-20=780; | therefore, (780/960)x100=81.25% |
| col11 (or span11) | col1 (or span1)x11=880-20=860; | therefore, (860/960)x100=89.5833333333% |
| col12 (or span12) | 960-20=940; | therefore, (940/960)x100=97.9166666667% |
The same principle applies to the gutter … (10/960)x100=1.0416666667%
Oh, headache! So much math!
Keep calm. We already did the math for you, all you need to do is apply the widths to your elements as classes. 🙂 Since these measurements are most likely to be used over and over, we will use them as classes in our CSS and will be written down like this:
[pastacode lang=”css” manual=”%2F*%20GRID%20LAYOUT%20*%2F%0A.col1%2C%20.col2%2C%20.col3%2C%20.col4%2C%20.col5%2C%20.col6%2C%20.col7%2C%20.col8%2C%20.col9%2C%20.col10%2C%20.col11%2C%20.col12%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%7D%0A.col1%20%7B%0A%20%20%09width%3A%206.25%25%3B%0A%7D%0A.col2%20%7B%0A%20%20%09width%3A%2014.5833333333%25%3B%0A%7D%0A.col3%20%7B%0A%20%20%09width%3A%2022.9166666667%25%3B%0A%7D%0A.col4%20%7B%0A%20%20%09width%3A%2031.25%25%3B%0A%7D%0A.col5%20%7B%0A%20%20%09width%3A%2039.5833333333%25%3B%0A%7D%0A.col6%20%7B%0A%20%20%09width%3A%2047.9166666667%25%3B%0A%7D%0A.col7%20%7B%0A%20%20%09width%3A%2056.25%25%3B%0A%7D%0A.col8%20%7B%0A%20%20%09width%3A%2064.5833333333%25%3B%0A%7D%0A.col9%20%7B%0A%20%20%09width%3A%2072.9166666667%25%3B%0A%7D%0A.col10%20%7B%0A%20%20%09width%3A%2081.25%25%3B%0A%7D%0A.col11%20%7B%0A%20%20%09width%3A%2089.5833333333%25%3B%0A%7D%0A.col12%20%7B%0A%20%20%09width%3A%2097.9166666667%25%3B%0A%7D%0A” message=”fluid-css” highlight=”” provider=”manual”/]
In the code above I applied float: left on all the classes since float: left is usually applied to elements using this selector anyway. You can always delete it from your code or use float: none selectively.
How do we use it?
Just keep in mind one thing … the total width of 1 line (in parts). Therefore, you can keep adding div classes of different sizes (widths) until you reach 12 without going over. If you do, the last element will go to the next line. For example:

Given the sample above your HTML will look something like this:
[pastacode lang=”markup” manual=”%3Chead%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col1%22%3ESPAN1%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col2%22%3ESPAN2%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col3%22%3ESPAN3%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col4%22%3ESPAN4%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col5%22%3ESPAN5%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col6%22%3ESPAN6%3E%3C%2Fdiv%3E%0A%3C%2Fbody%3E” message=”” highlight=”” provider=”manual”/]
Since 1, 2, 3, and 4 are short of making up 12, they were able to stand side by side. But with the addition of 5, it already exceeded 12, therefore, the div went to the next line.
Offset layout
Many get confused by this. What is offset in web design? Simply put, let’s call it an INDENT. According to the Oxford Dictionary indent means to … “Start (a line of text) or position (a block of text, table, etc.) further from the margin than the main part of the text.”
In other words, it is like saying you push an element in from the left side to a position you designate.
So how far can we push it? Just like in the grid layout, we can also divide this into 12 equal parts. This time, though, there is no gutter to think about and the only thing we need to think about it is the value in percent, not in pixels.

Time for some math again, just to show you how it was computed.
- offset1: (1/12)*100=8.3333333%
- offset2: (2/12)*100=16.6666667%
- offset3: (3/12)*100=25%
- offset4: (4/12)*100=33.3333333%
- offset5: (5/12)*100=41.6666667%
- offset6: (6/12)*100=50%
- offset7: (7/12)*100=58.3333333%
- offset8: (8/12)*100=66.6666667%
- offset9: (9/12)*100=75%
- offset10: (10/12)*100=83.3333333%
- offset11: (11/12)*100=91.6666667%
- offset12: (12/12)*100=100%
In plain English it means … if you want to indent an element by 8.33% then apply offset1, if you want to indent an element by 16.67% you apply offset2, if you want to indent an element by 25% then apply offset3, etc.
Simple, right?
As for the CSS, it will look like this:
[pastacode lang=”css” manual=”.offset1%20%7B%0A%09margin-left%3A%208.3333333%25%3B%0A%7D%0A.offset2%20%7B%0A%09margin-left%3A%2016.6666667%25%3B%0A%7D%0A.offset3%20%7B%0A%09margin-left%3A%2025%25%3B%0A%7D%0A.offset4%20%7B%0A%09margin-left%3A%2033.3333333%25%3B%0A%7D%0A.offset5%20%7B%0A%09margin-left%3A%2041.6666667%25%3B%0A%7D%0A.offset6%20%7B%0A%09margin-left%3A%2050%25%3B%0A%7D%0A.offset7%20%7B%0A%09margin-left%3A%2058.3333333%25%3B%0A%7D%0A.offset8%20%7B%0A%09margin-left%3A%2066.6666667%25%3B%0A%7D%0A.offset9%20%7B%0A%09margin-left%3A%2075%25%3B%0A%7D%0A.offset10%20%7B%0A%09margin-left%3A%2083.3333333%25%3B%0A%7D%0A.offset11%20%7B%0A%09margin-left%3A%2091.6666667%25%3B%0A%7D%0A.offset12%20%7B%0A%09margin-left%3A%20100%25%3B%0A%7D” message=”offset” highlight=”” provider=”manual”/]
Just as with the grid layout we designated these as classes because the premise is, we will most likely be using them several times on a page.
Is it possible to use the grid layout and the offset at the same time?
Absolutely! It all depends on your design needs. In the meantime, have fun experimenting with your web layout while using these. 🙂
by Penny Angeles-Tan | Jul 29, 2016 | Food & Beverage

Taco Bell’s Chalupa
Taco Bell, the world’s leading taco food chain, invites you to #tastethehype as it innovates the classic taco with Chalupa Supreme.
The Chalupa Supreme features a deep-fried crispy and chewy flatbread filled with seasoned beef, sour cream, shredded lettuce, diced tomatoes and a three-cheese blend. The result: a delightful mixture of textures and flavors that is distinctly Taco Bell. Transforming the everyday taco into an experience you won’t find anywhere else.
Chalupa ala carte or in a meal?
Already satisfying on its own, the Chalupa Supreme is available for P99 when ordered a la carte. Pair it with nachos and your favorite soda for a full meal for only P149.

You may be asking … what makes the chalupa so different from a taco then? It certainly looks the same.
For starters it is bigger than the average taco and certainly more filling. Second, the “shell” is made of bread, not a taco shell, making it a heavier meal. Think back to the last new offering of Taco Bell, the Gordita Supreme. It’s the same flatbread but this time it is fried and shaped into a taco shell.

Tastewise I would say it tastes just like the Gordita. The only real difference is that the bread is fried. I have friends who have tried both the chalupa and the gordita and they have said that they prefer the chalupa. Personally, I would rather have the gordita because I find it easier to eat. I’ve got a quirk, I don’t like messy eating and, trust me, the chalupa is MESSY.
But then, some would argue that there is no neat way to eat a taco anyway and, what is a chalupa but a taco on steroids, right? 😀
So go ahead and #tastethehype today as Taco Bell’s Chalupa Supreme is available for a limited time only.
Learn more about Taco Bell’s latest offering, the Chalupa Supreme, and try other delectable treats that you’re sure to love only at Taco Bell! Visit the official website at www.tacobell.com.ph, or check out their official Facebook page at www.facebook.com/tacobellPHL, the lnstagram account @TacoBellPHL, and the hash tag #TacoBellPHL across Facebook and lnstagram.
About Taco Bell
Taco Bell, a subsidiary of Yum! Brands, Inc. (NYSE: YUM), founded over 50 years ago was known for its fun exploration as it ventured a different path in the fast food industry by introducing Crunchy Taco to the United States of America.
Today Taco Bell has over 6,500 restaurants world-wide. Millions of customers come to Taco Bell every week for that unique experience no other restaurant can offer. An experience brought to life through Taco Bell’s menu innovation and the smiles of those who create, serve and eat Taco Bell’s delicious food.
In the Philippines, Taco Bell began in 2004. Since then the brand has continued to explore the possibilities with its customers. Taco Bell Philippines brought the first Live Mas concept store to Asia with its flagship branch at Gateway Mall, a true testament of the brand’s commitment to give their customers more – in terms of value, quality and dining experience.
Currently Taco Bell is located at Gateway Mall, TriNoma and Alabang Town Center. For more information, visit their website at www.tacobell.com.ph. Follow Taco Bell on Facebook (www.facebook.com/ tacobellPHL) and lnstagram (@tacobellphl).
by Penny Angeles-Tan | Jul 24, 2016 | Tech Tutorials
One of the advantages of using Adobe Dreamweaver is its template creation. While it is true that web templates could be made from scratch on notepad (on Windows), textedit (on Mac), notepad++, sublime text (which happens to be my favorite open source code editor. :D) etc. it does not offer the same ease of use that Dreamweaver does.
How are they different?

- On other applications you create the code for the web template on one page then you copy and paste the code on all the pages you want the code to appear, in effect creating clones.
- In Dreamweaver you create a web template file and then apply the template to all the pages you want the code to appear.
- When you need to make any changes to a code that needs to appear in all pages you need to make the change on all the documents you want the code to appear in.
- In Dreamweaver you make the change on the template file (*.dwt) and once you save the file it will ask you if you want to update all affected pages. You simply say YES or OK and the change is applied to all the affected pages.
But this can only happen if you edit the web template in Dreamweaver. While the dwt file is editable outside of dreamweaver any changes you make then will not affect the connected files because, well, they were not connected when you made the update.
How to create a web template on Adobe Dreamweaver CC
To be quite honest, creating a web template on Dreamweaver is simplicity itself. In my experience, the main reason why people mess it up is because:
- they don’t pay attention and just click, click, click.
- they’re in a hurry to get to the code, they forget about setting up the template first.
Truly, there is no need to rush because creating the template is actually a very fast process in itself. Let’s go through it now.
- Set up your website first. This is a VERY IMPORTANT STEP. Not setting up your site first means compromising the integrity of your links. Once you have done so your screen will look like this. Note how the files tab now displays your website (web) in the dropdown and the local files also displays site – web. Note: On your file explorer/finder you will locate this in the my documents/documents folder

Go to File > New. This will open the New Document window. Again, allow me to reiterate that while my screencaps are those of a MacOS and the interface looks slightly different, I promise you the functions are basically the same.
- Here is where there might be some difference in appearance between Mac and Windows.
- On a MacOS it is as simple as making sure you are at NEW DOCUMENT then selecting HTML template then clicking CREATE.

- On Windows there are more choices on the left, which could get confusing. Nevertheless, just make sure to select HTML template, also, then click on CREATE.
- Note that in both cases you chose an HTML TEMPLATE. That is completely different from a regular HTML file. And you will see why and how in the succeeding screens.
- Once you’ve clicked on CREATE Dreamweaver will now look something like this. If the window looks different, like it is a different color, for example, not to worry. You can change the appearance in preferences.

- The next step will be to define the basic layout elements of your site in the body tag. We don’t need to put any content in, just define the elements – header, logo, nav, container, and footer.

Next we put in the editable region. This is what makes the HTML template a template. Make sure your cursor (that blinking thing that happens on the screen when you point your mouse to a specific spot) is located between the open and close div of the container. Then go to your menu bar and go to INSERT > TEMPLATES > EDITABLE REGION.

- In the next dialogue box replace EDITREGION3 with the word content.

- When you look at your code now it will look like this. Hey, look! You now have an editable region! 😀

- Now press CTRL+S (on Windows) or COMMAND+S (on a MacOS) to save. This will open the SAVE AS TEMPLATE window. Change UNTITLED to the name of the template you want. For this exercise I will call mine template (all lowercase, please) then click on SAVE or simply press ENTER or RETURN.

- In the Files tab you will notice that Dreamweaver created a Templates folder (yes, with a capital T … DO NOT RENAME IT!) and inside it is the file you just saved.

To all intents and purposes your template is complete! You just need to attach your CSS and customize it. 🙂
by Penny Angeles-Tan | Jul 23, 2016 | Tech Tutorials

Setting up a website before actually starting one is a step that many people not familiar with Adobe Dreamweaver forget to do. This is also called site management.
Because I am using a Mac the screenshots I will be showing you hear are all for a Mac but, trust me, there is very little difference between the interface for Windows or Mac OS. When you open Dreamweaver for the first time it will look something like this.

If you haven’t set up your site yet then you need to set it up now. Note the Manage Sites link at the right side of the dropdown in the Files tab. This will only appear if the dropdown is in Computer or Desktop.
If you don’t see it there, no to worry, you can also click on the link found within the dropdown. Let’s click it now. This will open the Manage Sites window.

Click on NEW SITE. This will open the SITE SETUP window.


In this window you will be required to enter your sitename and the local site folder (where you will save your website on your computer).
For the purpose of this exercise let us call your site web and set your local site folder to match your sitename. By default Dreamweaver will try to save your website in your Documents folder. You should allow it to save there. At this point, you can just click on SAVE. This will bring you back to the manage sites window and will display the site you just set up. Technically your site is already ready to be used.

choose your site
But let’s go back and double click on web. This will open the site setup window again.
Setting up FTP via Adobe Dreamweaver CC
In the site setup window go to the servers tab. Click on the + sign to add a new server. This will open the BASIC SERVER SETTINGS.

How do you know what settings to put in? Check the email that your web host sent you.
- SERVER NAME – this is usually the name of your site
- FTP address – for most servers it is ftp.yourdomain.com (meaning ftp followed by your domain name) but you still need to check the email your web host sent you. Zoom.ph, for example, has a different FTP address
- USERNAME – again, check the email your web host sent. It will be there and usually labeled cpanel/FTP username
- PASSWORD – same as with the username
- ROOT DIRECTORY – for most it will be public_html. For some it will be just /. Just as I mentioned above, please check the email your web host sent.
- WEB URL – you can just ignore this, it doesn’t really matter.
To check if you put in the right settings click on TEST. If successful you will see this window. Only thing left is just to click on SAVE.
On the SERVER window you will now see your server. Click on SAVE again.

This will bring us back to the Manage Sites window and the cache for your site will be created.

Make sure the name of your site is highlighted in the list and just click on DONE. We’re now ready to start on the website itself using Adobe Dreamweaver CC.
by Penny Angeles-Tan | Jul 22, 2016 | Stories
Complete Set Reproductions Offer Fans Tour of Star Trek: The Original Series Sets in Ticonderoga, New York

James Cawley
TICONDEROGA, NY, July 14, 2016 – Star Trek super-fan James Cawley is honoring the 50th anniversary of the iconic franchise with the opening of his meticulously designed Star Trek: The Original Series set tour.
Located in historic Ticonderoga, New York and under license by CBS Consumer Products, the set tour brings memories to life by allowing fans to boldly go and tour the sets of the legendary Starship Enterprise.
Recreated exactly as they were laid out on the “Desilu” (now Paramount Pictures) Stage 9 in Hollywood for the original run of Star Trek, guests will be able to step onto the soundstage and be transported directly back to 1966. Starting this July, visitors can receive guided tours, photo opportunities and an immersive experience into the world of the classic television series.

Star Trek’s NCC 1701 USS Starship Enterprise’s Bridge
A true franchise fan, Cawley began creating the sets in 1997 after receiving a copy of the original set blueprints from Star Trek: The Original Series TOS costume designer William Ware Theiss. From there he spent 15 years researching, crafting, and refining his set replicas alongside other dedicated fans and craftspeople.
Cawley was joined on the project by Star Trek alumni and fellow fans including prop fabricator Ed Miarecki and concept designer and SFX supervisor Daren R. Dochterman. Studying stills and frame captures from the series and sourcing vintage materials and antiques, Cawley ensured even the smallest details were accurately and lovingly reproduced including an array of props and set decorations. The result is a stunning achievement offering the most complete and accurate reproduction of the original standing sets from Star Trek: The Original Series.
“To me there is no other franchise around that is more enjoyable and more socially relevant than Star Trek,” said James Cawley. “I’m very thankful for all the support I’ve received on this project and can’t wait to begin welcoming my fellow fans this summer.”

About CBS Consumer Products:
CBS Consumer Products manages worldwide licensing and merchandising for a diverse slate of television brands and series from CBS, CBS Television Studios and CBS Television Distribution, as well as from the company’s extensive library of titles, Showtime and CBS Films. Additionally, the group oversees online sales of programming merchandise. For more information, visit www.cbsconsumerproducts.com.
by Penny Angeles-Tan | Jul 20, 2016 | Entertainment
Watch thousands of TV shows, movies and more wherever, whenever! As part of its #LovetoClick promotion, Citi is teaming up with iflix to offer their cardholders unlimited access for three whole months on Southeast Asia’s leading Internet TV service.
Now you can invite your family or friends for an exciting entertainment marathon with a vast selection of first-run exclusives, award-winning movies and shows, plus the best in local and regional programs on iflix. You can also catch up on your favorite TV shows, cartoons, comedies, or dramas on the go with iflix’s “download/watch offline” feature, or stream from your laptop, tablet, or mobile phone.

Watch your favorite movies and TV shows at www.iflix.com.
To access this very special promotion, first-time users need to create an account through www.iflix.com to receive three-months of unlimited access along with a one-month free trial, courtesy of Citi.
For Citi cardholders, who are already registered, login through your Facebook or email account for your three additional months of iflix, courtesy of Citi.
How do you avail of unlimited access?
Redeeming vouchers is just as easy!
- Upon login, click “menu” and then “redeem voucher.”
- Input the voucher code “CITI” plus the first six digits of your Citi card (ex. “CITI 123456”).
- Click “submit” to start your three-month unlimited iflix access.
- Upon entering the code, users will then be directed to the homepage.
- To confirm the successful redemption of the voucher, go back to “Menu” and check under “My Account.
This latest perk from Citi will allow cardholders to enjoy iflix’s world-class service, including access to one of the largest TV and movie libraries in the region.
This promotion is valid only until August 7, 2016, so hurry and take advantage.
For more information on this promotion, and to know more about other online privileges exclusive to Citi cardholders, log on to www.citibank.com.ph/lovetoclick or call the 24-hour CitiPhone at 995-9999.
by Penny Angeles-Tan | Jul 17, 2016 | Stories
Weddings never fail to bring people together, it is a time to celebrate love and reconnect with family and friends. It is also a time to reflect on what it really means to be an adult.

This week on Single/Single, our favourite weekend barkada will once again come together for another celebration. This time, to organize a despedida de soltera for Tita Bianca and a stag party for her beloved soon-to-be-husband Dwight. The riot starts even before the parties start as they go into a frenzy planning for the two events. The laughter is even turned up a notch as Mama Yo, played by Bernardo Bernardo, returns to help in the preparations.
With love and wedding bells in the air, will Joey Boy and Joee Girl get inspired to give love another try, or will this affirm that they made the right decision in going separate ways? And how will Ranee, fresh from her heartbreak, handle herself amid the romantic celebrations?
Join the barkada in another hilarious episode as they learn #HowToAdult and get a lesson on the importance loyalty and commitment on PhilStarTV and Cinema One’s breakthrough series Single/Single season 2.
Single/Single airs every Sunday, 10PM on Cinema One with replays on Wednesdays, 8:30pm and Saturdays, 9pm. Past episodes can also be viewed on philstartv.com. For more updates, visit facebook.com/SingleSingleC1 and follow @SingleSingleC1 on Twitter and Instagram.
by Penny Angeles-Tan | Jul 10, 2016 | Business
Citi has been named the leading Consumer Bank in Asia by AsianInvestor Magazine for its wealth management business. The award was selected by the editorial team of the magazine and was based on the bank’s superior wealth management platform in Asia Pacific.
In the editorial write up accompanying the award, the magazine said: “Citi’s wealth management business in Asia rode out powerful headwinds to enjoy strong performance, partly as a result of its enhanced portfolio management tools, digitalization and client engagements.”
During the last 12 months, Citi continued to enhance its client engagement tools, such as rolling out the Portfolio 360 offering to new markets and launching the new Citigold Diversification Index (CDI). Portfolio 360provides comprehensive investment analytics reports under various stress test scenarios and the CDI assesses client’s portfolio diversification across asset classes. Both have helped further support clients of the bank in the region to assess their portfolios and navigate sometimes challenging markets.
The bank’s client assets under management are now over US$210bn across the 12 markets in Asia where the bank offers consumer banking services.
Product-wise, Citi expanded its open-architecture fund offering to include liquid alternatives, and continued to onboard new funds to offer non-correlated products. It also moved to further enhance the wealth management knowledge of its relationship managers partnering with the prestigious Wharton Business School of the US on a three-year executive education program.

Paul Hodes Managing Director, Head, Wealth Management, Consumer Bank, Asia Pacific Citibank
“A key competitive advantage for Citi is being able to deliver expertise in wealth management by raising the level of advisory through new tools and an expanded product offer via our open architecture platform delivered by a highly skilled team of relationship managers, portfolio counselors and product specialists. It is a real honor to receive the AsianInvestor Consumer Bank award for the fourth-consecutive year as recognition for our team in Asia,” said Paul Hodes, Head of Consumer Banking Wealth Management for Asia Pacific.
In the Philippines, Citi pioneered wealth management in the early 1990s and continues to enjoy a strong market lead with its wide range of products, customized advice and groundbreaking digital platform. Most recently, it launched Citi Model Portfolio, a diversification and asset allocation guide designed to aid clients to make informed investment choices.

Bea Tan
Citibank Philippines
“Coming after the introduction of the online Insurance Gap calculator, which allows our clients to find out in minutes if they’ve done enough to protect themselves and their families financially, the Citi Model Portfolio once again empowers our customers to make decisions to grow their wealth and secure their future. All these showcase our commitment to our clients, and that we value their choice of Citi as their financial partner,” said Bea Tan, Head of Consumer Banking for Citi Philippines.
You must be logged in to post a comment.