Download - Html Con Herramientas Libres
![Page 1: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/1.jpg)
Desarrollo de HTML con Herramientas Libres
Alma Fernández - www.webmasterlibre.comII Jornadas de Programación Web con Software Libre
Ourense, 24-junio-2008
![Page 2: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/2.jpg)
• 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
![Page 3: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/3.jpg)
Herramientas libres para desarrollo web
![Page 4: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/4.jpg)
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)
![Page 5: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/5.jpg)
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
![Page 6: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/6.jpg)
Notepad++
Windows
Mac OS
Smultron
![Page 7: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/7.jpg)
Geany
Linux (Gnome)
Linux (KDE)
Kate
![Page 8: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/8.jpg)
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...)
![Page 9: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/9.jpg)
Screem
Linux (Gnom
e)
Linux (KDE)
Quanta Plus
![Page 10: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/10.jpg)
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
![Page 11: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/11.jpg)
Amaya
Multi
Texto
KompoZer
![Page 12: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/12.jpg)
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
![Page 13: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/13.jpg)
CSSed
Multi
![Page 14: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/14.jpg)
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
![Page 15: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/15.jpg)
Aptana
Multi
![Page 16: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/16.jpg)
¿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
![Page 17: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/17.jpg)
Validación
![Page 18: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/18.jpg)
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
![Page 19: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/19.jpg)
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
![Page 20: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/20.jpg)
Tools:
- HTML y CSS contra la herramienta del W3C
- Accesibilidad contra las normas de la WAI y la Sección 508
![Page 21: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/21.jpg)
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...
![Page 22: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/22.jpg)
Disable:Deshabilitamos el Java y el
Javascript para asegurarnos de que el sitio conserva toda la
funcionalidad para usuarios que navegan sin scripts
![Page 23: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/23.jpg)
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
![Page 24: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/24.jpg)
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
![Page 25: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/25.jpg)
Information
- Comprobamos las abreviaturas y los acrónimos.
- Visualizamos las Accesskeys
- Nos aseguramos de que la tabulación sigue un orden lógico
![Page 26: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/26.jpg)
Resize:
Comprobamos que nuestro sitio se visualiza bien en diversas resoluciones de pantalla.
![Page 27: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/27.jpg)
Forms:
Comprobamos que las etiquetas se asocian a los campos de nuestros formularios de forma tanto implícita como explícita.
![Page 28: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/28.jpg)
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
![Page 29: Html Con Herramientas Libres](https://reader033.vdocuments.co/reader033/viewer/2022052507/55857093d8b42a4c2c8b4a57/html5/thumbnails/29.jpg)