Website/HTML Pages for the iPhone and iTouch
July 24, 2008
Tools: Dreamweaver 8.
With all the fuss about Apple’s device, I decided that it was a good idea to have an iPhone/iTouch accessible site of my main site, djjc.com. I need it to look good in portrait or landscape mode. Let’s remember, the iPhone’s portrait resolution is 320 width by 356 height, and its landscape width is 980 pixels.
1. Let’s create a new page. File –> New –> Basic page –> HTML. The DTD can be left as XHTML 1.0 Transitional. Click on Create. Now File –> Save and name it index.html.
2. Place the cursor after <body>. Insert –> Layout Objects –> Div Tag. Click on New CSS Style. The Selector Type should be Advanced (IDs, pseudo-class selectors). In Selector: type this #iphonecss.
3. Save as iphone.css. Click on Box. Width: 320, Height: 356. Un-check Same for all under Margin and on Right and Left select auto. Click Ok and Ok.
4. Go to Modify –> Page Properties. Under Appeareance I will select my Page Font as Verdana, Arial, Helvetica, sans-serif. Size:12. Text color: #FFFFFF. Background color: #000000. Left, Right, Top and Bottom margin all set to 0.
5. Now click on Title/Encoding. In Title i will add my site name: Jose Cotes (DJJC) for the iPhone. On Encoding select Unicode (UTF-8). Click OK.
6. After <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> add the following: <meta name=”viewport” content=”width=320″ />.
7. Start adding the content. You can create more styles for different content, graphics, etc. Check the following links for CSS Support in Safari: http://developer.apple.com/internet/safari/safari_css.html, and here is Apple’s reference library for Internet & Web: http://developer.apple.com/referencelibrary/InternetWeb/idxWebContent-date.html.
8. Upload your files to the server, and test it here: testiphone.com.
Print Screen, Scroll Lock, Pause, Insert, Etc on Bootcamp
July 23, 2008
Running Bootcamp on a Mac, with your favorite flavor of Windows, is a very pleasant and smooth experience. But nothing is perfect, and the lack of certain keys in the Macs keyboards, might be a bit of a problem for some users.
There are tons of sites teaching you how to hack the registry so you can re-map some keys. Here I will go for the fastest, easiest way to access the whole windows keyboard.
Go to Start –> Programs –> Accessories –> Accessibility –> On-Screen Keyboard. This is what will show up. Click and enjoy.
Upgrade/fix your Mac, iPhone or iPod
July 23, 2008
The guys at ifixit have developed great guides on how to fix or upgrade your Mac, iPhone or iPod. From memory, hard drive, optical drive or battery replacements to headphone jack, antenna and displays fixes, they really cover it all. Go to http://www.ifixit.com/Guide/.
iPhone and iTouch Hello World Application
July 18, 2008
Tools: MAC Intel, iPhone SDK.
Here is probably the most simplified way to create a Hello World application for the iPhone or iTouch: http://techblog.muthuka.com/index.php/2008/03/27/hello-world-iphone-native-application/
Update: Here is another step by step that applies to the SDK V. 2.0: http://icodeblog.com/2008/07/26/iphone-programming-tutorial-hello-world/
Update: after trying both methods above, I have found what I believe to be the greates Hello World turorial. Also, it really applies to the newest SDK version: http://www.iphonedevcentral.org/tutorials.php?page=ViewTutorial&id=49&uid=27391603
Selecting the right colors for your print or web design
July 18, 2008
One of the most important and hardest part of your design, whether is print or web, is to select the right color combinations. Well, Adobe is giving us a free online tool that will ease the process: http://kuler.adobe.com/. Also, check this tool for another alternative of your vision: http://www.cemp.ac.uk/colours/.
Create A Wallpaper For Your Phone
July 11, 2008
Tools: Photoshop (or any other image editing tool).
Most of the phone nowadays support the capability to add your own wallpaper. You can take a picture with the built-in camera, but that will end up giving you something that is probably not as nice, as the picture found on the web of that model you have been in love for the past 10 years. So, the question is, how to make that picture a wallpaper for your phone?
1. You will have to find the screen resolution of your phone. For this example, I will use the ultra famous iPhone and the Sony Ericsson P1i, but this applies to any other phone as well. Doing a Google search of “iPhone screen resolution”, it took me to http://www.apple.com/iphone/specs.html. For the P1i, it took me to http://www.sonyericsson.com/cws/products/mobilephones/specifications/p1i?cc=us&lc=en.
iPhone = 320 x 480
P1i = 240×320
2. Now launch your favorite image editing tool. I will use Adobe’s Photoshop. Go to File –> New. Fill the fields with the following information:
iPhone:
Name = iPhone Wallpaper, Preset=Custom
Width = 320 pixels, Height = 480 pixels
Resolution = 72 pixels/inch, Color Mode = RGB 8 bit
The rest stays as is. Save the Preset with the name iPhone Wallpaper.
P1i:
Name = P1i Wallpaper, Preset=Custom
Width = 240 pixels, Height = 320 pixels
Resolution = 72 pixels/inch, Color Mode = RGB 8 bit
The rest stays as is. Save the Preset with the name P1i Wallpaper.
3. You will end up with a white box. Open that graphic you want to transform into a wallpaper: File –> Open. For this example, I will use the graphic in the following link: http://interfacelift.com/wallpaper/downloads/01623_stoporillshoot_1024×768.jpg.
4. Go to Select –> All. Go to Edit –> Copy. Now click on the window with the white box and go to Edit –> Paste. You can close your original graphic.
5. Now onto the tweaking. Firs go to Edit –> Free Transform. Change the size, position and angles until you are satified. You can also add your own text or effects.
6. Now that you are done, you will save your file as jpg. Go to File –> Save for Web… In the preset box select JPEG High. Now click Save.
7. That file will need to be transferred into your phone. The methods are different but very easy, check your phone’s manual on how to do it. Once the file is in your phone, open it and use it as your wallpaper.
Video Copilot: Energy (68)
July 10, 2008
Andrew Kramer bring us thru his site, VideoCopilot.net, an amazing tutorial on how to generate the energy effect, as seen in a lot of movies.
Take the tutorial here: http://www.videocopilot.net/tutorials.html?id=109
VTC
July 10, 2008
With more than 625 courses, and over 66000 video tutorials, VTC is one of the leading online traning sites worldwide. Priced at U$30 per month, is a must for those wanting to learn about pretty much everything: Affter Effects, Reason, Flash, Final Cut Pro, Vegas, Sound Forge, Shake, Captivate, Motion, C++, Java, etc. There are courses in English, French and Spanish.
Sign up here: VTC.com.
Web-Safe Color Palette
July 10, 2008
Thanks to our friends at Lynda.com, here are the web-safe color palettes tables organized by hue and by value: http://www.lynda.com/hex.asp.
CSS Browsers and Authoring Tools
July 10, 2008
Here is the most comprehensive list of CSS’s compatible browsers and authoring tools: http://www.w3.org/Style/CSS/.
Recent Comments