html con herramientas libres
Post on 20-Jun-2015
2.490 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related