Hace referencia a la construcción y representación de las páginas web donde se incluyen diferentes lenguajes y tecnologías para aplicaciones como son: HTML5, CSS, SVG, Ajax (“WebApps”).
Aquí también se incluye la información sobre cómo hacer páginas web accesibles para personas con algún tipo de discapacidad, cómo aplicar la internacionalización y el trabajo sobre dispositivos móviles.
Tomado de: https://www.w3c.es/estandares/
Aquí también se incluye la información sobre cómo hacer páginas web accesibles para personas con algún tipo de discapacidad, cómo aplicar la internacionalización y el trabajo sobre dispositivos móviles.
Tomado de: https://www.w3c.es/estandares/
El lenguaje HTML proporciona la estructura de la página, CSS el diseño (visual y sonoro), para una variedad de dispositivos. Junto con los gráficos y las secuencias de comandos, HTML y CSS son la base para crear páginas web y aplicaciones web.
HTML es el lenguaje para describir la estructura de las páginas web, brinda a los autores los medios para:
- Publicar documentos en línea con encabezados, texto, tablas, listas, fotos, etc.
- Recuperar información en línea a través de enlaces de hipertexto, con el clic de un botón.
- Diseñar formularios para realizar transacciones con servicios remotos, para usar en la búsqueda de información, hacer reservas, ordenar productos, etc.
- Incluir hojas de cálculo, videoclips, clips de sonido y otras aplicaciones directamente en sus documentos.
Con HTML, los autores describen la estructura de las páginas mediante el marcado. Los elementos del idioma etiquetan piezas de contenido como 'párrafo', 'lista', 'tabla', etc.
CSS es el lenguaje para describir la presentación de páginas web, incluidos los colores, el diseño y las fuentes. Permite adaptar la presentación a diferentes tipos de dispositivos, como pantallas grandes, pantallas pequeñas o impresoras.
CSS es independiente de HTML y se puede usar con cualquier lenguaje de marcado basado en XML.
La separación de HTML de CSS hace que sea más fácil mantener sitios, compartir hojas de estilo entre páginas y adaptar páginas a diferentes entornos. Esto se conoce como la separación de la estructura (o: contenido) de la presentación.
En resumen:
HTML y CSS son las tecnologías fundamentales para crear páginas web: HTML (html y xhtml) para estructura, CSS para estilo y diseño, incluidos WebFonts.
Para crear una página web se necesita un documento HTML utilizando tres elementos o tags principales que cualquier sitio Web usa: html, head y body.
En el pantallazo de prestashop, un portal para crear tiendas on-line se puede observar el uso de este lenguaje htm, estilos css, internacionalización, hipertexto etc. https://www.prestashop.com
WEB FONTS: Es una tecnología que permite usar fuentes a pedido en la Web sin necesidad de instalarla en el sistema operativo. W3C tiene experiencia en fuentes descargables a través de HTML, CSS2 y SVG.
Hasta hace poco, las fuentes descargables no eran comunes en la Web debido a la falta de un formato de fuente interoperable. El esfuerzo de WebFonts planea abordar eso a través de la creación de un formato de fuente abierto y respaldado por la industria para la Web (llamado 'WOFF').
En el siguiente pantallazo se muestra una página de web fonts, - Google fonts - aqui es posible elegir el tamaño de la fuente.
https://fonts.google.com/?selection.family=Mansalva
Lenguaje XHTML: (eXtensible Hypertext Markup Language) o Lenguaje de Etiquetado Hipertextual, es una variante de HTML que utiliza la sintaxis de XML, el Lenguaje de marcado extensible. XHTML tiene todos los mismos elementos (para párrafos, etc.) que HTML, pero la sintaxis es ligeramente diferente.
El lenguaje XHTML surgió ante los problemas de compatibilidad que se presentaban cuando se usaba un documento HTML en distintas plataformas. Su finalidad es que pueda ser usado como lenguaje de contenidos que sea a su vez conforme a XML y, si se siguen algunas sencillas directrices, funciona en agentes de usuario (esto es, las aplicaciones que leen y procesan documentos) conformes con HTML4.0.
A continuación se muestran las cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<dl compact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
5) Todas las etiquetas deben cerrarse siempre:
La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.
La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal y como se verá más adelante. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto.
Como el estándar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la etiqueta <br> se debería cerrar de forma seguida: <br></br>. Para que el código resulte más cómodo de escribir, XHTML permite en estos casos escribir de forma abreviada una etiqueta que se abre y se cierra de forma consecutiva.
En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto. En la forma compacta es habitual equivocarse con la posición del carácter /.
Además de estas cinco restricciones básicas, XHTML incluye otros cambios más avanzados respecto a HTML:
Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que se encuentran antes y después del valor. Además, se eliminan todos los espacios en blanco sobrantes dentro del valor de un atributo. En otras palabras, si en el interior de un atributo se incluyen varios espacios en blanco seguidos, se eliminan todos salvo un único espacio en blanco utilizado para separar las diferentes palabras.
Como se explicará más adelante al hablar de la etiqueta <script>, el código JavaScript debe encerrarse entre unas etiquetas especiales (<![CDATA[ y ]]>) para evitar que el navegador interprete de forma errónea caracteres como & y <.
Las páginas XHTML deben prescindir del atributo name para identificar de forma única a los elementos. En su lugar, siempre debe utilizarse el atributo id. De hecho, en la versión 1.0 del estándar XHTML, el atributo name se ha declarado obsoleto para las etiquetas a, applet, form, frame, iframe, img y map.
En el siguiente pantallazo, tomado de http://lsi.vc.ehu.eus/asignaturas/ISoft/ej-xhtml/index.html, podemos observar un ejemplo de escritura en xhtml.
Convertir un documento HTML a un documento XHTML válido: Depende esencialmente de cómo se ha construido el documento HTML Si se ha construido y codificado bien en HTML es decir, entrecomillado todos y cada uno de los atributos, cerrado todas las etiquetas y las anidamos correctamente, mantenemos la estructura esencial de la página, etc., y se escribe todo en minúsculas, la conversión de HTML a XHTML es prácticamente inmediata. Así pues, se puede hacer esta conversión de forma manual, aunque también existen editores y convertidores automáticos que convierten HTML en XHTML, como una herramienta llamada HTML Tidy desarrollada por Dave Raggett del W3C Consortium
Tomado de: http://www.hipertexto.info/documentos/xhtml.htm
ESTRUCTURA DE UNA PÁGINA WEB
En las imágenes podemos observar el ejemplo de la estructura básica de html y del estilo css.
( No hay información del autor de las imágenes.)
API WEB DE JAVASCRIPT
Las API
estándar para el desarrollo de aplicaciones web del lado del cliente incluyen
aquellas para geolocalización, XMLHttpRequest y widgets móviles. Los estándares
del W3C para modelos de documentos (el 'DOM') y tecnologías como XBL permiten a
los proveedores de contenido crear documentos interactivos a través de
secuencias de comandos.
EJEMPLO
DE PÁGINA WEB
Pantallazo de página tomado de:
Pantallazo de página tomado de:
https://www.falabella.com.co/falabella-co/category/cat8650978/Celulares-Huawei?gridView=6
GRÁFICOS
En W3C los formatos más utilizados son: el ráster PNG, el formato vectorial SVG y la API Canvas. WebCGM el cual es un formato más especializado utilizado, por ejemplo, en los campos de ingeniería automotriz, aeronáutica.
El PNG se presenta en dos versiones: el PNG de 8 bits que es muy similar al GIF, y el PNG de 24 bits con la misma cantidad de colores que un JPG. El PNG comprime la información sin pérdida de calidad e incluye un canal alfa para añadir una escala de transparencia. Se emplean fundamentalmente para logos que necesitan transparencia y degradados e imágenes de alta calidad, cuando el tamaño del archivo no es un problema.
Los archivos SVG (Scalable Vector Graphics), Gráficos Vectoriales Redimensionables, son un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML. ... El formato es equivalente al que se utiliza en los populares programas como Adobe Illustrator o Corel Draw.
La API funciona muy rápido a la hora de clasificar las imágenes en categorías muy concretas, en detectar caras y las emociones que reflejan, e incluso es capaz de leer textos en muchos idiomas directamente desde una fotografía.
El PNG se presenta en dos versiones: el PNG de 8 bits que es muy similar al GIF, y el PNG de 24 bits con la misma cantidad de colores que un JPG. El PNG comprime la información sin pérdida de calidad e incluye un canal alfa para añadir una escala de transparencia. Se emplean fundamentalmente para logos que necesitan transparencia y degradados e imágenes de alta calidad, cuando el tamaño del archivo no es un problema.
Los archivos SVG (Scalable Vector Graphics), Gráficos Vectoriales Redimensionables, son un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML. ... El formato es equivalente al que se utiliza en los populares programas como Adobe Illustrator o Corel Draw.
La API funciona muy rápido a la hora de clasificar las imágenes en categorías muy concretas, en detectar caras y las emociones que reflejan, e incluso es capaz de leer textos en muchos idiomas directamente desde una fotografía.
https://www.pngocean.com/gratis-png-clipart-tjgie
https://svgsilh.com/es/image/1531868.html - Dominio público
https://articulo.mercadolibre.com.mx/MLM-590810815-api-perro-de-mascota-fuente-de-agua-de-la-fuente-del-perrito-_JM?quantity=1
AUDIO Y VIDEO
Algunos de los formatos W3C que permiten la creación de presentaciones de audio y video incluyen HTML, SVG y SMIL (para sincronización). W3C también está trabajando en un formato de texto cronometrado para subtítulos y otras aplicaciones.
Tomado de: https://www.w3.org/standards/webdesign/
Para insertar sonido y video en un sitio Web se usan los tags audio, video y embed. HTML5 brinda la opción reproducir contenidos sin complementos.
Los contenidos de audio y video se deben comprimir siempre para incorporarlos al sitio.
El formato de audio más utilizado es el MP3 (MPEG Layer 3), aunque también son comunes MIDI (Musical Instrument Digital Interface) y WAV (Windows Waveform).
Los formatos de video más utilizado son AVI (Audio Video Interleaved), MPEG (Motion Picture Experts Group), MOV (Películas QuickTime) y RealOne Player.
Tomado de: https://disenowebakus.net/audio-y-video-en-internet.php
Tomado de: https://www.w3.org/standards/webdesign/
Para insertar sonido y video en un sitio Web se usan los tags audio, video y embed. HTML5 brinda la opción reproducir contenidos sin complementos.
Los contenidos de audio y video se deben comprimir siempre para incorporarlos al sitio.
El formato de audio más utilizado es el MP3 (MPEG Layer 3), aunque también son comunes MIDI (Musical Instrument Digital Interface) y WAV (Windows Waveform).
Los formatos de video más utilizado son AVI (Audio Video Interleaved), MPEG (Motion Picture Experts Group), MOV (Películas QuickTime) y RealOne Player.
Tomado de: https://disenowebakus.net/audio-y-video-en-internet.php
ACCESIBILIDAD
La Iniciativa de Accesibilidad Web (WAI) del W3C ha publicado las Pautas de Accesibilidad al Contenido en la Web (WCAG) para ayudar a los autores a crear contenido accesible para las personas con discapacidad. WAI-ARIA ofrece a los autores más herramientas para crear aplicaciones web accesibles al proporcionar una semántica adicional sobre widgets y comportamientos.
A continuación se presentan los enlaces a dos páginas que nos hablan sobre accesibilidad Web
¿Qué es accesibilidad web?
Características de las páginas Web dependiendo de la discapacidad
Pantallazo tomado de: http://www.fundacioncnse.org/educa/internet_seguro/que_harias_si_internet.php
WEB MOVIL
W3C promueve 'One Web' que está disponible en cualquier dispositivo. Las mejores prácticas de la Web móvil del W3C ayudan a los autores a comprender cómo crear contenido que brinde una experiencia razonable en una amplia variedad de dispositivos, contextos y ubicaciones.
La web movil hace referencia a la posibilidad que tiene un usuario para acceder a la finformación de un sitio desde cualquier dispositivo móvil. El objetivo de la W3C es lograr una web única que permita resolver problemas de interoperabilidad y usabilidad.
Tomado de: https://www.ceupe.com/blog/la-web-movil.html
Pantallazo tomado del simulados ubicado en: https://herramientas-online.com/responsive/responsive-design-test-online.php
Pantallazo tomado del simulados ubicado en: https://herramientas-online.com/responsive/responsive-design-test-online.php
PRIVACIDAD
La Web es una herramienta poderosa para comunicaciones y transacciones de todo tipo. Es importante considerar las implicaciones de privacidad y seguridad de la Web como parte del diseño tecnológico
Ejemplo: La Web de los bancos.
Pantallazo tomado del banco Davivienda. https://seguridad.davivienda.com/
