La mayoría de los cursos HTML5 se basan en el supuesto de que ya debes saber HTML y solo te indican las diferencias con HTML5. La intención de este material es aprender la creación de páginas Web con HTML5 desde ceros, para principiantes que nunca han desarrollado una web.
- Editor de texto plano o un editor HTML como Bluefish, o un software mas completo como Aptana, o inclusive el plugin de Aptana para Eclipse.
- Navegadores que funcionen bien y cumplan con los estándares: Chrome, Firefox, Opera
- Un navegador que funcione mal y no cumpla con los estándares
Las herramientas que se utilizan para desarrollar páginas Web abundan, aquí se describe cada uno de las recomendadas para este curso.
Editores
- Editores de texto plano y navegador
- Editores de texto especializados en HTML y CSS
- Editores de texto especializados con ventana de vista previa
- Editores WYSIWYG
Software
Extras para Firefox
- Firebug. Plugin para visualizar el código fuente de las páginas
- Web Developer. Plugin con varias herramientas para desarrolladores
- HTML Validator. Este realiza la validación del código impuesto por el W3C y muestra las recomendaciones todo el tiempo
- IETab. Visualizar páginas como si estas se estuvieran viendo en Internet Explorer
Extras para Chrome
- Firebug Lite. Plugin para visualizar el código fuente de las páginas
- Pendule. Extiende las herramientas nativas para desarrolladores
- xHTML Validator. Este realiza la validación del código impuesto por el W3C y muestra las recomendaciones todo el tiempo
- IETab. Visualizar páginas como si estas se estuvieran viendo en Internet Explorer
Páginas con recursos
- Color Scheme Designer. Útil para selección de colores
- W3C Markup Validation Service. Revisa el código
- Grid Designer. Genera el código de los grids que necesites
- Kotatsu. Genera el código de tablas
- CSS Redundancy Checker. Encuentra los selectores CSS que no son utilizados por los archivos HTML y que puede ser redundante
- CSS Menu Maker. Crear y personalizar tus menús CSS
- CSS Text Wrapper. De una manera muy sencilla logramos que el texto HTML adquiera una forma que no sean sólo un rectángulos
- PSDtoCSS online. Convierte tus archivos PSD de Photoshop en un diseño XHTML-CSS
- HTML5form. Script que valida de forma natural los formularios con HTML5 sin importar el navegador
- HTML5Shiv. Plugin para dar soporte a las etiquetas de HTML5 que por el momento no son soportadas en algunos navegadores
- pForm. Creador de formularios de manera sencilla
Consideraciones para diseño web
Al diseñar un sitio web es importante tomar en cuenta ciertos tips que harán su sitio un excelente sitio web:
1. Organización
Es de primordial importancia tener una buena estructura de página web.
Con un buen plan puedes emplear tu tiempo y esfuerzo para completar la página web y dedicarle menos tiempo en arreglar enlaces que se perdieron. Trata de crear un flujograma que se pueda entender. Esto te ayudará para saber cuántos enlaces se necesitan y cuántos puedes agrupar bajo un nombre común.
Usa la regla, “No más de 3 clicks”. Esto significa que el usuario no debe tomar más de tres (3) clicks para llegar a la información deseada. Por supuesto que esto puede variar, hay sitios web grandes que esta norma no podrá aplicarse, pero en general es una buena práctica.
2. Simplicidad
El diseño general debe ser simple. No diseñes algo que distraiga o interrumpa el sistema de navegación.
El diseño claro, legible e inteligente es hermoso. Participa en competencias abiertas como CSS Table Gallery, CSS Zen Garden, Comment Design Showcase,Typography for headlines, Form Assembly Garden, sIFR Beauty Showcase.
3. Universalidad
Tu página Web puede tener un aspecto en tu pantalla y otro diferente para los usuarios que la vean con distintos navegadores Web que, por lo general, se encuentran en sistemas operativos diferentes. Se recomienda utilizar un diseño que sea legible en todas o en la mayoría de las circunstancias.
Recuerda que hoy en día es muy común el uso de dispositivos móviles, y tu web debe adecuarse también a estos navegadores.
4. Respeta a los usuarios
El exceso de publicidad y/o forzar a los usuarios para leer contenidos es no respetarlos. No ponga publicidad o en todo caso, colocala de una manera sencilla.
Respeta los estándares, pues de esta manera esta respetando la navegación del cliente.
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
Otros plugins para chrome: http://sixrevisions.com/tools/chrome-extensions-developers-designers/