Tag: Diseño

(7 minutos de lectura)


En 1991, Tim Berners-Lee diseñó HTML para facilitar y acelerar el uso compartido de documentos. Con la creación de la World Wide Web, HTML se convirtió en una herramienta utilizada por todos y por todo.

Como resultado del crecimiento de HTML, surgió CSS, porque cuanto más se usaba HTML, más los desarrolladores usaban su creatividad para hacer que las páginas fueran hermosas y elegantes. Sin embargo, toda esta parte estética estaba escrita en el mismo archivo que la parte estructural, haciéndolas gigantescas y cada vez más difíciles de entender. Así, en 1995, se creó CSS para tratar la parte estética de la página, independientemente de la estructura, es decir, el papel de HTML.


HTML

Su nombre proviene del inglés Hyper Text Markup Language , que significa “lenguaje de marcado de hipertexto”, es decir, HTML no se considera un lenguaje de programación.

Imagina una página web, como la de nuestro blog que estás leyendo ahora. Es posible notar que hay varios elementos separados, como encabezado, título, párrafos, imágenes y muchos otros. Toda la organización de estos elementos se realiza mediante HTML. Se utiliza para crear toda la estructura de la página y, para ello, utiliza las famosas etiquetas para señalar dónde se implementará cada tipo de elemento.

Por ejemplo, si desea insertar un párrafo en la pantalla, puede usar la etiqueta <p></p> para eso, colocando el texto deseado dentro del elemento, como se muestra a continuación:


<p>Esto es un párrafo</p>


En resumen, podemos decir que hay varias etiquetas de diferentes estructuras para armar el esqueleto de la página.

HTML5 es una versión mejorada del estándar HTML original (si quieres saber más sobre HTML5 lee este otro artículo de nuestro blog).

HTML5 fue desarrollado para satisfacer las crecientes demandas presentadas por los medios de comunicación, los dispositivos cruzados y las necesidades de Internet móvil de hoy en día. Es una excelente herramienta para el desarrollo de aplicaciones móviles multiplataforma porque muchas de sus funciones se han adaptado teniendo en cuenta el acceso en dispositivos de bajo consumo, incluidas tabletas y teléfonos inteligentes.

HTML5 proporciona una interfaz común para simplificar la carga de componentes. Por ejemplo, HTML5 no requiere el complemento Flash porque el elemento se ejecutará por sí solo.


HTML5

Como se indicó anteriormente, HTML5 es la última versión del lenguaje de marcado utilizado para crear sitios web. Aunque es muy similar a las versiones anteriores, tiene algunas características nuevas que son muy útiles.

A continuación, se muestran los principales beneficios de HTML5:

- HTML5 tiene reproducción de video y audio. En versiones anteriores, los desarrolladores debían usar programas de terceros para reproducir videos y audios. Esto terminó causando muchos errores. HTML5 resolvió este problema con soporte completo para video y audio.

- HTML5 ofrece almacenamiento en caché offline, por lo que los visitantes pueden cargar ciertos elementos en una página web sin una conexión a Internet activa (pero deben haber accedido al sitio antes). Si la conexión a Internet de un visitante es baja, aún puede cargar los elementos principales del sitio.

Ahora bien, ¿cómo es posible colorear este párrafo? ¿O cambiar la fuente de la letra? Ahí es donde entra nuestra próxima tecnología: CSS.


CSS

Cascading style Sheet, más conocido como CSS, es un lenguaje de estilo que, al igual que HTML, no se considera un lenguaje de programación. Se encarga de separar la parte estructural de la aplicación (que estará en manos de HTML) de la parte estética. Para usar CSS, usamos la siguiente sintaxis:


strong {
	color: blue;
}

h1 {
	font-style: italic;
}


El selector será el elemento al que vamos a dar estilo (puede ser una etiqueta, una clase, un identificador, etc.), la propiedad es lo que queremos cambiar (color, tamaño de fuente, ancho, etc.) y el valor es el cambio a realizar.

Cuando usa una etiqueta HTM, como la del ejemplo anterior, puede diseñarla de esta manera para que los párrafos sean azules.


p {
color: blue;
}


Una cosa muy interesante acerca de CSS es que se puede escribir dentro de un archivo HTML, usando el estilo como un elemento < style > o como un atributo de algún otro elemento <p style =””>. También se puede escribir en un archivo solo CSS separado al importarlo al documento HTML de la siguiente manera:


<enlace rel =" hoja de estilo " href ="css_file_name.css">


Es importante señalar que existe la posibilidad de utilizar más de un archivo CSS al mismo tiempo, para dar estilo a la aplicación. De ahí la palabra “cascada”. Esto permite varias interacciones diferentes, pero hay que tener cuidado de no perderse y hacer que el código sea confuso, siempre siguiendo las reglas para ello.


CSS3

CSS siempre ha sido una herramienta extraordinaria, con la que se pueden llevar a cabo infinidad de proyectos de forma fácil, rápida y eficaz. Esta nueva versión, CSS3, es aún más sencilla y ha tenido muy buena aceptación por parte de los desarrolladores web.

A continuación, enumeramos los principales cambios en CSS3:

- CSS3 es compatible con versiones anteriores del lenguaje, es decir, los diseñadores no necesitan abandonar el trabajo que hacían con versiones anteriores a CSS3. Este nuevo lenguaje también se puede reelaborar en módulos antiguos. Sin embargo, puede haber algunos problemas de velocidad durante la conversión.

- CSS3 está compuesto por pequeños módulos que hacen que la aplicación sea más fácil y sencilla de usar. Selectores, colores, fondos, bordes, efectos de texto y transformaciones 2D o 3D son algunos de los módulos más útiles que ofrece CSS3.

- CSS3, al ser independiente, carga mucho más rápido que sus precursores. Es muy compatible con todos los navegadores disponibles. Los módulos individuales también ayudan a ahorrar mucho tiempo durante el desarrollo, la implementación y el final de la producción.


CONCLUSIÓN

Con el uso de HTML5 y CSS3, las empresas están desarrollando y ampliando cada vez más el contenido y las aplicaciones web con el fin de crear páginas y sistemas bien definidos y precisos a los que se pueda acceder en diferentes dispositivos, navegadores y sistemas operativos.

Por ello, conocer a fondo estos dos lenguajes te hará destacar en el mercado laboral. Sin mencionar que con ellos ahorras tiempo, acortas tu código y reduces las posibilidades de errores.

Si tenías dudas sobre si valdría la pena estudiar estos dos lenguajes, puedes jugar seguro que no te arrepentirás.


¿Qué te pareció nuestro artículo? ¡Asegúrese de seguirnos en las redes sociales y siga nuestro blog para mantenerse actualizado!

(8 minutos de lectura)


HTML5 es la nueva versión de HTML. Pero antes de hablar de esta nueva versión, hablemos un poco de la historia de HTML.


HTML

Con el surgimiento de internet, fue necesario crear un lenguaje que pudiera ser entendido por diferentes medios de acceso. Así, Tim Berners-Lee desarrolló HTML. En la década de 1990, cuando el navegador desarrollado por Marc Andreessen, Mosaic, se hizo popular, HTML ganó fuerza y fue adoptado por otros desarrolladores y fabricantes de navegadores, compartiendo las mismas convenciones.

HTML es una abreviatura de Hypertext Markup Language, es decir, Lenguaje de marcado de hipertexto, que es el un lenguaje utilizado para publicar contenido (texto, imágenes, videos, audio, etc.) en la web.

HTML se basa en el concepto de hipertexto, es decir, conjuntos de elementos conectados por conexiones, que pueden ser palabras, imágenes, videos, audio, documentos, etc. que al conectarse forman una gran red de información. La conexión que se realiza en un hipertexto es algo imprevisto que permite comunicar datos, organizar el conocimiento y almacenar información relacionada.

Entre 1993 y 1995 aparecieron nuevas versiones (HTML+, HTML 2.0, HTML 3.0) donde se propusieron varios cambios para enriquecer las posibilidades del lenguaje, pero aún no se trataba como un estándar. Solo en 1997, el grupo de trabajo del W3C trabajó en la versión 3.2, lo que provocó que fuera tratada como una práctica común.

En 2004 se fundó el WHATWG (Web Hypertext Application Technology Working Group) por parte de desarrolladores de empresas como Mozilla, Apple y Opera, donde se inició el trabajo de escritura de la nueva versión de HTML, HTML5.


HTML5 – ¿QUÉ ES?

Como se dijo al principio del texto, HTML5 es la nueva versión de HTML.

HTML5 es un lenguaje de marcado de hipertexto que presenta y estructura contenido web, y este nuevo estándar es para HTML, XHTML y HTML Dom.

HTML 5 permite agregar nuevos elementos y funciones, como etiquetas de video y audio y elementos de lienzo. Y su principal objetivo es facilitar la manipulación de sus elementos, haciendo posible modificar las características de los objetos de forma no intrusiva, haciéndolo explícito para el usuario final.

Si comparamos HTML5 con sus predecesores, notamos que tiene una serie de características adicionales, como:

1) Soporte para almacenamiento de medios fuera de línea;

2) Elemento de contenidos más específicos, como pie de página, encabezado, navegación;

3) Doctype más simple;

4) Soporte de incrustación de audio y video.

Otra característica interesante de HTML5 es que proporciona herramientas para CSS, hojas de estilo en cascada (para saber más sobre CSS, lea nuestro artículo), y JavaScript (lea nuestro texto para saber más sobre JS) hacen su trabajo de la mejor manera posible, por lo que el sitio logra ser ligero y funcional.

Además de que el código en HTML5 se escribe de manera diferente, la organización de la página también es diferente. Se volvió más semántico y con menos código, aumentando la interactividad sin necesidad de instalar complementos que muchas veces causaban pérdida de rendimiento. El código ya se ha vuelto interpolable, es decir, está listo para futuros dispositivos, facilitando la reutilización de la información de diferentes formas.


ESTRUCTURAS HTML5

La estructura básica de HTML se mantuvo en HTML5, el único cambio fue en el tipo de documento.

El propósito de HTML5 es mejorar la experiencia web para sus usuarios finales, así como para los desarrolladores. Su mayor cualidad es que ahora cuenta con soporte de audio y video de alto nivel, que no existía en versiones anteriores.

Ahora enumeramos otras diferencias entre las versiones HTML y HTML5.

1) SVG (gráficos vectoriales escalables): el lienzo y otros gráficos vectoriales son compatibles con HTML5, mientras que en HTML el uso de gráficos vectoriales solo era posible si se usaba junto con diferentes tecnologías, como: Flash, VML, Silverlight, etc.

2) HTML5 usa la base de datos SQL web en caché de la aplicación para el almacenamiento temporal de datos, mientras que HTML solo usa el caché del navegador.

3) HTML5 no se basa en SGML (Lenguaje de marcado generalizado estándar), lo que le permite tener reglas de análisis mejoradas, lo que proporciona una mejor compatibilidad.

4) En HTML5, MathML en línea y SVG se pueden usar en texto, esto no era posible en HTML.

5) Algunos elementos que quedaron fuera en HTML5 son: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike y tt.

6) HTML5 admite nuevos tipos de controles de formulario como fechas y horas, correo electrónico, número, rango, TEL, URL, búsqueda, etc.


NUEVOS ELEMENTOS EN HTML5

Muchos elementos de la versión 4.0.1 fueron eliminados en la versión 5, algunos porque nunca se usaron, otros porque quedaron obsoletos y, aún, los que se usaron de manera inapropiada. La nueva versión trae novedades que brindan al usuario una mejor estructura, diseño y contenido multimedia.

Las nuevas funciones de la versión 5 están directamente relacionadas con la necesidad de soporte independiente para nuevos formatos de contenido multimedia, nuevas funciones semánticas y accesibilidad.

Entre ellos destacamos los siguientes:

1) Inclusión del lienzo que permite dibujar gráficos en una página web. En la versión anterior, esta tarea se realizaba mediante complementos externos. Con esto, es posible, a través de JavaScript, controlar todos los píxeles, además de dibujar varios elementos gráficos, como círculo, rectángulo, elipse, línea, texto, imágenes, etc.

2) Inclusión de elementos de video y audio para reproducción multimedia. Entonces, una vez más, hay integración de complementos externos. Con esta inclusión de etiquetas, HTML5 admite la reproducción de audio y video sin necesidad de utilizar mecanismos externos.

3) Mejor soporte para almacenamiento local, HTML5 ofrece dos nuevos objetos para almacenar datos localmente: SessionStorage, que almacena datos durante una sesión activa, y LocalStorage, que almacena datos sin límite de tiempo.

4) Inclusión de nuevos elementos de contenido específico, ya que muchos elementos de la versión 4.0.1 fueron excluidos de la nueva versión, que trae nuevos elementos.

5) Inclusión de nuevos controles de formulario para facilitar la vida de los desarrolladores, a diferencia de la versión 4.0.1, que tenía una cantidad escasa de controles de formulario. Solo quedó el elemento de entrada, pero ganó nuevos valores para el atributo de tipo, lo que permitió un mayor control sobre la entrada de datos por parte del usuario.

6) Soporte completo de CSS3. Con esta integración, las páginas web pueden recibir los más variados tipos de estilos como sombras en textos y marcos, efectos de transición, marco con esquinas redondeadas y varias características nuevas que ofrece CSS3.


CONCLUSIÓN

Como se mencionó anteriormente, HTML5 viene con muchas características nuevas, desde la incorporación de video y audio hasta el uso del elemento lienzo. El lenguaje de marcado también ofrece múltiples elementos nuevos, lo que brinda una mejor compatibilidad con reglas de análisis mejoradas.

Por lo tanto, es esencial que los programadores aprendan sobre HTML5 lo antes posible para que puedan maximizar el potencial de los navegadores modernos.


¿Qué te pareció nuestro artículo? ¡Asegúrese de seguirnos en las redes sociales y siga nuestro blog para mantenerse actualizado!