Screen Resolutions

It's been a while since I posted here on my web development blog, now I'm back. I'll try to create a post once or twice a month or more. Okay.. back to business...

Recently I developed a mobile app for a prominent company here at the office, it was my first mobile app experience. I used Sencha Touch 1.1, a Javascript framework that I don't have any knowledge of.

We gain great response from the client, although I had a hard time adjusting to the framework but its worth it.

A problem that I encountered is about the screen resolutions of different devices and make the layout fit in all of those devices and look almost the same. I have compiled a list of screen resolutions that might be useful for you  in developing mobile or even desktop apps.

Mobile and Desktop Screen Resolutions: (as good as the time of post date)

Device	Resolution	Orientation
iPhone 3/3G, iPod Touch	320 x 480	portrait
iPhone 4/4S	640 x 960	portrait
iPad	768 x 1024	portrait
Netbook (common)	1024 x 600	landscape
Laptop (common)	1366 x 768	landscape
Desktop (common)	1440 x 900	landscape
HD	1280 x 720	landscape
Full HD	1920 x 1080	landscape

I created a Google Spreadsheet of the same screen resolution table, I will update this spreadsheet by the time I encountered an important screen resolution you need to consider in mobile/web development.

Screen Resolutions Spreadsheets

Hope this helps!

have fun!

Wordpress 3.1 admin bar

I have a WordPress(WP) project from way back and see to it that it's always updated and then came version 3.1. I logged-in using an admin account and do the admin area stuff and when I viewed the front-end, all I can say is... "WTF?! since when did WordPress have an admin bar? I wrecked some of the layout! s**t!". Sorry for the crappy language.

I know another CMS that has a top bar when your logged-in, it's b2evolution. I only used it once and never again, sorry b2evo! I don't know what came into mind of the WP devs to make that bar. Yes it helps but I'm used to WP without it. Oh well got to live with it... hehehe.

At least you have the option to remove it.. yey!
Just add this line inside your theme's function.php file:

add_filter( 'show_admin_bar', '__return_false' );


There are some other ways to remove it but this is the shortest and cleaner one.

Enjoy using it!http://develop-d-web.blogspot.com/search/label/wordpress

Dummy Content

When designing or developing a website or even a desktop application you should put some dummy text to make it presentable rather than inserting the word "test". Its boring, senseless, and it is not applicable in testing paragraphs.

Try to use dummy text generators, I have compiled some websites and browser add-ons to help you insert a dummy text.

• Lipsum.com - a Lorem Ipsum generator that you can copy freely and paste it in your application.
• Fillerati - a great text generator using quotes from books. Also has an interactive interface using HTML5 and CSS3.
• Blind Text Generator - provides different types of dummy text to select from Lorem Ipsum, Cicero, etc.
• Adhesion Text - lets you input a set of letters or words and it will reorder those letters/words to create a dummy text.
• Dummy Lipsum - a Mozille Firefox add-on in which lets you insert dummy text just by right clicking a text field from a website.
• Lorem Ipsum Generator for Chrome - a Google Chrome extension that provides a Lorem Ipsum generator right inside the browser.

Bonus:

• Dummy Image - lets you create a dummy image to insert into your website. This is excellent since you will never search images in Google or create using an image editor for the right image to insert to your website

Open-source/Free icons

Question:
Want to put icons on your website without having to violate some copyright with other websites or people?

Custom Fonts for your website

Do you want to add custom fonts on your website?
You can declare @font-face inside your CSS.

@font-face {
    font-family: custom_font;
    src: url('/fonts/custom_font.ttf');
}

h1 {
    font-family: custom_font;
}



This works for all browsers except for Internet Explorer, because it does not support TrueType Fonts (TTF)[wiki] it uses Embedded OpenType (EOT)[wiki] fonts. To do that, you must first convert you TTF fonts into EOT.

Applications:

• http://code.google.com/p/ttf2eot/downloads/list

Free online converters:

• http://www.kirsle.net/wizards/ttf2eot.cgi
• http://ttf2eot.sebastiankippe.com/
• http://onlinefontconverter.com/

Next you need to include both EOT and TTF fonts.

@font-face {
    font-family: custom_font;
    src: url('/fonts/custom_font.eot'); /* IE reads only this line */
    src: local(custom_font), url('/fonts/custom_font.ttf') format('opentype');
    /* since IE does not know the "local" keyword it will skip this line */
}
h1 {
    font-family: custom_font;
}



Browsers supported:

• Internet Explorer (versions 4 and up)
• Mozilla Firefox (versions 3.5 and up)
• Opera (versions 10 and up), Opera Mobile (versions 9.7 and up)
• Google Chrome (versions 4 and up)
• Apple Safari or any WebKit based browsers (versions 3.1 and up)

---

Sources:

• http://symphony-of-dot-net.blogspot.com/2010/03/making-css-custom-font-works-with-ie.html
• http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support
• http://en.wikipedia.org/wiki/TrueType
• http://en.wikipedia.org/wiki/Embedded_OpenType