SlideShare una empresa de Scribd logo
1 de 5
Descargar para leer sin conexión
Tema 9. Creación de páginas web Informática 4ºESO
Colexio Nosa Señora de Lourdes
TEMA 9. CREACIÓN DE PÁGINAS WEB
1. ¿CÓMO SE CREA UNA PÁGINA WEB?
Una página web es un documento con información de interés adaptada para la World Wide Web a la
que se puede acceder mediante un navegador de Internet que permite visualizarla.
Para facilitar su elaboración han surgido programas de diseño que disponen de mecanismos para
generar webs de diferentes grados de complejidad, entre los que destacan:
- Nvu: editor gratuito de páginas web que se basa en el Mozilla Composer (otro editor gratuito)
pero trabaja de forma más independiente e incorpora nuevas aplicaciones que permiten la
creación de páginas más atractivas visualmente.
- FontPage: editor web creado por Microsoft que permite crear páginas web de forma sencilla,
aunque presenta el inconveniente de que introduce funciones de código propias de Microsoft que
no funcionan en todos los servidores, lo que provoca que, después de crear una página web y
publicarla, determinadas acciones que se han configurado no funcionen.
2. PROGRAMACIÓN HTML
El código que define y constituye las páginas web es el denominado HTML (Hiper Text Markus
Language), que se trata de un código basado en etiquetas para identificar cada elemento del
documento.
Una página HTML se compone básicamente de tres partes:
- Cabecera tipo del documento, que se usa para conocer la versión que se está usando. Esta
información no se muestra en el navegador.
- Cabecera del documento, que informa sobre el mismo, como puede ser el formato utilizado en
las diferentes secciones. Tampoco es visible para el usuario.
- Cuerpo del documento, que es la parte principal del documento y que el usuario visualiza en el
navegador.
Tema 9. Creación de páginas web Informática 4ºESO
Colexio Nosa Señora de Lourdes
PRINCIPALES ETIQUETAS DE HTML
Las etiquetas HTML, también denominadas tags, permiten especificar enlaces, imágenes, e-mails,
alinear texto, tipo de letra, color, tamaño de letra, listas, etc. Pueden ser escritas en mayúsculas o
minúsculas. Algunas de las etiquetas más usadas aparecen en la tabla de la fotocopia adjunta.
3. ADMINISTRACIÓN Y GESTIÓN DE UN SITIO WEB
Un sitio web es un conjunto de páginas web relacionadas que están ubicadas en un ordenador que
actúa de servidor y en el que se ha instalado el software necesario para permitir el acceso a través de
internet.
Las funciones de administración de sitios web se basan en:
- La edición y modificación de las páginas web pertenecientes al sitio web.
- La instalación en el servidor de las páginas web.
- La implantación del software apropiado que permita la correcta visualización en cualquier
navegador de internet.
Para poder transferir las páginas web del ordenador donde se crean y modifican hasta el servidor
que permite su visualización en Internet se usan programas de transferencia de ficheros. Un
ejemplo de dichos programas es miFiles, cuya apariencia es:
Un entorno integrado de administración y edición es una aplicación informática que no solo permite la
creación de páginas web, sino que también las incluye en la gestión del sitio web. Nvu es un ejemplo de
este tipo de entorno, tal y como puede observarse en la siguiente figura:
Ventana con las
carpetas del ordenador
Ventana del sitio web
donde se transfieren
los ficheros
Ventana con los
elementos que
contiene la capeta
seleccionada en la
ventana superior
Menú de selección de
la conexión para la
transferencia
Tema 9. Creación de páginas web Informática 4ºESO
Colexio Nosa Señora de Lourdes
4. INSERCIÓN DE ELEMENTOS MULTIMEDIA EN LA WEB
Al igual que en los otros tipos de documentos de texto o presentaciones, las págines web también
constan de elementos gráficos, estáticos o móviles. Los elementos básicos que se insertan en las
páginas web son imágenes, tablas, formularios, enlaces y anclas o(una ancla o referencia es un vínculo o
enlace que hace referencia a una posición o sitio dentro de la misma página web, muy similar al link o el
enlace). Nvu permite insertar diferentes tipos de elementos por medio del menú insert o bien mediante
la barra de herramientas de redacción o edición:
También es posible la inserción de vídeos u otros ficheros multimedia que se puede llevar a cabo de
tres formas:
- A través de una imagen sobre la que el usuario pincha para seguir el enlace al vídeo.
- Mediante un enlace sin imagen que conduce al vídeo.
- Utilizando código HTML, de manera que el vídeo se inserta directamente en la página web.
5. NORMATIVA DE ACCESIBILIDAD WEB
La accesibilidad web es el grado con el que los contenidos puedes ser utilizados o visitados por todas las
personas, independientemente de sus posibles discapacidades (físicas, intelectuales o técnicas). Se han
definido una serie de normas, así como de recomendaciones, para guiar a los diseñadores y
desarrolladores de páginas web en la creación de webs accesibles. Las normas han sido definidas
basándose en las recomendaciones del W3C (World Wide Web Consortium) que es un consorcio
Acciones sobre los
ficheros y carpetas del
sitio web
Ficheros y carpetas del
sitio web
Configuración de la
conexión al sitio web
Edición de páginas del
sitio
Administración de sitios
web
Publicación o
transferencia de
páginas web
Tema 9. Creación de páginas web Informática 4ºESO
Colexio Nosa Señora de Lourdes
internacional que trabaja para definir estándares o pautas para conseguir el máximo rendimiento de la
web. Dentro de este organismo existe una rama que se encarga de la accesibilidad: WAI (Web
Accessibility).Esta rama es la encargada de definir las denominadas WCAG (Web Content Accessbility
Guidelines), que son las estrategias, pautas y recursos para hacer la web accesible a personas con
discapacidad.
PAUTAS DE ACCESIBILIDAD
Para conocer si una web es accesible se han definidos unos puntos de verificación que permiten
comprobar paso a paso el cumplimiento de las pautas. A cada punto de verificación se le asigna una
prioridad:
- Prioridad 1. En este nivel se definen aquellos aspectos que un desarrollador web tiene que cumplir
para que todos los usuarios puedan acceder a la información del sitio web. Son pautas que tienen
relación con el uso de las alternativas en todos aquellos elementos que pueden no ser accesibles
por algunos grupos de usuarios. Por ej. si la página si la página incluye un vídeo con sonido es
importante también incluir en forma textual su contenido para aquellos usuarios que no puedan
escuchar el sonido.
- Prioridad 2. En este nivel se definen aquellos aspectos que un desarrollador web tiene que cumplir
para que sea más fácil el acceso a la información para ciertos grupos de usuarios. En general,
tienen que ver con realizar una presentación de contenidos comprensibles para todos los públicos;
por ej., si se insertan textos muy extensos habrá usuarios que tengan problemas para captar todo
el contenido y pueden provocar cansancio. En su lugar, es mejor dividirlos en porciones más
simples, de forma que ese facilite su lectura y comprensión.
- Prioridad 3. En este nivel se definen aquellos aspectos que un desarrollador web tiene que cumplir
para que sea más fácil el manejo de las páginas web; por ej., si el sitio web dispone de numerosas
secciones, es importante disponer de un índice o barra de navegación en todas las páginas para
que sea sencillo desplazarse por ellas.
En función de los puntos de verificación y prioridades, se establecen unos niveles de conformidad que
permiten conocer el grado de cumplimiento de las pautas de webs accesibles. Estos niveles son:
- Nivel de conformidad “A”: todos los puntos de verificación de prioridad 1 se cumplen.
- Nivel de conformidad “doble A” (AA): todos los puntos de verificación de prioridad 1 y 2 se
cumplen.
- Nivel de conformidad “triple A”(AAA): todos los puntos de verificación de prioridad 1, 2 y 3 se
cumplen.
La empresa española de certificación AENOR expide certificados de accesibilidad de modo que los
usuarios puedan conocer qué páginas están adaptadas y cuáles no.
6. DISEÑO DE PÁGINAS WEB ACCESIBLES
Para el diseño de páginas web accesibles algunas consideraciones básicas a tener en cuenta son:
- Imágenes y animaciones. Si se ha incluido una imagen hay que asociarle un texto equivalente
para aquellos casos en los que no es posible visualizar imágenes.
- Mapas de imagen. Hay que usar elementos visuales, como una mano o un texto resaltado, para
que se sepa cuáles son las zonas activas.
- Multimedia. Se deben proporcionar subtítulos y transcripción del sonido, así como la
descripción del vídeo, para personas con discapacidades auditivas o de visión.
Tema 9. Creación de páginas web Informática 4ºESO
Colexio Nosa Señora de Lourdes
- Enlaces de hipertexto. Se debe usar texto que tenga relación con el enlace y que pueda ser
entendido en todos los contextos. Por ej, evitar “Pinchar aquí”, en su lugar usar una frase que
identifique el contenido al que se accede.
- Organización de las páginas. Se deberán usar encabezados, listas y estructuras consistentes, es
decir, relacionados con los contenidos que se presentan. Se deben utilizar CSS (hojas de estilo
que permiten definir colores, tipos de letra, fondos, etc.) para la definición d eelementos
estéticos de visualización de la página, siempre que sea posible.
- Figuras y diagramas. Se deben describir brevemente en la página o usar algún vínculo que
permita la descripción detallada de los mismos.
- Elementos dinámicos (programas). Se debe ofrecer contenidos alternativos si las funciones
nuevas no son accesibles (scripts, applets, plug-ins) Por ej. si se hace una mejora en un
programa que no es soportada por todos los navegadores hay que prever otra acción para
dichos casos.
- Marcos. Se debe usar la el elemento noframes, etiqueta HTML para especificar qué se debe
mostrar si el navegador no soporta los marcos.
- Tablas. Se debe facilitar la lectura línea a línea y resumir la información.
- Revisar el trabajo. Se debe verificar que realmente la página es accesible usando las
herramientas, puntos de comprobación y pautas de accesibilidad de WCAG.
HERRAMIENTAS DE COMPROBACIÓN DE ACCESIBILIDAD
Una herramienta de comprobación de accesibilidad es aquella que permite supervisar que se cumplen
todas las pautas y recomendaciones especificadas por W3C. Un ej. es la herramienta TAW (Test de
Accesibilidad Web) que permite realizar comprobaciones on-line (sin instalar el programa en el
ordenador).

Más contenido relacionado

La actualidad más candente

Presentación diana molina_wikisemanticaso
Presentación diana molina_wikisemanticasoPresentación diana molina_wikisemanticaso
Presentación diana molina_wikisemanticaso
Diana Molina Sandoval
 
Colegio verbo divino
Colegio verbo divinoColegio verbo divino
Colegio verbo divino
Karen Bonilla
 
Usabilidad Web 2.0
Usabilidad Web 2.0Usabilidad Web 2.0
Usabilidad Web 2.0
dwebslide
 
Gestion de contenidos, wordpress
Gestion de contenidos, wordpressGestion de contenidos, wordpress
Gestion de contenidos, wordpress
EvelynCaRballo
 

La actualidad más candente (17)

Red coorporativa
Red coorporativaRed coorporativa
Red coorporativa
 
Presentación diana molina_wikisemanticaso
Presentación diana molina_wikisemanticasoPresentación diana molina_wikisemanticaso
Presentación diana molina_wikisemanticaso
 
Clase 6
Clase 6Clase 6
Clase 6
 
Clase6
Clase6Clase6
Clase6
 
Curso Joomla
Curso JoomlaCurso Joomla
Curso Joomla
 
Colegio verbo divino
Colegio verbo divinoColegio verbo divino
Colegio verbo divino
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Tarea 3
Tarea 3Tarea 3
Tarea 3
 
Joomla la web_en_el_entorno_educativo_completo
Joomla la web_en_el_entorno_educativo_completoJoomla la web_en_el_entorno_educativo_completo
Joomla la web_en_el_entorno_educativo_completo
 
Los gestores de contenido
Los gestores de contenidoLos gestores de contenido
Los gestores de contenido
 
Accesibilidad en la web 2.0
Accesibilidad en la web 2.0Accesibilidad en la web 2.0
Accesibilidad en la web 2.0
 
Usabilidad Web 2.0
Usabilidad Web 2.0Usabilidad Web 2.0
Usabilidad Web 2.0
 
Clase 6 | CMS Gestores de Contenido - Servidor local - XAMPP - Subir una pági...
Clase 6 | CMS Gestores de Contenido - Servidor local - XAMPP - Subir una pági...Clase 6 | CMS Gestores de Contenido - Servidor local - XAMPP - Subir una pági...
Clase 6 | CMS Gestores de Contenido - Servidor local - XAMPP - Subir una pági...
 
Gestion de contenidos, wordpress
Gestion de contenidos, wordpressGestion de contenidos, wordpress
Gestion de contenidos, wordpress
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
Los cms
Los cmsLos cms
Los cms
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 

Destacado

Tema 3
Tema 3Tema 3
Tema 3
mylher
 
SEMANA 7 RIESGO DE CRÉDITO
SEMANA 7 RIESGO DE CRÉDITO SEMANA 7 RIESGO DE CRÉDITO
SEMANA 7 RIESGO DE CRÉDITO
KATHIAST
 
Evolución del modelo atómico
Evolución del modelo atómicoEvolución del modelo atómico
Evolución del modelo atómico
Elard Cruz Miranda
 
Criminología infantil
Criminología infantilCriminología infantil
Criminología infantil
Wael Hikal
 
Guia d'aplicacio pels docents
Guia d'aplicacio pels docentsGuia d'aplicacio pels docents
Guia d'aplicacio pels docents
Antonia_Sanchez
 
Utilidades maléficas de la ciencia
Utilidades maléficas de la cienciaUtilidades maléficas de la ciencia
Utilidades maléficas de la ciencia
guillermo-navarro
 
Colegio nacional nicolás esguerra 3
Colegio nacional nicolás esguerra 3Colegio nacional nicolás esguerra 3
Colegio nacional nicolás esguerra 3
Daniel Ruiz
 
Trabajo extra
Trabajo extraTrabajo extra
Trabajo extra
mylher
 
Liseth merino primero de bachillerato c
Liseth merino primero de bachillerato cLiseth merino primero de bachillerato c
Liseth merino primero de bachillerato c
lishalm
 
La criminología y la obra de los miserable
La criminología y la obra de los miserableLa criminología y la obra de los miserable
La criminología y la obra de los miserable
Wael Hikal
 
Introducción a la tecnología educativa
Introducción a la tecnología educativaIntroducción a la tecnología educativa
Introducción a la tecnología educativa
Guadalupe Perez
 

Destacado (20)

Tema 3
Tema 3Tema 3
Tema 3
 
SEMANA 7 RIESGO DE CRÉDITO
SEMANA 7 RIESGO DE CRÉDITO SEMANA 7 RIESGO DE CRÉDITO
SEMANA 7 RIESGO DE CRÉDITO
 
Sensirializate
SensirializateSensirializate
Sensirializate
 
tema 1
tema 1tema 1
tema 1
 
Evolución del modelo atómico
Evolución del modelo atómicoEvolución del modelo atómico
Evolución del modelo atómico
 
Tabare
TabareTabare
Tabare
 
Criminología infantil
Criminología infantilCriminología infantil
Criminología infantil
 
Guia d'aplicacio pels docents
Guia d'aplicacio pels docentsGuia d'aplicacio pels docents
Guia d'aplicacio pels docents
 
Utilidades maléficas de la ciencia
Utilidades maléficas de la cienciaUtilidades maléficas de la ciencia
Utilidades maléficas de la ciencia
 
Recorrido
RecorridoRecorrido
Recorrido
 
Colegio nacional nicolás esguerra 3
Colegio nacional nicolás esguerra 3Colegio nacional nicolás esguerra 3
Colegio nacional nicolás esguerra 3
 
El quijote
El quijoteEl quijote
El quijote
 
Examenes de 10 11 grado
Examenes de 10 11 gradoExamenes de 10 11 grado
Examenes de 10 11 grado
 
Trabajo extra
Trabajo extraTrabajo extra
Trabajo extra
 
Liseth merino primero de bachillerato c
Liseth merino primero de bachillerato cLiseth merino primero de bachillerato c
Liseth merino primero de bachillerato c
 
Tutorial de-slideshare Santiago Lopez
Tutorial de-slideshare Santiago LopezTutorial de-slideshare Santiago Lopez
Tutorial de-slideshare Santiago Lopez
 
Reseña de Software Libre
Reseña de Software Libre Reseña de Software Libre
Reseña de Software Libre
 
La criminología y la obra de los miserable
La criminología y la obra de los miserableLa criminología y la obra de los miserable
La criminología y la obra de los miserable
 
Edificamos futuro
Edificamos  futuroEdificamos  futuro
Edificamos futuro
 
Introducción a la tecnología educativa
Introducción a la tecnología educativaIntroducción a la tecnología educativa
Introducción a la tecnología educativa
 

Similar a Tema 9. creación de paginas web

Estandarización de paginas web
Estandarización de paginas webEstandarización de paginas web
Estandarización de paginas web
Luis Álamo
 
Teoria isabel
Teoria isabelTeoria isabel
Teoria isabel
ISABELRJ
 
Navegadores, buscadores y paginas de internet
Navegadores, buscadores y paginas de internetNavegadores, buscadores y paginas de internet
Navegadores, buscadores y paginas de internet
Andres
 

Similar a Tema 9. creación de paginas web (20)

Clase no 3
Clase no 3Clase no 3
Clase no 3
 
Estandarización de paginas web
Estandarización de paginas webEstandarización de paginas web
Estandarización de paginas web
 
pagina web
pagina webpagina web
pagina web
 
APUNTES
APUNTESAPUNTES
APUNTES
 
PAGINA WEB
PAGINA WEBPAGINA WEB
PAGINA WEB
 
Presentacion herramientas
Presentacion herramientasPresentacion herramientas
Presentacion herramientas
 
Página Web Gilberto García
Página Web Gilberto GarcíaPágina Web Gilberto García
Página Web Gilberto García
 
presentacio Cms
presentacio Cmspresentacio Cms
presentacio Cms
 
Paginas web
Paginas webPaginas web
Paginas web
 
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
 
Centro educacional perlas de la sierra
Centro educacional perlas de la sierraCentro educacional perlas de la sierra
Centro educacional perlas de la sierra
 
Yuscarlis.
Yuscarlis.Yuscarlis.
Yuscarlis.
 
Teoria isabel
Teoria isabelTeoria isabel
Teoria isabel
 
Recursos web 2.0
Recursos web 2.0Recursos web 2.0
Recursos web 2.0
 
Recursos web 2.0 - 1005 Jm
Recursos web 2.0 - 1005 JmRecursos web 2.0 - 1005 Jm
Recursos web 2.0 - 1005 Jm
 
República bolivariana de venezuela
República bolivariana de venezuelaRepública bolivariana de venezuela
República bolivariana de venezuela
 
Navegadores, buscadores y paginas de internet
Navegadores, buscadores y paginas de internetNavegadores, buscadores y paginas de internet
Navegadores, buscadores y paginas de internet
 
El internet
El internetEl internet
El internet
 
paginas web
paginas web paginas web
paginas web
 
Páginas Web
Páginas WebPáginas Web
Páginas Web
 

Más de mariavarey

Recopilacion examenes
Recopilacion examenesRecopilacion examenes
Recopilacion examenes
mariavarey
 
Parcial 2 3ev fy_q4
Parcial 2 3ev fy_q4Parcial 2 3ev fy_q4
Parcial 2 3ev fy_q4
mariavarey
 
Trabajo verano 4 eso
Trabajo verano 4 esoTrabajo verano 4 eso
Trabajo verano 4 eso
mariavarey
 
Trabajo de verano 1 bachillerato
Trabajo de verano 1 bachilleratoTrabajo de verano 1 bachillerato
Trabajo de verano 1 bachillerato
mariavarey
 
Examen recuperación 3º evaluación
Examen recuperación 3º evaluaciónExamen recuperación 3º evaluación
Examen recuperación 3º evaluación
mariavarey
 
Examen final3º evaluación completo
Examen final3º evaluación completoExamen final3º evaluación completo
Examen final3º evaluación completo
mariavarey
 
Examen final3º evaluación completo
Examen final3º evaluación completoExamen final3º evaluación completo
Examen final3º evaluación completo
mariavarey
 
Trabajos electricidad
Trabajos electricidadTrabajos electricidad
Trabajos electricidad
mariavarey
 
Repaso final 3º evaluación soluciones
Repaso final 3º evaluación solucionesRepaso final 3º evaluación soluciones
Repaso final 3º evaluación soluciones
mariavarey
 
Repaso final 3º evaluación soluciones
Repaso final 3º evaluación solucionesRepaso final 3º evaluación soluciones
Repaso final 3º evaluación soluciones
mariavarey
 
Examen recuperacion final
Examen recuperacion finalExamen recuperacion final
Examen recuperacion final
mariavarey
 
Septiembre 2013 soluciones
Septiembre 2013 solucionesSeptiembre 2013 soluciones
Septiembre 2013 soluciones
mariavarey
 
Junio 2013 soluciones
Junio 2013 solucionesJunio 2013 soluciones
Junio 2013 soluciones
mariavarey
 
Septiembre 2013 soluciones
Septiembre 2013 solucionesSeptiembre 2013 soluciones
Septiembre 2013 soluciones
mariavarey
 
Septiembre 2013
Septiembre 2013Septiembre 2013
Septiembre 2013
mariavarey
 
Junio 2013 soluciones
Junio 2013 solucionesJunio 2013 soluciones
Junio 2013 soluciones
mariavarey
 
Modelo 2013 soluc
Modelo 2013 solucModelo 2013 soluc
Modelo 2013 soluc
mariavarey
 

Más de mariavarey (20)

Recopilacion examenes
Recopilacion examenesRecopilacion examenes
Recopilacion examenes
 
Parcial 2 3ev fy_q4
Parcial 2 3ev fy_q4Parcial 2 3ev fy_q4
Parcial 2 3ev fy_q4
 
Trabajo verano 4 eso
Trabajo verano 4 esoTrabajo verano 4 eso
Trabajo verano 4 eso
 
Trabajo de verano 1 bachillerato
Trabajo de verano 1 bachilleratoTrabajo de verano 1 bachillerato
Trabajo de verano 1 bachillerato
 
Examen recuperación 3º evaluación
Examen recuperación 3º evaluaciónExamen recuperación 3º evaluación
Examen recuperación 3º evaluación
 
Examen final3º evaluación completo
Examen final3º evaluación completoExamen final3º evaluación completo
Examen final3º evaluación completo
 
Examen final3º evaluación completo
Examen final3º evaluación completoExamen final3º evaluación completo
Examen final3º evaluación completo
 
Trabajos electricidad
Trabajos electricidadTrabajos electricidad
Trabajos electricidad
 
Repaso final 3º evaluación soluciones
Repaso final 3º evaluación solucionesRepaso final 3º evaluación soluciones
Repaso final 3º evaluación soluciones
 
Repaso final 3º evaluación soluciones
Repaso final 3º evaluación solucionesRepaso final 3º evaluación soluciones
Repaso final 3º evaluación soluciones
 
Examen recuperacion final
Examen recuperacion finalExamen recuperacion final
Examen recuperacion final
 
Septiembre 2013 soluciones
Septiembre 2013 solucionesSeptiembre 2013 soluciones
Septiembre 2013 soluciones
 
Junio 2013 soluciones
Junio 2013 solucionesJunio 2013 soluciones
Junio 2013 soluciones
 
Junio 2013
Junio 2013Junio 2013
Junio 2013
 
Septiembre 2013 soluciones
Septiembre 2013 solucionesSeptiembre 2013 soluciones
Septiembre 2013 soluciones
 
Septiembre 2013
Septiembre 2013Septiembre 2013
Septiembre 2013
 
Junio 2013 soluciones
Junio 2013 solucionesJunio 2013 soluciones
Junio 2013 soluciones
 
Junio 2013
Junio 2013Junio 2013
Junio 2013
 
Modelo 2013 soluc
Modelo 2013 solucModelo 2013 soluc
Modelo 2013 soluc
 
Modelo 2013
Modelo 2013Modelo 2013
Modelo 2013
 

Tema 9. creación de paginas web

  • 1. Tema 9. Creación de páginas web Informática 4ºESO Colexio Nosa Señora de Lourdes TEMA 9. CREACIÓN DE PÁGINAS WEB 1. ¿CÓMO SE CREA UNA PÁGINA WEB? Una página web es un documento con información de interés adaptada para la World Wide Web a la que se puede acceder mediante un navegador de Internet que permite visualizarla. Para facilitar su elaboración han surgido programas de diseño que disponen de mecanismos para generar webs de diferentes grados de complejidad, entre los que destacan: - Nvu: editor gratuito de páginas web que se basa en el Mozilla Composer (otro editor gratuito) pero trabaja de forma más independiente e incorpora nuevas aplicaciones que permiten la creación de páginas más atractivas visualmente. - FontPage: editor web creado por Microsoft que permite crear páginas web de forma sencilla, aunque presenta el inconveniente de que introduce funciones de código propias de Microsoft que no funcionan en todos los servidores, lo que provoca que, después de crear una página web y publicarla, determinadas acciones que se han configurado no funcionen. 2. PROGRAMACIÓN HTML El código que define y constituye las páginas web es el denominado HTML (Hiper Text Markus Language), que se trata de un código basado en etiquetas para identificar cada elemento del documento. Una página HTML se compone básicamente de tres partes: - Cabecera tipo del documento, que se usa para conocer la versión que se está usando. Esta información no se muestra en el navegador. - Cabecera del documento, que informa sobre el mismo, como puede ser el formato utilizado en las diferentes secciones. Tampoco es visible para el usuario. - Cuerpo del documento, que es la parte principal del documento y que el usuario visualiza en el navegador.
  • 2. Tema 9. Creación de páginas web Informática 4ºESO Colexio Nosa Señora de Lourdes PRINCIPALES ETIQUETAS DE HTML Las etiquetas HTML, también denominadas tags, permiten especificar enlaces, imágenes, e-mails, alinear texto, tipo de letra, color, tamaño de letra, listas, etc. Pueden ser escritas en mayúsculas o minúsculas. Algunas de las etiquetas más usadas aparecen en la tabla de la fotocopia adjunta. 3. ADMINISTRACIÓN Y GESTIÓN DE UN SITIO WEB Un sitio web es un conjunto de páginas web relacionadas que están ubicadas en un ordenador que actúa de servidor y en el que se ha instalado el software necesario para permitir el acceso a través de internet. Las funciones de administración de sitios web se basan en: - La edición y modificación de las páginas web pertenecientes al sitio web. - La instalación en el servidor de las páginas web. - La implantación del software apropiado que permita la correcta visualización en cualquier navegador de internet. Para poder transferir las páginas web del ordenador donde se crean y modifican hasta el servidor que permite su visualización en Internet se usan programas de transferencia de ficheros. Un ejemplo de dichos programas es miFiles, cuya apariencia es: Un entorno integrado de administración y edición es una aplicación informática que no solo permite la creación de páginas web, sino que también las incluye en la gestión del sitio web. Nvu es un ejemplo de este tipo de entorno, tal y como puede observarse en la siguiente figura: Ventana con las carpetas del ordenador Ventana del sitio web donde se transfieren los ficheros Ventana con los elementos que contiene la capeta seleccionada en la ventana superior Menú de selección de la conexión para la transferencia
  • 3. Tema 9. Creación de páginas web Informática 4ºESO Colexio Nosa Señora de Lourdes 4. INSERCIÓN DE ELEMENTOS MULTIMEDIA EN LA WEB Al igual que en los otros tipos de documentos de texto o presentaciones, las págines web también constan de elementos gráficos, estáticos o móviles. Los elementos básicos que se insertan en las páginas web son imágenes, tablas, formularios, enlaces y anclas o(una ancla o referencia es un vínculo o enlace que hace referencia a una posición o sitio dentro de la misma página web, muy similar al link o el enlace). Nvu permite insertar diferentes tipos de elementos por medio del menú insert o bien mediante la barra de herramientas de redacción o edición: También es posible la inserción de vídeos u otros ficheros multimedia que se puede llevar a cabo de tres formas: - A través de una imagen sobre la que el usuario pincha para seguir el enlace al vídeo. - Mediante un enlace sin imagen que conduce al vídeo. - Utilizando código HTML, de manera que el vídeo se inserta directamente en la página web. 5. NORMATIVA DE ACCESIBILIDAD WEB La accesibilidad web es el grado con el que los contenidos puedes ser utilizados o visitados por todas las personas, independientemente de sus posibles discapacidades (físicas, intelectuales o técnicas). Se han definido una serie de normas, así como de recomendaciones, para guiar a los diseñadores y desarrolladores de páginas web en la creación de webs accesibles. Las normas han sido definidas basándose en las recomendaciones del W3C (World Wide Web Consortium) que es un consorcio Acciones sobre los ficheros y carpetas del sitio web Ficheros y carpetas del sitio web Configuración de la conexión al sitio web Edición de páginas del sitio Administración de sitios web Publicación o transferencia de páginas web
  • 4. Tema 9. Creación de páginas web Informática 4ºESO Colexio Nosa Señora de Lourdes internacional que trabaja para definir estándares o pautas para conseguir el máximo rendimiento de la web. Dentro de este organismo existe una rama que se encarga de la accesibilidad: WAI (Web Accessibility).Esta rama es la encargada de definir las denominadas WCAG (Web Content Accessbility Guidelines), que son las estrategias, pautas y recursos para hacer la web accesible a personas con discapacidad. PAUTAS DE ACCESIBILIDAD Para conocer si una web es accesible se han definidos unos puntos de verificación que permiten comprobar paso a paso el cumplimiento de las pautas. A cada punto de verificación se le asigna una prioridad: - Prioridad 1. En este nivel se definen aquellos aspectos que un desarrollador web tiene que cumplir para que todos los usuarios puedan acceder a la información del sitio web. Son pautas que tienen relación con el uso de las alternativas en todos aquellos elementos que pueden no ser accesibles por algunos grupos de usuarios. Por ej. si la página si la página incluye un vídeo con sonido es importante también incluir en forma textual su contenido para aquellos usuarios que no puedan escuchar el sonido. - Prioridad 2. En este nivel se definen aquellos aspectos que un desarrollador web tiene que cumplir para que sea más fácil el acceso a la información para ciertos grupos de usuarios. En general, tienen que ver con realizar una presentación de contenidos comprensibles para todos los públicos; por ej., si se insertan textos muy extensos habrá usuarios que tengan problemas para captar todo el contenido y pueden provocar cansancio. En su lugar, es mejor dividirlos en porciones más simples, de forma que ese facilite su lectura y comprensión. - Prioridad 3. En este nivel se definen aquellos aspectos que un desarrollador web tiene que cumplir para que sea más fácil el manejo de las páginas web; por ej., si el sitio web dispone de numerosas secciones, es importante disponer de un índice o barra de navegación en todas las páginas para que sea sencillo desplazarse por ellas. En función de los puntos de verificación y prioridades, se establecen unos niveles de conformidad que permiten conocer el grado de cumplimiento de las pautas de webs accesibles. Estos niveles son: - Nivel de conformidad “A”: todos los puntos de verificación de prioridad 1 se cumplen. - Nivel de conformidad “doble A” (AA): todos los puntos de verificación de prioridad 1 y 2 se cumplen. - Nivel de conformidad “triple A”(AAA): todos los puntos de verificación de prioridad 1, 2 y 3 se cumplen. La empresa española de certificación AENOR expide certificados de accesibilidad de modo que los usuarios puedan conocer qué páginas están adaptadas y cuáles no. 6. DISEÑO DE PÁGINAS WEB ACCESIBLES Para el diseño de páginas web accesibles algunas consideraciones básicas a tener en cuenta son: - Imágenes y animaciones. Si se ha incluido una imagen hay que asociarle un texto equivalente para aquellos casos en los que no es posible visualizar imágenes. - Mapas de imagen. Hay que usar elementos visuales, como una mano o un texto resaltado, para que se sepa cuáles son las zonas activas. - Multimedia. Se deben proporcionar subtítulos y transcripción del sonido, así como la descripción del vídeo, para personas con discapacidades auditivas o de visión.
  • 5. Tema 9. Creación de páginas web Informática 4ºESO Colexio Nosa Señora de Lourdes - Enlaces de hipertexto. Se debe usar texto que tenga relación con el enlace y que pueda ser entendido en todos los contextos. Por ej, evitar “Pinchar aquí”, en su lugar usar una frase que identifique el contenido al que se accede. - Organización de las páginas. Se deberán usar encabezados, listas y estructuras consistentes, es decir, relacionados con los contenidos que se presentan. Se deben utilizar CSS (hojas de estilo que permiten definir colores, tipos de letra, fondos, etc.) para la definición d eelementos estéticos de visualización de la página, siempre que sea posible. - Figuras y diagramas. Se deben describir brevemente en la página o usar algún vínculo que permita la descripción detallada de los mismos. - Elementos dinámicos (programas). Se debe ofrecer contenidos alternativos si las funciones nuevas no son accesibles (scripts, applets, plug-ins) Por ej. si se hace una mejora en un programa que no es soportada por todos los navegadores hay que prever otra acción para dichos casos. - Marcos. Se debe usar la el elemento noframes, etiqueta HTML para especificar qué se debe mostrar si el navegador no soporta los marcos. - Tablas. Se debe facilitar la lectura línea a línea y resumir la información. - Revisar el trabajo. Se debe verificar que realmente la página es accesible usando las herramientas, puntos de comprobación y pautas de accesibilidad de WCAG. HERRAMIENTAS DE COMPROBACIÓN DE ACCESIBILIDAD Una herramienta de comprobación de accesibilidad es aquella que permite supervisar que se cumplen todas las pautas y recomendaciones especificadas por W3C. Un ej. es la herramienta TAW (Test de Accesibilidad Web) que permite realizar comprobaciones on-line (sin instalar el programa en el ordenador).