Set up Your Workspace

In this first post I want to introduce you how to set up a workspace to design and manage your web projects using Dreamweaver (for coding), MySql (database) and PHP (server-side language).

Before you begin you need a software to edit web pages, a software to manipulate image, a local web server to test PHP pages, and a database where to store all data.

Dreamweaver
I think Dreamweaver is the best solution to design and edit code for your website. The current version, CS3, is easier to use, and more powerful than the previous version, but it has a rather elevated price ($399). You can download a trial copy from the Adobe website.

Photoshop / The GIMP
To create graphical elements for your pages I suggest to use Photoshop or The GIMP. The GIMP is a open source software to manipulate images, it's free and available for Win, Mac and Linux operating systems.

Server and Database
To manage you server locally and to test your website written with PHP, you can download and install Apache. To store data install MySQL database and phpMyAdmin to create and manage MySQL database.

Mac User?
If you are a Mac user, I suggest to use MAMP to configure your local webserver, MySQL and phpMyAdmin. It's simple, fast and free.

Tutorials and resources: the best of woork

The following list is the table of contents of all tutorials you can find on woork. Tutorials are about web programming, web design, css, frameworks, database and other related topics.

The Woork Handbook

Download the Woork Handbook, it's Free!
The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design... directly from Woork!

HTML 5 Visual Cheat Sheet
HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.


Introduction to design websites

• Step by step guide for newbie to design a simple web application (part 1)
  
• Set up your Workspace
• A typical website structure
• Config.php: define your database connection's parameters
• Design the page layout using CSS
• Conceptual design for index.php page layout
• Load page using URL variables and PHP include() function
• Load pages using URL variables and Coldfusion cfinclude tag
• A typical website structure (Coldfusion)
• Organize and design a navigation bar for your site using CSS, PHP and URL variables
• Organize and design a navigation bar for your site using CSS, Coldfusion and URL variables
• Add #navbar elements to default.css file and to index.php

CSS, HTML, Web design

• CSS3 rounded corners for every browser? An alternative quick solution without headache
  
• Structured process you must know to develop a web application
• Simple process to estimate times and costs in a web project
  
• The Deming Cycle: an application to web design
  
• Useful guidelines to improve CSS coding and maintainability
• The Art of reusing code in your web projects
  
• CSS coding: semantic approach in naming convention
  
• Simplicity is better: some suggestions for a clean blog layout
• Are you a CSS fanatic?
• Liquid layer with rounded corners using css
• Optimize CSS files to improve code readability
  
• Three column fixed layout structure using CSS
• Digg-like navigation bar using CSS
• Simple CSS vertical menu Digg-like
  
• Table's anatomy: why tables are not so bad
• Liquid styled input element with CSS
• Flickr like horizontal menu
• Socialiconize your site
• Tabbed search bar using CSS and Javascript
• Beautiful CSS Form
• Liquid expandable section with rounded corners using CSS
• How to design a sexy header for your site using CSS
  
• Write a well structured CSS file without becoming crazy
• Perfect pagination style using CSS
  
• Clean Tab Bar Digg-like using CSS
• CSS Message Box collection
  
• Two CSS vertical menu with show/hide effects
• Nice comments counter style for your blog post
• Top-Down approach to simplify your CSS code
• Pastel color menu with dynamic submenu using CSS
  
• Beautiful CSS buttons with icon set
• Clean and pure CSS FORM design
• Nice CSS menu with feed reader icons list
• Navigation bar with tabs using CSS and sliding doors effect
• Nice login and signup panel Newsvine like using CSS
  
• Tips to design your site for mobile devices
• Elegant glass style navigation bar using CSS and toggle animated effect
  

Twitter API

• How to create a stream of messages Monitter-like with PHP and jQuery
  
• Super simple way to work with Twitter API (PHP + CSS)
• Simple PHP Twitter Search ready to use in your web projects
• Send messages from a PHP page using Twitter API
  

Ajax / Frameworks / Web 2.0

• A simple introduction to Ajax
• Start learning Ajax: XMLHttpRequest and site structure
• How to solve Internet Explorer cache issue in Ajax
• Login using Ajax and Coldfusion
• Login using AJAX and PHP
• Insert record into database using Ajax and PHP
• Insert record into database using Ajax and Coldfusion
• Deleting record with Ajax using prototype.js and PHP
• A simple search engine in Ajax and PHP
• A simple search engine in Ajax and Coldfusion
• Edit in place with Scriptaculous and PHP
• Edit in place with Scriptaculous and Coldfusion
• Lightbox using mootools and pathfusion multibox
  
• Mootools animated sidebar menu
• Horizontal animated menu using Mootools
• Toggle effect using Scriptaculous
• Search with autosuggest feature (PHP)
  
• Search with autosuggest feature (Coldfusion)
• Drag and drop to order list elements with Scriptaculous
• Using prototype.js to add record into database with ajax
• Opacity change using Scriptaculous
• Gettyone-like search options menu with Scriptaculous
• Sort table rows using Ajax
• Simple images slider to create Flickr-like slideshow
  
• Nice Ajax effect for message box using Mootools
• Liquid expandable section with mootools toggle effect
• Sliding top panel using mootools
• Using CSS and Mootools to simulate Flash horizontal navigation effect
• Improve form usability with auto messages
• Useful tips to enrich your HTML Forms
• MooTools Basic Tips for Web Designer (Lesson 1)
• 10 Useful tutorials to learn Scriptaculous
• Simple ul list with a nice slide-out effect for elements
• Super elastic effect to design high impact web menu
• Nice vertical menu with motion and opacity effect
• Elegant animated weekly timeline for websites
• Ultra versatile slider for websites

News Tickers

• How to implement a news ticker with jQuery and ten lines of code
  
• Fantastic News Ticker Newsvine-like using Mootools
  
• News ticker with horizontal scrolling using Mootools
• Automatic news ticker with vertical scrolling and Start/Resume options
  

MooTools Lessons

• Lesson 1 - Basic Tips for Web Designer
  
• Lesson 2 - Get elements ID using unobtrusive code
• Lesson 3 - Interaction with Forms
  

Database

• Project a database: define the relationships-entities model (tables, attributes, and relationships)
• Project a database: create tables and relationships with SQL
• Project a database: how to use PHP and SQL to create tables and relationships
• A correct approach to define relationships between database's tables
• 10 Useful articles about Database design
  

PHP Functions and Scripts

• Time and Date difference using a PHP function
• Twitter: send message from a PHP page using Twitter API
• Simple newsletter system using PHP
• PHP components: Autosuggest
• PHP components: login system

Coldfusion Functions and Scripts

• Custom script to calculate a digg-like date difference with Coldfusion
• Remove HMLT tags from input field using Coldfusion and ReReplace() function
• Simple 5 stars rating script using AJAX and Coldfusion
• Simple newsletter system using Coldfusion
• Coldfusion VS PHP part 1
• Split text string using Coldfusion
• Search with autosuggest feature (Coldfusion)

Javascript Functions

• Show Hide Layer using a simple Javascript function
• Magnify text using javascript
• Change the layer background color using a simple Javascript functions
• From Feed RSS to HTML
• Ajax: add a new element into a list using javascript insertBefore()
• Change text using Javascript innerHTML
• Split an input text using javascript
• Select and remove multiple input checkbox elements
• Add an item from a SELECT field into a layer using javascript
• Simple selector list using CSS and Javascript
• Change class attribute using javascript

Web Applications

• My Tiny TodoList | A simple open source todolist written in PHP and jQuery
  
• A simple To-Do list in PHP and AJAX to reuse in your web project

Blogger Tips and Hack

• How to install Disqus comments into a highly customized Blogger template
  
• Set up Google Friend Connect on Blogger
• Super Blogger hack to improve the default comment system with Google Friend Connect
• Add TwitThis on your Blogger template and drive more traffic on your website
  
• Add Digg vote button on Blogger Template (update)
• Blogger hack: add delicious button with counter in your blogger posts
• Place Google AdSense below post's title on Blogger
• Add StumbleUpon button in your Blogger's posts
• Add reddit button with counter in your Blogger Template
• Add Technorati blog reaction on your Blogger Template
• Simple star rate system for Blogger
• Add Mixx button on Blogger Template
• Add DZone button on Blogger template
• Add Design Float button on Blogger template
• Some Blogger Tips you probably don't know
• Custom search engine on your Blogger template
• Blogger Tips: feeds RSS list menu
• Add Yahoo! Buzz button on Blogger Template
  

Frequent Asked Questions

• How can I populate a select form with a SQL query using PHP?
• How can I change a text using Javascript and innerHTML?

Spreadsheets, Project Management Tools and Resources

• Google Spreadsheets: formulas tutorial
• Gantt Chart with EditGrid online spreadsheets
• Implement a Project Plan and manage activities with Google Spreadsheets
• Project Management: a project plan with Excel (template)
• Gantt Chart using Google Spreadsheets and conditional formatting
• Project Management: Excel Gantt Chart Template
• Google Spreadsheets Tips: Invert word position using formulas
• Google Spreadsheets Tips: Add custom charts
• How to create an awesome eBook Template using Word or Apple Pages
  

Other Links

• Top resources for webmaster

Freebies

The most interesting free resources on-line: fonts, icons, brushes for Photoshop and Illustrator, Dreamweaver extensions, Blogger and WordPress Templates and much more!

Do you want to suggest an interesting resource? Please send me a message.

5 Beautiful penstyle fonts(October 5, 2008)
I'm always looking for new interesting fonts. This is a list of some of my favourite penstyle fonts you can download and use on your design projects.
Read More...

The Daily Inspired Blogger template(October 4, 2008)
Are you a Blogger fanatic? Are you looking for a professional Blogger Template magazine-style? Now you can download The Daily Inspired template for free!
Read More...

10 Beautiful icons set for web developers and designers (September 18, 2008)
This post contains a collection of 10 beautiful and very popular icons set useful to be used in your web applications or your websites.
Read More

10 Fonts to design original logos (September 5, 2008)
Are you a designer looking for nice fonts to design high quality logos? Take a look at these 10 free fonts you might use to design impressive logos for your customers.
Read more...

Beautiful and free social websites icon set for bloggers (August 29, 2008)
A beautiful and free icon set of the most popular social websites "in a bottle" to use in your blog (delicious, technorati, magnolia, feed rss, facebook, twitter, digg, StumbleUpon, design float, reddit)
Read more...

10 Awesome typewriter fonts for web designers (August 23, 2008)
This is a list of my preferred Typewriter fonts I often use in my design projects. Some of this fonts are very popular and absolutely you must have them in your fonts collection! I included a link to download each font apart and some suggest about how you can use them.
Read more...

10 Handwritten fonts you can't miss (August 12, 2008)
This is a list of my preferred Handwritten fonts I often use in my design projects. I included a link to download each font apart and some suggest about how you can use them.
Read more...

Google Maps finally integrates subway stations

If you used Google Maps today you may have noticed that they have finally added subway stations to the map interface.

It’s nice visually, but doesn’t give you as much options as HopStop (directions by train, driving or walking) but nonetheless I am a fan.

At the very least, I can see how to get home from wherever I maybe.

What all the fuss over DRM !?!

So I had a conversation with a co-worker today about sharing music and it reminded me of the daddy over at Apple.

Steve Job’s earlier this month called for the world's largest record companies to start selling songs online without copy protection software (see the BBC if you’re interested).

If you are a consumer of movies, music or digital content in general you should care.

First up, what is DRM???

What is it?

• DRM stands for Digital Rights Management
  

• It’s a system that restricts how, when and where you can listen to music and soon will include movies

What’s all the fuss about?

• Consumers like you and me like to “do what we do” with our music
  

• The problem is today we all can make near perfect copies of music and videos, and distribute them over a broadband connection in a couple of minutes or over several hours
  

• Without restrictions on copying, content providers like the RIAA or studio houses say they could go out of business (yea right!)

Why should you care?

• There is no single DRM standard
  

• Apple has their own and Microsoft has their partners (see playforsure)
  

• If you purchase content on iTunes you can only play it on an iPod or a Mac computer. That sucks if you are like me and use a PC at work and a Mac at home (I miss my library!)
  

• Even worst yet, if you for some reason decided to buy a Zune there are time restrictions for play…say 3 days for a song or 24 hours for a downloaded movie
  

• None of these thing make for a desirable experience

What does it all mean?

• Once again our angelic leader at Apple comes off looking like the hero
  

• If he wins out, we get to freely swap music and movies
  

• If he doesn’t he comes off looking like the consumers knight in shining black sweater vest

Food for thought…sound off here…

The Blackberry is Crack

Sometimes we can become device dependent and this is a sad, sad case of tech taking over our lives. There are actual studies that have linked the internet to an actual addiction and this video is exhibit A

Pipes and Tubes

Yes the internet is a series of pipes and tubes and Yahoo takes that quite seriously. Yesterday they launched a service called Yahoo! Pipes.

It’s received quite a bit of traffic and went down for part of day due to the excess traffic to the site.

What is it?
It’s a service that allows you to create your own mashups

How does it work?
It provides a drag and drop editor that lets you find data sources and combine feeds in different ways

What can I do with it?
The service is social, in that you can have an avatar, view all mashups from a certain user and even edit existing mashups to create something new

The editor is pretty slick, using ajax-like technology, rather than Flash and shows actionable modules that are connected by lines.

It’s quite cool and may even be useful if you want to like viewing NYTimes articles with relevant images on Flickr or getting aggregated news alerts from Google, MSN, Findory, Bloglines and Technorati