HTML 5
¿Qué es HTML 5?
HyperText Markup language o más conocido como HTML es un lenguaje de marcado de hipertexto lo cual tiene varias versiones como: HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01 y el HTML5 que es la última versión y en el momento que se lanzó el HTML 5 los navegadores mas grandes del mundo quisieron revolucionar con esta nueva tecnología que estaba rompiendo el mercado, así que empezaron actualizar sus funciones como por ejemplo (Mozilla) presento Firefox 3, grandes compañías como lo eran Google y Safari tardaron mucho en actualizar sus navegadores, HTML5 no es solo para sitios web, también son aplicaciones compatibles con navegadores y smartphones.
¿Qué es HTML?
Desde los inicios de Internet, HTML (Lenguaje de marcado de hipertexto) se ha consolidado como el lenguaje estándar para estructurar, combinar y proporcionar contenidos en la web, independientemente de la plataforma. A pesar de ello, el desarrollo de este lenguaje quedó ineficaz tras la publicación de HTML 4.01 en diciembre de 1999, a diferencia de Internet, que siguió desarrollándose. Navegar por Internet ya no es lo que era en el cambio de milenio. Además de textos e imágenes, también hay elementos multimedia que hacen de Internet lo que es hoy, gracias al creciente interés por las ofertas móviles.
En los últimos años, el uso moderno de Internet ha ido mucho más allá del lenguaje del hipertexto. Las páginas web actuales dependen de muchos complementos para satisfacer las necesidades de los desarrolladores, editores y consumidores, lo que genera incompatibilidades y fallas de seguridad y, en este sentido, la quinta versión de HTML tiene la responsabilidad de acabar con esto. El 28 de octubre de 2014, el World Wide Web Consortium (W3C) lanzó HTML5 como nuevo lenguaje WWW. Sin embargo, un gran número de empresas de alojamiento web siguen invirtiendo en la versión anterior u otros estándares más antiguos como XHTML, aunque esto puede cambiar en un futuro próximo.
¿Cuándo se fundó HTML 5?
HTML5 fue fundada el 28 de octubre del año 2014, se venía trabajando desde el año 2004, el proyecto fue fundado por el grupo de trabajo de W3C tecnología de aplicaciones de hipertexto web, esta empresa decidió abandonar el proyecto después de la publicación de HTML 4.01 y se fijó en el desarrollo de XHTML atreves de esto hubo mucho descontento en varias organizaciones de software y los proveedores de navegadores, luego se fundó una comunidad de trabajo que adopto el nombre de Web HyperText Application Technology Working Group (WHATWG) el cual se dedicaron solamente a desarrollar los estándares HTML e impulsaron la integración de aplicaciones en el año 2006, así que Ian Hickson de Google termino el proyecto con la cooperación WHATWG y saco al mercado la primera versión de HTML5.
Ventajas de HTML 5
Para facilitar la estructura de los documentos HTML, existen nuevas etiquetas semánticas que reemplazan las etiquetas de versiones anteriores (p. ej.), que ayudaban a identificar cada bloque de páginas web. Este es el desarrollo más importante en HTML4 porque este tipo de etiqueta permite a los motores de búsqueda indexar una página web con mayor precisión. Estos nuevos identificadores también ayudan a definir mejor la estructura y los componentes de la red y proporcionan información sobre su contenido y significado. HTML5 separa artículo, sección, vídeo, título, etc. Esta última versión de HTML es muy completa, ya que combina tres tecnologías que son muy importantes a la hora de construir páginas web, como lo serían:
1.HTML
2. CSS
3. JavaScript
Estas tres tecnologías tienen una función muy importante dentro de una página web como: HTML sirve para construir la página, CSS ayuda a decorar la presentación de la página y JavaScript ayuda agregar la funcionalidad a los elementos de HTML, y si buscas efectos o gráficos en nuestra página web, también trae el CSS3.
HTML 5 también tiene un lenguaje, el cual es muy claro y ordenado, por lo tanto, ayuda a su fácil aprendizaje, porque tiene varias opciones, la cual lo hacen muy completo, como crear aplicaciones web o incluir elementos complejos, como dibujos 3D directamente en el documento, y además es compatible con Chrome, Firefox, Safari y Opera.
También Se pueden agregar audio y video usando etiquetas multimedia. Scalable Vector Graphics (SVG) está mejor integrado que los habituales como <object>, y además cuenta con nuevos elementos que nos permiten dibujar sobre él con una etiqueta. Algunos elementos que se repiten en la mayoría de páginas web son redefinidos, modificados o estandarizados. MathML se puede utilizar para agregar fórmulas matemáticas.
Desventajas de HMTL 5
Las desventajas que tiene el HTML 5 son muy pocas como lo sería:
1. Tiene un formato de video el cual es predeterminado.
2. Su proceso de diseño llega a ser lento.
3. Su lenguaje estático generan desventajas a la hora de usarlo.
Siempre que se agrega un cambio o característica a un sistema iOS, Android o Windows, la herramienta de desarrollador debe considerar o considerar el cambio y realizar los cambios necesarios en el código. Esto significa que las herramientas de desarrollo móvil multiplataforma siempre van por detrás de los SDK oficiales.
Otras posibles desventajas incluyen:
A veces, crear aplicaciones móviles lleva tiempo porque los desarrolladores tienen que escribir código para cada plataforma. porque trabajan en otro idioma; por lo tanto, la eficiencia del código depende del recopilador. sucede que las técnicas de codificación son ineficientes o el código es redundante. Las diferencias en los tiempos de ejecución de las plataformas a menudo causan dificultades al desarrollar aplicaciones móviles para diferentes plataformas. El estándar HTML5 ha evolucionado en un período de tiempo relativamente corto, lo cual genera diferencias en la implementación de propiedades CSS, etiquetas HTML y API de JavaScript. A veces, estas funciones funcionan de manera diferente en diferentes plataformas. Sin embargo, existen herramientas para resolver estos conflictos. A continuación se presentan algunas ventajas y desventajas de las herramientas de desarrollo de aplicaciones móviles multiplataforma basadas en HTML5. Es evidente que las ventajas superan con creces las desventajas.
Elementos estructurales
A continuación vamos a ver algunos elementos estructurales de HTML5 y su función:
<!DOCTYPE html> : Sirve para indicar que el documento está bajo el estándar de HTML5.
<html> : Esto sirve para representa la raíz de un documento HTML y también sirve como contenedor para los demás elementos HTML, como <head> y <body>. El atributo Lang especifica el idioma del documento, lo que ayuda con la accesibilidad y el SEO.
<head> : En su interior se incluye la colección de metadatos sobre el documento, los enlaces a scripts y hojas de estilo.
<title> : Este código representa el título del documento. Se muestra en la barra superior del navegador o en las pestañas de página.
<link>: Sirve para enlazar documentos externos, por ejemplo CSS.
<meta>: Este código nos ayuda a definir los metadatos que no pueden ser definidos usando otro elemento HTML.
<style> : El código style ayuda para escribir CSS interno. Y así decorar la página.
<script> : Nos ayuda a definir un script o mas conocido como un enlace hacia un script externo de JavaScript.
Como podemos observa es aquí los elementos estructurales de una pagina web como lo sería: <head> lo cual sería la cabecera de la página, <body> que es en español cuerpo y por lo tanto también es el cuerpo de la página y muchos más, la mayoría de códigos están en el idioma ingles, así que si te facilita el ingles podrías entender de una manera más fácil.
Elementos semánticos
<body> : Escoge todo el contenido de un documento HTML. Sólo puede existir un elemento <body> en el documento.
<section> : Nos ayuda a definir secciones de una web.
<nav> : este código nos facilita a etiquetar una sección que contiene un menú de navegación.
<article> :Ayuda a determinar secciones de contenido.
<aside> : Ayuda a definir la barra lateral de una página web.
<h1> <h2> <h3> <h4> <h5> <h6> : Describe el tema de la sección según su orden. H1 es para usar texto grande y el H6 un texto más pequeño y así va su orden.
<header>: Es la cabecera de una web o de un elemento
<footer>: Sirve para definir un pie de pagina o de algún elemento.
<address> : Ayuda especificar alguna sección que contenga información de contacto.
<main>: Nos facilita la categorización del contenido principal del documento.
Estos elementos que acabamos de ver es todo lo que se utiliza para poder formar una página web de manera profesional. pero todavía faltaría el otro proceso que seria meter toda la información de manera correcta y en el orden correcto en la pagina con los códigos requeridos y a continuación hacer la decoración de la pagina con CSS, el cual sería el diseño de la página, pero no el diseño estructural si no el diseño gráfico de la página para así de esta manera quede llamativa la página web y por último sería darle la funcionalidad con JavaScript que puede llegar a ser lo más complicado, en fin, si no dominas mucho el tema podrías tarda hasta 3 meses creando solo una sección de la página web, sólo el inicio de la página y faltarían secciones como contacto, noticias entre otras y dependiendo también qué tipo de página es.
.
Autor: Brayan David Castiblanco Diaz
Editor: Carlos Iván Pinzón
Código: UCPA-1
Universidad: Universidad Central
Fuentes:
Ramon Saquete . (2014) . human level . human level . https://www.humanlevel.com/blog/desarrollo-web/desarrollo-web-html5-futuro-de-app-moviles.html
Ebac . (2023) . ¿Qué es HTML5 y para que sirve? . aprendeaprogramar . https://ebac.mx/blog/que-es-html5#:~:text=HTML5%20es%20la%20%C3%BAltima%20versi%C3%B3n,funcionalidad%20a%20los%20elementos%20HTML.
aprendeaprogramar . (s.f) . ¿Cuáles son las versiones de HTML? Diferencias entre HTML 4 y HTML 5 . aprendeaprogramar . https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=444:icuales-son-las-versiones-de-html-diferencias-entre-html-4-y-html-5-significado-de-strict-cu00706b&catid=69&Itemid=192#:~:text=Los%20est%C3%A1ndares%20oficiales%20HTML%20son,largo%20de%20los%20pr%C3%B3ximos%20a%C3%B1os.
Infinijith . (2019) . Linkedin . https://www-linkedin-com.translate.goog/pulse/html5-brief-history-william-james?_x_tr_sl=en&_x_tr_tl=es&_x_tr_hl=es&_x_tr_pto=rq#:~:text=In%202006, %20the%20W3C%20(World,the%20first%20version%20of%20HTML5.
Formulaclick . (2014) . Cosas que se pueden hacer con HTML5 y que probablemente desconocías . formulaclick . https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.formulaclick.com%2Fcosas-que-se-pueden-hacer-con-html5-y-que-problablemente-desconocias%2F&psig=AOvVaw3mjpmOSfgwzyXHw9l23y2Z&ust=1692415969896000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCLCfoPei5YADFQAAAAAdAAAAABAE
(2022). html-examples .[Imagen]. https://www.freecodecamp.org/espanol/news/content/images/2022/07/html-examples.jpeg
(s.f) . 12817703-jeu-d-icones-html5-css3-js-jeu-d-icones-de-logo-de-veloppement-web-de- Símbolo-de-programación-vectorial-libre-html-css-y-javascript . [Imagen] . https://static.vecteezy.com/ti/vector-libre/p1/12817703-jeu-d-icones-html5-css3-js-jeu-d-icones-de-logo-de-veloppement-web-de- Símbolo-de-programación-vectorial-libre-html-css-y-javascript.jpg
(s.f) . recursos-web-para-programar-en-HTML5-150x150 . [Imagen] . https://www.cursosgis.com/wp-content/uploads/recursos-web-para-programar-en-HTML5-150x150.png
OpenWebinars . (21 de enero del 2019) . QUÉ ES HTML5(y así funciona). [Video]. YouTube. https://www.youtube.com/watch?v=hKPYkxdbRiY
