Cavaliere designs » Web Development

Bookmark an iPhone Icon for your Web Page

Colin — Fri, 29 Jan 2010 03:50:16 +0000

When saving a bookmark on the iPhone it sometimes saves it as cool icon or as a snapshot of the web page. Here I will list a few web sites that offer to help make your web page icon into an actual icon to match the iPhone icon standard.

1.You first want to have an icon designed and saved to your sites root folder and visit Quirco. This is where you can upload your icon that you designed and click make icon, don’t forget to make sure that the “Make Glossy” check box is checked.
Once you upload and click the button to make the icon it will display a set of icons with different color back grounds.

2. Save this icon to your web sites root folder as it will be used on the iPhone or iPod Touch.
3. Next, within the “head” element of your web page add this code:

This is the code that will be executed when you save the web page on your iPhone or iPod Touch.
4. Visit the page on your device and save the web page as a bookmark to your home screen.

If you have any questions please send me an email or comment below. Try to save this blog on your iPhone and view the icon!

Colin

Google Chrome for Mac now in Beta

Colin — Thu, 10 Dec 2009 03:17:06 +0000

Google Chrome has finally reached the Beta status, thus being released for public use.I have become a true Safari fan since it was upgraded with Snow Leopard, but upon first use I can see that Chrome for Mac is performing very fast. I am finding that it is rendering sites comparable with Safari and Firefox. I do use Firefox for web development, and am excited to include Chrome for Mac in with the development phases now. Google does not support plug-ins for the Mac version of Chrome yet, but it will support Tell me what you think of the new browser release, and I am sure someone will mention the fact that the great bookmarking feature is not available for Mac just yet.

10 Coda Tips and Plugins

Colin — Thu, 03 Dec 2009 04:31:01 +0000

When beginning with web design or development you will need some sort of code editor to write the website. From there, you will also need software to refine images, a web browser to test your design, tools to store code clips, and lastly an FTP client. I have in the past relied heavily on Adobe Dreamweaver, as I am a big fan of the entire web design Adobe Suite. But, when it comes to writing a blog I find it cumbersome to write PHP for some reason in Dreamweaver.

I turn to Coda as an application that is capable of performing each of the tasks I need to perform throughout a web project. Coda is strictly Mac software. This software has come a long way since it came out, and there are many articles out there with long lists of “useful plugins”. I want to just give a user a quick insight into what can make Coda faster, easier to use which will result in less headaches in the end.

1.Switching Through Tools
One thing that Coda makes easy is keyboard shortcuts. They allow a user to switch through different modes by pressing “Command and 1-6″. This would be used if you want to switch between your editor, preview or sites, etc. easily without using the mouse.

2.Toggle through documents
To indent a line of code press “Command, Shift, and the Left or Right Brackets.
Example: Command Shift { or }

3.Line Indent
When you begin coding in CSS or HTML you will find that Coda will indent lines for you on the fly. If you need to indent a line manually press “Command” and the left or right { } to indent any line the cursor is on.

4. HTML Validation
Coda will validate you HTML on the fly as you are working or you can validate it once you are finished. Coda will give you a hint as to what needs to be fixed, and take you to the beginning where the error is when clicked. You can find this at the bottom of the Coda window.

HTML Error Hints

5. Setting up Sites
You can set up your website project within Coda and store them as different “Sites”. They can be automatically imported using Trasmit, but you have to be a user, or you can manually input the data to sync the sites. The homepage of the site will become the icon hanging on the Sites wall.

The sites that are set up have a remote and local folder linked to it, along with terminal settings if you also set that up. This is very useful, so when you save the file it will then update and publish to both file destinations. This will save you time over using Firefox FTP to load the files to the server each time you need to update the code.

6. Using Preview
I am a strong believer in using Mac tools, since they have always made my life easier as compared to other “easier” OS’s out there. I still rely on using Firefox web dev tools, and firebug most of the time but this will come in handy. This Preview will allow you to edit source code and see the changes without doing any editing to the document window.

7. Code Navigator
When you get into a coding project the tags, or elements can begin to pile up. This code navigator window can help you jump to specific tags within your document without having to scroll through and manually find them.

8. Coding Clips
Coda has a feature that allows you to store snippets of code, and insert them into a project on the fly. You can save snippets to use in any document.

9. Coda Books
From time to time I find it useful to have reference information available within Coda. It will come with 2 books for you to use right away, but you will want to find more books here.

10. Split Window
Coda gives you the opportunity to split multiple windows to view code on either horizontally or vertically.

You can right click on the file you wish to open and select “Split View” or use the keyboard shortcut: Command, Control, L.

There are many plugins available for Coda developed by third party vendors that you can install to increase functionality. I am currently using a few of them, and will report on them at a later time.
I hope these tips will get you started, there are plenty more so feel free to comment on what works for you as you explore.
-Colin

5 Most Popular Cheat Sheets for Web Developers

Colin — Sat, 28 Nov 2009 21:50:53 +0000

Many blogs post cheat sheets for users, and I always find that the list is so long usually containing some that I can do without. I have compiled a list of 5 cheat sheets that I use almost everytime I am writing code for a web project. It is easy to Google the code that I am looking for, but now that I have posted them on the wall next to my desk it can prove to be a bit easier. Below you will find cheat sheets for all of the most common web design code: CSS, HTML, JavaScript, jQuery, and sometimes Mootools. Also, you will find a link to a website that contains all of the cheat sheets you will ever need. Which one do you use the most?

Mootools

If you need to reference more cheat sheets you will find all of them here:
Favorite Cheat Sheets

-Colin