Anyway, gathering 40 something designers still isn’t an easy task and is a huge deal to us! We’re glad that it may not be phenomenal but is a first step to gathering the country’s designers who are willing to see the faces behind the websites and usernames.

Expectations

For a first event, I have to say that the mini conference did exceed what we have expected. It may not be heartwarming but nevertheless, people are willing to stop and take a look at what we’re trying to do and they’re excited about it too! We really appreciate it and we hope that the turnout for next time (yes, a next time! Imagine that.) would be even better.

And I hope that next time, we would be all be friendly enough to talk to one another instead of us all waiting to be approached.

Thank you!

I couldn’t say anything more coherent than thank you to all who made time to attend the event and I hope that it was worth your while because it certainly was on our part. It wasn’t perfect but at least, it’s a start, nothing will happen if we do not make the first step.

And of course, this wouldn’t have been possible if not for the supportive companies who sponsored us with food (and venue!):

• G2VC
• SyndeoLabs
• DotPH
• Pinoy Web Startup

Stolen from Ia

To the mastermind (Ia): Great job! I couldn’t have been prouder of you (I think I just sounded like your mom)

To those who helped (Marie, JP, Regnard, Helga, Sarah and Aja): Thank you for being there and for helping out, it really meant a lot and hope that you’d still be there for the other future endeavors.

Speakers

Of course, the event wouldn’t have been complete if the speakers weren’t there. The speakers’ talks were varied and hopefully, sparked a lot of interest to the other designers.

• Philippine Laws Supporting Web Accessibility by Jojo Esposa
• Phi: golden ratio on the web by Rico Sta. Cruz
• Resolving Resolutions by Regnard Raquedan
• Alternatives to HTML deprecated features by Aja Lapus
• Interaction design by Rey Mendoza
• Building Successful User Interfaces by Marco Palinar

Will update this list as the presentations are uploaded. Download all the files here. Watch the recorded stream here.

From Ia

Photos

I took lots of photos during the event but unfortunately, most of them are blurry and the following are the only ones that look decent.

• There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it).

  Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

  And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

• There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

  All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

• List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:

  
  { overflow:hidden; list-item-position:inside; }
  

  The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

• Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

  Here’s what I usually do:

  HTMML

  
  <div class="parent_element">
    <div class="autocomplete">
      <ul>
        <li>Value here</li>
      </ul>
    </div>
  </div>
  

  CSS

  
  .parent_element { position:relative; z-index:99; overflow:visible; }
  

  What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.

I told you I’m bad with names and giving titles.

There’s Philippine Blog Awards and iBlog (bloggers), BarCamp and WordCamp (programmers, fine, WordCamp’s for bloggers too), SEMCON (SEO/SEM) and Graphika Manila.

Why, pray do tell, don’t we have an event for web designers? That’s the question from a fellow blogger, designer, and standardista, Ia, a call which was, surprisingly, answered by lots of interested and enthusiastic web designers. Apparently, it’s been in the minds of other people but no one’s making it happen.

We’re a bunch of newbies when it comes to event planning but after the initial meeting last Friday Thursday with Ia, Regnard, Joni, Sarah, Marco, Jolo, Rico and Kin, I’m very positive that we will see this through.

If you want to help in any way, you can contact any of us. We will need sponsors, a name for the event (yeah, yeah) and we’re also thinking of turning ourselves into an official organization, if you have any idea how we can do that please do let us know.

One update later and I’m testing the thing locally (yay!) and so far, I say that I like it.

Documentation

I think they’re planning to integrate the codex to a WP install, am I right? Either that or they’re too lazy to type in the correct link, I’d like to believe that it’s the former just because that would be nice. That way I don’t have to keep on trying to remember the URI of WordPress codex, so lame, believe me, I know. And don’t forget a search box!

Help integrated in a WP Install?

Now it’s cute and all but I see a potential problem to it and that is — tons of files to download/upload. It seems that the 5 minute install is no longer true, it will if you don’t include the time you need to download then upload the entire thing (I’m not a big fantastico fan, sorry). But then again, maybe they are going to create a way to connect the install to the codex database? Or whatever is more appropriate name for it.

Dashboard

Dashboard

Content

Media Library

I love that you don’t have to go to the Write Post page just to upload a photo, ’cause you know, sometimes you just want to upload a photo because you’re too lazy to open your FTP program. I really like the new media library (which was, no offense, kinda worthless before).

Media Library Panel

I wonder if an upload video feature is so far-fetched. Or is it even unthinkable because the file size is so huge and why would you want to host your own videos anyway when there’s youtube, revver, vimeo and likes now?

I thought of creating this post when I was on my way home from the recently concluded WordCamp Philippines. There was a woman who was in Karla Redor’s talk who asked on how she can host the video in her own blog and use WordPress to file it for her. She can use a plugin that will let her upload the videos in her blog or do it the “harder” way. Something that I’m very fond of doing.

Seriously, I’m the type of person who would only resort to using plugins if:

1. I’m lazy at the time to think of another way without using a plugin
2. My head is aching and I’m getting frustrated because it just won’t follow what I’m telling it.

The reason is because I am not a developer and it’s really hard to be dependent on a plugin specially if that plugin is what’s keeping your blog alive. Also, if the developer of the plugin suddenly stops supporting the plugin and no one else is willing to take it up from there. What’s worse is if it’s not compatible with the newer version of WordPress. Then I will be lost.

So anyway, on to the “how”.

1. Convert you video to a .swf file, you can use Hey!Watch, it has a fee though but considering how it will make your life easier, I think it’s worth it. Besides it will convert a video for $0.10 so I don’t think that’s too much.
2. Next in your code (you’d want to add this in your single.php page), call for the video custom field (which you’ll be adding later on). Note that this should be within the loop. Also, note that the snippet is taken from a WordPress support forum and changed to suit the topic.

   
   <?php $video = get_post_meta($post->ID, 'video', true); ?>
   <?php if (!empty($video)) {;?>
   <object type="application/x-shockwave-flash" data="<?php echo $video; ?>" width="400" height="300">
   <param name="movie" value="<?php echo $video; ?>" />
   </object>
   <?php }; ?>
   

   What does this mean? The first line sets the $video variable to the value of the video key (of the custom field). Next it checks if the video has a value attached to it (in that particular post). If it does, it inserts the value in the data and value properties of object and param. If the video doesn’t have any values then it won’t display anything.

   This way, it saves you the time to copy and paste the entire code for the video. Now if you want the lazier way, you will have to adhere to some restrictions. For example, you can set the value of data and value to:

   <?php bloginfo(’URL’) ?>/videos/<?php echo $video; ?>

   This means that you will only be able to upload videos within the videos folder within your root. That way, you’ll only put the filename of the video in the custom field value.

3. Once you’ve uploaded your video to your server (within the specified folder of course), go to the admin panel of your blog and then create a post (or a page) in your custom fields area, do what’s illustrated in the image below:

   

   As you can see, I decided that I want to have another folder within my videos folder. My videos will be categorized according to shows, so the value of my video key is unang_hirit/episode_100.swf. Once published, the post’s HTML will appear like this:

   
   <object type="application/x-shockwave-flash" data="http://domain.com/videos/unang_hirit/episode_100.swf" width="400" height="300">
     <param name="movie" value="http://domain.com/videos/unang_hirit/episode_100.swf" />
   </object>
   

Featured Video

If for some reason, you want to create a section that is called the “Featured Video” section on your sidebar, you can call it by using the following lines of code:

<?php query_posts('category_name=Featured Videos&showposts=1'); ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php $video = get_post_meta($post->ID, 'video', true); ?>
    <?php if (!empty($video)) {;?>
    <object type="application/x-shockwave-flash" data="<?php echo $video; ?>" width="400" height="300">
    <param name="movie" value="<?php echo $video; ?>" />
    </object>
    <?php }; ?>
  <?php endwhile(); ?>

If you’d notice, we recycled the code from above. The only difference is the query_posts tag before the loop. What the query_posts tag does is that it takes a single, recently added post (showposts=1) from a category called “Featured Videos”. And it’s the same business as what was discussed above.

Further reading:

• WordPress Codex: Using Custom Fields
• A List Apart: Embedding Flash While Supporting Standards
• WordPress Codex: Template Tags: query_posts

The first ever WordCamp in Southeast Asia was a blast (WordCamp Philippines) and I was there.

It was so fun and for the nth time, I’m happy that Maja (my host for my other blog) requires that all of her hostees use WordPress and that I’m so easy to bully so I used it and learned the ins and outs of creating themes for it.

I was a little late for the event because, as always, I got lost and forgot some important stuff (I did remember to bring my camera, but the battery’s not charged, so yeah, I just love putting unusable stuff in my bag). Upon entering the auditorium of College of Saint Benilde, I already spotted Joni and Ganns with Normi. I unattached myself from the group to have a small talk with Marc about some work-related things.

After a couple of minutes waiting, the program started with the usual welcome speeches and it was time for the talks! Here’s the breakdown:

• Gail’s presentation is about WordPress themes and CSS. Aside from some problems with the projector (not sharp enough), everything was OK. I still don’t know why we need to keep the wp_header and wp_footer tags aside from some plugins require it. I wanted to ask but I’m shy. As always.
• Markku’s talk about WordPress plugins. He made it look so easy that when I searched for the list of WordPress hooks, I got dizzy either from hunger or because the list is extensive. But I’d still want to try it out sometime. Probably this weekend. If I feel courageous enough.
• Karla Redor talked about using WordPress as a CMS or CME. While she’s talking, I suddenly remembered that theme I did for syndeo’s search team when I was still new, which coincidentally, Hans discussed in his talk too.

  There was this girl from GMA who asked on how they can use WordPress to create a video gallery which sparked a colorful discussion about being on the 21st century and opening up. On my way home, I remembered that they can always upload a .swf file in a specified folder and create a key in the custom field that will pull the URI of the .swf file. I’ll be giving an example in another post.

• And next is the main event of WordCamp, the talk of Matt Mullenweg. Some statistics and a sneak peek of WordPress 2.7 which is amazing! I can’t wait for it to come out. And that reminds me, I’ll be updating my svn copy of WordPress
• Regnard Raquedan talked about the importance of Web Standards and Accessibility and how we, as bloggers, can help push the word out. (There is a Philippine Web Standards and a Philippine Web Accessibility group by the way, just in case you’re interested.) And I got mentioned in the end. I literally blushed. Thanks I hardly think people will be able to learn anything here though.

Sorry if I missed your talk, my memory’s that bad.

The highlight of the entire event is this, of course (I’m a fangirl, so sue me):

But of course, this event won’t be complete as well if I haven’t met anyone new (or saw the people I interact with online) so hi to: Marc, Mike (I don’t know his URI), Ia, Sarah, Helga, Ade, Peter, Sexynomad (I saw you at Mag:Net :)), Aja and Maria Jose or meet and greet with my old blogger friends who I haven’t seen in months: Tina, LA and Shari.

Tina, Joni, Sarah and I went to the after-party but did not stay long because it started kinda late. Joni was able to have Matt sign her WordPress for Dummies book and we did caught a last glimpse of him so it’s fine.

All in all, the event is a success and kudos to the organizers! More power and looking forward to WordCamp 2009 (there will be a 2nd WordCamp Philippines, right?)

We all know that the min-height property doesn’t work in IE 6. Instead, the height property acts as both the element’s height and min-height. Its role will ultimately rely on the value of your overflow property.

If the overflow property is set to hidden then the height of the element is its max-height. If set on visible, however, then it will be its min-height.

Overflow: Visible

The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for overflow-y (vertically) or overflow-x (horizontally) (your CSS document won’t validate for CSS 2.1 though, but it’s valid once tested against CSS 3).

So your CSS (for IE 6) will look something like this:

div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }

The Complexities that hasLayout Brings

There are some instances when you have to define the height and overflow properties of an element (usually applicable to lists) to meet the demands of the hasLayout curse in IE. In these instances, you will have to add a bogus height and overflow:hidden thinking that it will not bring harm to your design.

That is until you wanted to add a min-height to the parent div.

If your bogus height is set to 1%, you element will collapse. Setting the height to auto will render your layout worse than before because that means that your element “will not have a layout” (IE, your hasLayout is nonexistent in IE).

Setting the height to 100%, however, will then expand your element to the height of its parent div (or element).

You can solve this dilemma by changing your overflow value from hidden to visible and setting the height of your element (usually, list items) to 1% just to retain the bogus height.

There will be 2 simultaneous tracks, Deployment and Development (this sucks! I want to be a part of the 2 tracks and that’s impossible now ) and the following are the topics that they are considering:

• Blogging 102 - Basics & Beyond
• Other Ways to Use WordPress
• Video and Mobile Blogging
• Cascading Style Sheets
• Blog Monetization
• Migrating to WordPress
• Organizing / Optimizing Your WordPress Blog
• Advanced WordPress Management
• Developing WP Plugins / Best Practices in PHP Coding
• Designing WP Themes
• WordPress & SEO
• WordPress E-commerce Site
• Configuring & Deploying WordPress MU
• Developing WP Aggregator Sites
• WordPress Security / Anti-Hacking Techniques
• WP Development Ethics
• Microformats

And on to the sponsors:

• i.PH: the Domain for Individuals
• Free Online Flash Games
• Wazzup Manila Philippines
• Real Estate CRM
• Real Estate Website Designers
• Orange County Real Estate
• Auto Insurance Quotes
• Lane Systems Inc.
• RedMedia
• Orange County Business Lawyer
• Cebu Pacific Air
• Buddy Gancenia Reality TV
• SmartBro Wireless Broadband
• SPOT.ph
• Make Money with Performancing Ads

updated the list of sponsors

More like Tuesday, eh? Anyway, I thought that I wasn’t paying attention to this blog like I’m supposed to because I’m too lazy (nothing new, really) so I thought that while busy being too lazy, I could just feature some sites that I think is interesting every Monday. Or.. every other Monday. So onto the post!

In today’s world where everything’s at an all time high, it’s really no wonder why people are being creative.

Take this site that I’ve found recently. It’s called GLMobility. It lets you call people overseas without the roaming fees. Off the top of my head, I could say that it would be beneficial to freelancers who are always on the phone with clients across the globe away.

According to the site, here are some of the reasons why you’d want to grab a GLMobility sim:

• Prepaid SIM with no line rental, no contract
• North American phone number
• Works in most unlocked GSM phones
• Easy anytime credit refill
• Receive FREE SMS text messages in all countries
• Avoid paying high roaming fees

They have 4 packages and they are as follows (from the site as well):

• Leisure Traveller $45

  • Stop paying high roaming charges
  • Stay in touch with family & friends at a low cost
  • Receive free SMS anywhere in the world
  • Package includes SIM card, $25 credit and North America phone number

• Starter Package $35

  • Free roaming from over 80 countries
  • Stay connected to your family and friends from over 130 countries
  • Package includes SIM card, $10 credit and North America phone number

• Business Traveller $65

  • Avoid high international roaming fee
  • Pay less and talk for more minutes with business associates
  • Package includes SIM card, $50 credit and North America phone number

• Power Package $145

  • Make & receive calls from over 130 countries worldwide at affordable rates
  • Talk more, pay less!
  • Package includes free SIM card, $145 credit and North America phone number

And I just noticed, you can actually add a personal toll free number “and have friends & famliy contact you worldwide at no cost to them.” How cool is that?! Actually, it just disappointed me because it’s still an upcoming featured

Moving on, anybody up in giving this a try? I would if I enjoy being on the phone (which I’m not very fond of), if I’m always out of the country and if I have lots of people to talk to. God knows I can count in my 2 hands the people I always interact with on the phone who are in the same city as me. Imagine how many people I actually know out of it.

There is no such thing as one tweak fix all

If there’s such a thing, the guy (or girl) who was able to find that tweak would’ve been a bajillionaire by now. That or he/she’s, unfortunately probably a Microsoft employee by now.

Patience is a virtue (and a very important skill)

There was a time before when I was able to “fix” a specific IE bug in one of my dreams. I can’t remember what that bug was though, but I’m sure that happened, because that also happened when I was trying to play with WordPress before.

Anyway, I think IE is a great therapy for people who need to manage their angers. I used to be very explosive when I’m angry or when I can’t find a solution to a problematic rendering error. Sure, you can say that I matured a little but I think that if IE’s following my every whim all the time, then I don’t think I would be used to seeing any design screwed up in the blasted beloved browser.

If it fixed your problem…

Chances are that it opened a LOT of seemingly unrelated problems waiting to be discovered. I fixed a height problem and the next thing I know, the other elements (who are important at that!) are not showing up anymore. So be wary, be very, very wary about that hacks and fixes.

With IE, anything is possible

I honestly have a feeling that the Murphy’s Law was created with IE in mind, no kidding! If you think that there’s no way that any element will collapse specially if you already specified its width and height, then expect IE to crush that belief of yours.

If you’re dealing with IE, it’s OK to be paranoid

And check, and check, and check. There was a time when an office mate and I was checking the same site in IE, just different machines and it’s rendering differently. Seriously.

If your element collapsed in IE, chances are that it doesn’t have a haslayout

And that usually means you need to add a height and width to your element and if that still did not work, add an overflow:hidden. Sometimes that still won’t work so you have to add a display:block. That usually does the trick. If you don’t want to add a specific height however, you can add 1% or 100% as its value, anything as long as it’s not auto or a pixel or em. Be careful though, if you add a height to its parent div, it’ll take the height of its parent.

I could never stress this enough — haslayout is everything in IE

If your element is inline, then it’s fine, but if it’s a block-level element we’re talking about, grab the IE dev toolbar and hunt for that ever-elusive haslayout property.

Sidenote: Want to run 2 IE in the same machine? Download IE 6 and then download a copy of IE 7 standalone, yes, it’s necessary that it’s in that order and not the other way around because last time I had IE 7 as my default browser and got the IE 6 standalone, IE dev toolbar no longer worked which is one of the things that enabled me to keep my sanity back then.

Before using an IE hack, check out if you can solve the problem without it.

Yes, even if it drives you insane. It’s daunting, it’s scary, but it’s to be done. I hate to look at an IE6 specific stylesheet that contains more or less 100 lines of code. If it’s a problem with margins, try to see if the changes you need to do will make such a big impact to the other browsers, if it’s hardly noticeable then apply the fix in your main stylesheet. Now if we’re talking about 20-25 pixels (or more) difference then by all means, do it in a separate stylesheet.

IE6 doesn’t want <tr> to have borders

It’s annoying when I realized that. I thought the problem was that the table doesn’t have haslayout (how can a table not have a haslayout when it’s a block-level element by default, yes?!) that’s why the borders won’t show up. Turns out that IE doesn’t render a border when it’s in the <tr> tag, you have to add the border in the <td> tag and don’t forget to add border-collapse:collapse for your table so that the border will look continuous.

Test again and again and again

I told this to you before, remember? You can never be too sure with IE so you must be paranoid. You must be an OC and you must never forget to expect the worst case scenarios.

So there! What IE taught me so far, anyone else want to throw in some ideas too?

One unrelated musing, do you know that I just finally realized that this sign < stands for less than and > stands for greater than. It’s stupid, I know but it’s true! And guess what finally taught me this very “complicated” mathematical symbol.

HTML!

The less than (<) sign’s equivalent (just in case you didn’t know) is & lt; and the greater than (>) sign’s equivalent is & gt;. Finally, it’s out of my system.

If you’re reading this feed from another site other than Tech Hive then this content is scraped.