You can now reserve some seats for the main event that will be on July 10, 2009 at the Asian Institute of Management, Makati City.

We have an interesting set of speakers for this event:

• Rico Sta. Cruz – Creative Director, U.S. Auto Parts Philippines
• Nap Lara – Software Developer, Friendster
• Regnard Raquedan – Web & Usability Consultant
• Jojo Esposa – Founder, Philippine Web Accessibility Group
• Marco Palinar – Web Design Consultant
• Gail dela Cruz-Villanueva – Creative Director, Sheero Media
• Luis Buenaventura II – Co-founder and Social Software Architect, Syndeo Labs Director of Engineering, Exist Global

We’re also currently looking for sponsors (look at the sponsorship packages (PDF)) at this point and if you or your company’s willing just email Regnard at regnard [at] raquedan.com

Plans

• Do not use any hacks, that is in my priority right now because I hate the me who resorts to hacks right away. So I’m going to bend IE using the will of CSS by hook or by crook! (Note: so if ever you read a headline that states “Woman died after bashing her head on the wall, beside her is a note that says “Damn you IE” that’s me.)
• I’m going to use dl for forms, I would like to explain but I’m thinking of dedicating an entire post for this.
• Separate my structure-related properties from the properties that defines the style (color, backgrounds, borders) of the site. I’ve done this to one of the projects we’ve handled in syndeo and I found that I like it so much, I would love to use it again on our other projects if the deadlines aren’t so tight.
• Aside from no hacks, I will also be using non-standard elements in my markup. Not saying that I’ll be using invalid and deprecated elements, but just like what I’ve mentioned, I’ll be using dl in my forms. I will also be using some CSS 3 properties here and there with blatant disregard whether IE or Firefox is supporting it. And of course, since I’m doing some non-conventional stuff anyway, I’ll also be throwing non-web safe fonts your way like Calibri and Cambria. I did tell myself that I want to go out of the box before.

Some observations

• One of the main reasons why I’ve been postponing this is because I detest adding more code than necessary which is my first impression with microformats before. That was until I actually checked out the code that WordPress adds to my blog and noticed that it’s hAtom-ready. Also, of course, there’s this high probability that I’m doing it wrong. heh.
• I hate how you have to override wp_comment_list in function.php instead of adding a dedicated file for it where users can override the darn thing properly. I mean WordPress is already 6.9 MB when uncompressed, what’s another 1 KB?
• I’m confused with what I’m doing, I started with using unordered list for my blog entries list until I realized that I’m using ordered lists for my comments section. My rationale to the latter is because it is important for you to read the comment in the order in which it is posted — therefore, it’s only just that I also code my blog entries in ordered list since it’s chronological! What bothers me though is that my blog entries are in reverse order, or maybe that doesn’t matter? I’m leaving it in ordered list.
• I have no idea how to put a timestamp in PHP, I used gmmktime(0, 0, 0, 1, 1, 1970); but I’m sure that’s not right. Because it’s not showing up.

  I’m also questioning this in the accessibility standpoint. Sir Jojo of PWAG mentioned in the 3rd Mini Web Design Conference (the 4th will be on March 18 by the way, you can still sign up) that screen readers read the title and alt attributes to the blind and I don’t think blind people would appreciate the machine saying “Abbreviation 2005-10-10T14:07:00-07:00 October 10, 2005” when reading about when the post was published. Or is the abbr tag really intended for the machine? Then how can I make screen readers skip that? Or is that even possible?

I would love to hear your thoughts on some of my predicaments and feel free to correct me with my mistakes.

PS: Yes, me overanalyzing this did cross my mind as I’m writing this post.

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

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