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.
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
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.
Recent Comments