Html Con Herramientas Libres

Desarrollo de HTML con Herramientas Libres

Alma Fernández - www.webmasterlibre.comII Jornadas de Programación Web con Software Libre

Ourense, 24-junio-2008

• Servidores

• Lenguajes de programación

• Frameworks y librerías

• CMS y scripts

• Elementos gráficos y artísticos

• Contenidos

• Navegadores

El Software Libre y la Web

Herramientas libres para desarrollo web

Tipos de herramientas

• Editores WYSIWYG

• Editores de texto plano con resaltado de sintáxis

• Editores de HTML

• Editores de CSS

• Entornos integrados de desarrollo (IDEs)

Editores de Texto(con resaltado de sintaxis)

• Son ligeros, funcionan en ordenadores con pocos recursos y cargan rápido

• El resaltado de sintaxis hace el código más legible y nos ayuda a detectar problemas.

• Requieren conocimiento de HTML y CSS

Notepad++

Windows

Mac OS

Smultron

Geany

Linux (Gnome)

Linux (KDE)

Kate

Editores de HTML

• Autocompletado de código

• Posibilidad de usar snippets y plantillas

• Algunas capacidades de gestión de proyectos

• Utilidades adicionales (validadores de código, ayudas para el formateo, referencias...)

Screem

Linux (Gnom

e)

Linux (KDE)

Quanta Plus

WYSIWYG

• Crear una página web simple es muy fácil

• El código no siempre es el mejor y, en estructuras complejas, se complica bastante

• Ideales para crear wireframes y prototipos

• Para webs en producción es mejor trabajar en vista de código

Amaya

Multi

Texto

KompoZer

Editores de CSS

• Enfocados al diseñador, nos facilitan la tarea con asistentes para generar nuestro código

• Disponen de una completa referencia de propiedades de CSS

• Capacidades de autocompletado de CSS avanzadas

CSSed

Multi

Entornos Integrados de Desarrollo

(IDEs)

• Nos proveen de un completo juego de herramientas de desarrollo

• Tienen capacidades avanzadas de gestión de proyectos

• Centralizan nuestro desarrollo en una sola aplicación

Aptana

Multi

¿Cómo escoger la herramienta adecuada?

• Mejora tu productividad

• Te permite hacer lo que necesitas de forma sencilla

• Se adapta a tu forma de trabajar

Validación

Validar nuestro código• Para asegurarnos de que es compatible con

los principales navegadores

• Para comprobar que puede ser accedido por agentes de usuario para personas con discapacidad

• Para que nuestros sitios puedan navegarse desde diversos dispositivos

• Para garantizar que nuestros sitios seguirán pudiendo ser visualizados por los navegadores del futuro

Web Developer Toolbar

• Es una extensión para Firefox que nos proporciona gran cantidad de herramientas para testear nuestros sitios

• Validación de código

• Verificación de accesibilidad

Tools:

- HTML y CSS contra la herramienta del W3C

- Accesibilidad contra las normas de la WAI y la Sección 508

CSS:- Deshabilitamos los estilos para comprobar que la página sigue siendo navegable.

- Comprobamos los estilos alternativos (impresión, handheld...)

- Podemos ver el CSS, editarlo...

Disable:Deshabilitamos el Java y el

Javascript para asegurarnos de que el sitio conserva toda la

funcionalidad para usuarios que navegan sin scripts

Images:- Buscamos imágenes sin atributo alt, con el alt vacío o con un texto poco relevante.

- Si encontramos imágenes decorativas las pasamos a la hoja de estilos.

- Deshabilitamos las imágenes para comprobar que se mantiene el significado sin ellas

Outline

- Resalta elementos de una página (enlaces internos, externos, elementos de bloque, tablas...)

- Nos permite encontrar elementos obsoletos (deprecated) o problemas en el marcado

Information

- Comprobamos las abreviaturas y los acrónimos.

- Visualizamos las Accesskeys

- Nos aseguramos de que la tabulación sigue un orden lógico

Resize:

Comprobamos que nuestro sitio se visualiza bien en diversas resoluciones de pantalla.

Forms:

Comprobamos que las etiquetas se asocian a los campos de nuestros formularios de forma tanto implícita como explícita.

Miscellaneous:- Otras herramientas como una lupa, una regla o la posibilidad de insertar guias.

- Emulación de renderizado en dispositivos de “pantalla pequeña”

-Linearización de páginas