Aprende a hacer webs de 0

O podría titularse también "Manuales y recursos para aprender a hacer páginas web sin morir en el intento".

Bien, vamos por pasos. Te encanta el diseño gráfico. Ves todas esas webs tan chulas llenas de muñequines y piensas: tío, tengo que hacer algo así. Algo así de chulo para /* la empresa de mi padre / mi currículum / lo que sea */. Pero no sabes ni por dónde empezar y sólo te han hablado de programas como el Front Page o el Dreamweaver que no terminan por convencerte. Bien, aquí va todo por pasos.

1. Editores de páginas web. 

Puedes usar un simple notepad, pero para empezar tienes sus inconvenientes (como que no se te puede escapar ni una coma o punto si no quieres que tu web quede destrozada como un castillo de naipes). Los pros en la materia los usan sólo para hacerse los guays. Está claro que la opción que yo recomiendo es el Dreamweaver en su magnífica pestañita "Dividir". Esto te permite ver a tiempo "real" qué estás programando y cómo te está quedando todo, lo cual es muy útil para aprender.

Además, tiene una útil función de autocompletar, el código en css, javascript y html te lo separa por colores y te muestra los errores ortográficos en un lapidario negro.

Podéis descargalo de aquí.


2. Un manual decente para aprender XHTML y CSS. 

Pasad de todo eso del HTML5 y CSS3. Entre sus problemas de incompatibilidad y la escasez de manuales medianamente bien planteados para aprenderlo de 0, es mejor que empecéis con esto.

A mí me resultó tremendamente útil este manual de Lady Benko, a la que no conozco en persona pero que ya adoro. Con sencillísimos ejemplos te muestra desde lo más básico para que puedas ir haciendo tus pinitos con las webs.

PD: ¡No caigas en el click fácil del Dreamweaver! Seguro que al escribir tu primer
Hola mundo
piensas en que queda todo muy soso y muy negro y que quieres arreglarlo... pero cuanto más toques en el editor de Dreamweaver manual más caótico te hará el código... y tú lo quieres limpito para aprender apropiadamente ¿verdad?

Clásico cómic de www.webdesignerdepot.com

3. Extensiones básicas. 

3.1. El básico Photoshop para hacer las fotos más bonitas y cuadrarlas en su espacio maravilloso.
3.2. Webs online que suban tus imágenes a un servidor gratuito: como photobucket (gran opción)
3.3. Extensiones muy útiles para leer códigos de otras webs (del tipo de: oh, qué chulo. ¿Cómo carajo ha hecho esto? Pues así puedes enterarte. El más famoso es el Firebug, el cual te permite hasta sobreescribir el código para que veas los cambios que vas haciendo. Vamos, para mí es básico.


4. Servidores de FTP gratuitos. 

¿Cómo subir tus maravillosos archivos al servidor de tu empresa / casa? (Si no tienes servidor, en esta web tienen un par de sugerencias). Bueno, yo os recomendaría el afamadísimo FileZilla, el cual siempre me ha funcionado de maravilla. Antes usaba el CuteFTP pero este no me actualizaba los archivos en tiempo real y me daba algunos problemas de funcionamiento.

Hay ciertas cosas importantes que debéis de saber al subir vuestra web. Está claro que parece sencilla la tarea de abrir carpeta > arrastrar archivos. Pero a más de uno le sale el afamadísimo error de "error en tiempo de escritura" etc.
Bien. Para empezar, vuestra página Home.html no puede llamarse de otra forma que no sea index. Con minúsculas. Sin tildes. Sin espacios ni puntos de más. ¿Ok? index.htm

Para seguir: cualquier archivo intentéis subir a vuestro servidor de FTP que tenga tildes o caracteres extraños (y sí, considera extraña la "ñ" de "ñoqui") os dará error en la escritura. Todo con faltas de ortografía, sinónimos y en inglés o no os irá.

5. Problemas de compatibilidad. 

Hay ciertas cosas importantes a la hora de que tu página web sea mínimamente decente:

5.1. Problemas de compatibilidad con navegadores. Está claro que Internet Explorer no te va a leer la página igual de maravillosamente que Chrome o que Firefox. Eso sería un sacrilegio para los simpáticos de Microsoft. Además de ser uno de los navegadores más cutres del mundo (sino el que más), da problemas de compatibilidad con todo, incluyendo las maravillosas herramientas que nos ofrece CSS3.

Aquí os dan la solución a cómo arreglar los problemas con IE. Está claro que tendrás que hacer otro CSS... pero tranquilo. No todo es carbón en el reino de Dorothy.

5.2. Problemas con las resoluciones de pantalla. 

Pronto aprenderás, probablemente con un terrible dolor de cabeza y un llanto incontenible, que la magnífica y chulísima web que has hecho en tu portátil no se ve del todo bien en el portátil de un tío cutre que usa la escasísima resolución de 800 x 600. Sólo un 1% del mercado la usa, pero el informático de tu empresa está ávido por destrozarte, así que apunta ese hecho como si nada delante de todos tus compañeros.
¡Evítalo a tiempo!

Esta magnífica herramienta te permite ver tu web en diferentes resoluciones, para que veas lo que va mal.

¿La solución? Transforma tus divs del fondo en porcentajes y en ems. Es cuestión de probar ;D