Sesión 2: HTML, CSS y JavaScript

HyperText Markup Languaje (HTML)
HTML, lenguaje de marcado hipertextual, hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<, >). Donde también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
  • Breve evolución histórica: HTML es un derivado de SGML y nació en 1991, gracias a Tim Berners-Lee, que ante la necesidad de compartir información entre científicos creó la primera definición del lenguaje.
    • Etapa liderada por el IEFT: Tras este periodo, en 1993 fue creado el borrador por la ITEF para definir definitivamente HTML como un estándar, que además incluía una definición de tipo de documento SGML, que definía su gramática. En la primera publicación del lenguaje se incluían un total de 22 etiquetas. Se crearon tambien diversos borradores (HTML+ y  HTML 2.0) de los cuales incluían nuevas caracteristicas.
    • Fundación del World Wide Web Consortium (W3C): Ya en 1997, eran muchas las empresas que querían tomar decisiones sobre HTML, por tanto se creó el W3C y se dejó de influir el IEFT.
      En enero de 1997 se publicó HTML3.2 como recomendación de la W3C, que fue la primera definición redactada exclusivamente por el consorcio, fuertemente influenciado por Netscape.
    • HTML 4: Fue lanzado como recomendación a finales de 1997 y disponía de tres variantes: transicional (se permiten elementos obsoletos), estricta (se prohíben elementos obsoletos) y de conjuntos de marcos (se usaba para las webs que están formadas por frames). A finales de 1999 se publicó HTML4.01, que no incorporó nada pero se publicó para corregir erratas.
    • HTML como estándar: A mediados del 2000 se creó la normativa ISO que definió HTML 4.01 (strict) como estándar internacional. Tras la estandarización surgieron las alternativas basadas en XML, que era XHTML.
Por lo tanto el rumbo actual de la W3C es adaptarse al continuo cambio y realizar estandarizaciones periódicas solo con las tecnologías que estén más "maduras".
  • Estándares provistos por W3 para el diseño y aplicaciones web: 
    • HTML & CSS: HTML y CSS son las tecnologías fundamentales para crear páginas web: HTML (html y xhtml) para la estructura, CSS para el estilo y el diseño, incluidas las fuentes web. Encuentre recursos para un buen diseño de páginas web, así como herramientas útiles.
    • JavaScript Web Apis: 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 de 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 scripting.
    • Graphics: W3C es el hogar del formato rasterizado PNG, el formato vectorial SVG y la API de Canvas. WebCGM es un formato más especializado utilizado, por ejemplo, en los campos de ingeniería automotriz, aeronáutica.
    • Audio and 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 temporizado para subtítulos y otras aplicaciones.
    • Accessibility: La Iniciativa de Accesibilidad a la Web (WAI) del W3C ha publicado Pautas de Accesibilidad al Contenido de la Web (WCAG) para ayudar a los autores a crear contenido que sea accesible para las personas con discapacidades. WAI-ARIA proporciona a los autores más herramientas para crear aplicaciones web accesibles al proporcionar semánticas adicionales sobre los widgets y comportamientos.
    • Internationalization: W3C tiene la misión de diseñar tecnología que funcione en diferentes culturas e idiomas. Los estándares W3C, como HTML y XML, se basan en Unicode, por ejemplo. Además, el W3C ha publicado guías para autores relacionadas con etiquetas de idioma de texto bidireccional (bidi) y más.
    • Mobile Web: W3C promueve "One Web" que está disponible en cualquier dispositivo. Las Mejores Prácticas de Web Móvil de W3C ayudan a los autores a entender cómo crear contenido que proporcione una experiencia razonable en una amplia variedad de dispositivos, contextos y ubicaciones.
    • Privacy: La web es una poderosa herramienta para comunicaciones y transacciones de todo tipo. Es importante considerar las implicaciones de privacidad y seguridad de la Web como parte del diseño de la tecnología. Obtenga más información sobre el seguimiento y la seguridad de la aplicación web.
    • Math on the Web: Las matemáticas y las fórmulas se utilizan en la Web para informes comerciales, materiales educativos e investigación científica. MathML de W3C permite que las matemáticas se sirvan, reciban y procesen en la World Wide Web, al igual que HTML ha habilitado esta funcionalidad para otros tipos de contenido.
  • Radiografias de los elementos HTML:
Como es de saber, las etiquetas son la estructura básica del HTML. Estas etiquetas o tags se componen y contienen otras propiedades, como son los atributos y el contenido.
Esta sería la estructura general de una línea de código en lenguaje HTML: 
<tag attribute1="value1" attribute2="value2">content</tag>
O lo que es lo mismo, con un ejemplo: 
<a href="http://www.enlace.com" target="_blank">Ejemplo de enlace</a>
Donde:
  • <a> es la etiqueta o tag inicial y </a> la etiqueta de cierre.
  • href y target son los atributos.
  • http://www.enlace.com y _blank son las variables o valores.
  • Ejemplo de enlace, es el contenido.
Aunque también existen elementos vacíos que no necesitan tag de cierre, cuya estructura sería ésta: 
<tag attribute1="value1" attribute2="value2" />
Estos elementos vacíos no constan de contenido, como por ejemplo, los tags <br> o <img>.
Para más información respecto a este tema, recomiendo visitar: arkaitzgarro, manualweb y desarrolloweb.

  • Distintas especificaciones: Con la evolución del HTML se van generando distintas especificaciones de la sintaxis del lenguaje de marcas.
    • HTML 2.0:
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<title>Ejemplo de documento</title>
<p>
con un <a href=http://www.w3c.org>grado de purismo</a>
sencillamente <em>*impresionante*</em>
</p>
    • HTML 3.2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Un estudio de la dinámica de poblaciones</TITLE>
... otros elementos del encabezamiento
</HEAD>
<BODY>
... cuerpo del documento
</BODY>
</HTML>
    • XHTML:
<?xml</b> version="1.0" encoding="UTF-8"<b>?>
<!DOCTYPE </b>html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 
<!--Este es un comentario y no sera tomado en cuenta por el navegador -->
<html> xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"
<head>
<title>Titulo de la pagina</title>
</head>
<body>
    <p>Primer documento XHTML, es decir un, Hola mundo</p>
</body>
</html>
    • HTML5: HTML5 es la nueva versión de HTML, tiene más etiquetas y por lo tanto más opciones de diseño. 
      • Contiene nuevos elementos semánticos: <header>, <hgroup>, <nav>, <article>, <section>, <aside>, <time>, <mark>, <footer>.
      • Hay 4 nuevos elementos multimedia: <audio>, <canvas>, <source>, <video>.
      • Y hay nuevos elementos para estrcuturar el contenido:<details>, <summary>.
Cabe resaltar que no todos los navegadores soportan el HTML 5, por ejemplo, observemos los nuevos atributos de los controles de formulario:

  • Validación de especificaciones:
La validación de una página web es el proceso para asegurar que las páginas del sitio web se ajustan a los estándares definidos por varias organizaciones, principalmente el W3C.
El W3C ofrece gratuitamente el Servicio de Validación de Marcado.
La validación es muy importante, porque asegura que las páginas web son interpretadas de la misma forma por software diferente: Por ejemplo: Markup Validation Service ofrece dicho servicio mediante la inserción del URL de nuestra página mostrando advertencias y errores (en caso de tener) del lenguaje que confroma la página ingresada.


Cascading Style Sheet (CSS)
  • ¿Qué es CSS?: En español Hojas de Estilo en Cascada. La idea de CSS es la de utilizar el concepto de separación de presentación y contenido, intentando que los documentos HTML incluyan sólo información y datos, relativos al significado de la información a transmitir (el contenido), y todos los aspectos relacionados con el estilo (diseño, colores, formas, etc...) se encuentren en un documento CSS independiente (la presentación).
  • Sintáxis: 
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
  • ¿Cómo enlazar HTML con CSS?:
    • Como primer paso escribiremos nuestro documento HTML, por ejemplo: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
</head>

<body>

<!-- Contenido principal -->
<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

</body>
</html>
Luego, por medio de las etiquetas <style> ... </style> ingresaremos el código CSS dentro de las etiquetas <head> ... </head>. Por ejemplo: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style>
  body {
   font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d 
  }

  h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif 
  }

  </style>
</head>
.
.
Con esto estariamos cambiando la fuente, el color, y el fondo de todo el contenido que se ponga en la etiqueta <body> ... </body>. Además, todas aquellas etiquetas <h1> establecidas en el documento HTML ahora tendran un nuevo tipo de letra.



Referencias bibliográficas:
Concepto HTML  | Historia de HTML, un lenguaje de marca, que ha marcado historia | Web Design and Applications | Capítulo 3 Etiquetas, atributos y elementos | Sintaxis de HTML | Especificaciones y ejemplos de XHTML | 7 Compatibilidad de navegadores con HTML5 | 1 HTML5 and CSS3 – The Future of the Web Programming | ¿Qué es CSS? | Comenzando con HTML + CSS | Bootstrap 3 Tutorial

Comentarios

Publicar un comentario