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.
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.
You must be logged in to post a comment.