OpenEDG. Codificación de caracteres

 

¿Qué es la codificación de caracteres?

Para que las páginas web se muestren correctamente, el texto dentro de ellas debe ser codificado de una manera específica. La codificación de caracteres es el método utilizado para representar caracteres como números que las computadoras pueden entender.

¿Por qué números? Porque las computadoras procesan y almacenan información utilizando señales electrónicas, y las señales están representadas por dígitos binarios, también conocidos como bits, que sólo puede tener dos estados posibles: "encendido" o "apagado" (representado por 1 o 0). Estos dígitos binarios se utilizan para representar toda la información que procesan y almacenan las computadoras, como imágenes, sonido, vídeo y texto.

Entonces, cuando miras una página web, el texto que contiene debe ser cambiado a un código especial que las computadoras pueden entender para que se muestre correctamente. Esto se llama codificación de caracteres. Pero antes de profundizar en varios estándares de codificación de caracteres, comprendamos primero los conceptos básicos de los dígitos binarios y el sistema binario.

El sistema binario

Dígitos binarios, también conocidos como bits, son los componentes básicos de la información digital.

En el sistema binario, Cada bit puede tener solo uno de dos valores: 0 o 1. Esto puede parecer limitado, pero al combinar bits de varias maneras, podemos representar y procesar datos complejos como texto, imágenes, vídeo y sonido.

El sistema binario se utiliza en una variedad de dispositivos y tecnologías digitales, incluidas computadoras, dispositivos móviles, Internet, sistemas de comunicación y electrónica. Por ejemplo, un solo bit puede representar el estado de un interruptor de luz: 0 para "apagado" y 1 para "encendido".

Decimal versus binario

Para entender cómo funciona el sistema binario, comencemos por observar el sistema numérico decimal que estamos acostumbrados a utilizar en la vida cotidiana.

En el sistema decimal, se utilizan diez dígitos (0-9) para representar todos los números. El valor de cada dígito depende de su posición en el número, donde cada posición es diez veces el valor de la posición a su derecha. Por ejemplo, en el número 123, el dígito 1 representa ciento, el dígito 2 representa veinte (dos decenas), y el dígito 3 representa tres unidades.

En el sistema binario, se utilizan sólo dos números, 0 y 1, para representar todos los números. Al igual que se utilizan los números del 0 al 9 en el sistema decimal, se utilizan estos dos números para formar todos los números diferentes en el sistema binario.

El valor de cada número depende de su posición en el número. Cada número en un número binario representa una potencia de 2. Por ejemplo, el primer número de la derecha representa 20 (que es 1), el segundo número de la derecha representa 21 (que es 2), el tercer número de la derecha representa 22 (que es 4), y así sucesivamente.

Y ahora, para encontrar el valor decimal de un número binario, debes sumar los valores de cada número, usando las potencias de 2. Por ejemplo, en el número binario 1011, el dígito de la derecha representa 20 (que es 1), el siguiente dígito a la izquierda representa 21 (que es 2), el siguiente dígito a la izquierda representa 22 (que es 4), y el dígito más a la izquierda representa 23 (que es 8). Para calcular el valor del número entero, ahora hay que sumar los valores de cada dígito:

(1×20)+(1×21)+(0×22)+(1×23) = 1 + 2 + 0 + 8 = 11

Entonces el número binario 1011 es equivalente al número decimal 11.

Práctica

Convierta los siguientes números binarios a números decimales:

1. 1101




2. 100101




3. 11111111

El sistema hexadecimal

Además de los sistemas decimales y binarios, también existe otro sistema numérico comúnmente utilizado conocido como hexadecimal (hex). Aunque no se utiliza directamente en la codificación de caracteres, el hexadecimal se utiliza a menudo para representar valores binarios de una forma más cómoda y compacta. Es más, comprender el hexadecimal es importante cuando se trabaja con colores y entidades de caracteres, algo que abordaremos más adelante en el curso. Por lo tanto, te recomendamos aprenderlo como parte de tu viaje en HTML.

En el sistema hexadecimal, se utiliza 16 dígitos y letras (0-9 y AF) para representar todos los números. El valor de cada dígito depende de su posición en el número, donde cada posición es 16 veces el valor de la posición a su derecha.

Por ejemplo, el número 2F en hexadecimal representa (2 × 161)+(15×160) en decimal. El dígito 2 representa dos dieciséis, y el dígito F representa quince unos. La carta A representa 10, B representa 11, y así sucesivamente, hasta F que representa 15.

En el sistema hexadecimal, al igual que en el sistema binario, cada dígito representa una potencia de 16. El primer dígito de la derecha representa 160 (que es 1), el segundo dígito de la derecha representa 161 (que es 16), el tercer dígito de la derecha representa 162 (que es 256), y así sucesivamente.

Convertir un número hexadecimal a decimal es similar a convertir un número binario a decimal. Tú simplemente multiplica cada dígito por su potencia correspondiente de 16 y suma los valores. Por ejemplo, el número hexadecimal 2F es equivalente al número decimal 47, y así es como lo calculamos:

(2 × 161)+(15×160) = 32 + 15 = 47

Práctica

Convierta los siguientes números hexadecimales a números decimales:

1. 4A




2. FF




3. 1B7

Estándares de codificación de caracteres

Ahora sabes que la codificación de caracteres implica Asignar caracteres a números que puedan ser entendidos por computadoras (donde a cada personaje se le asigna un único punto de código, que está representado por un número específico), y que los dígitos binarios y el sistema binario juegan un papel fundamental en este proceso. Para comprender mejor la codificación de caracteres y su conexión con HTML, echemos un vistazo más de cerca a los estándares de codificación más populares.

Hay varios estándares de codificación de caracteres disponibles, cada uno con sus propios beneficios y limitaciones.

• ASCII, o el Código Estándar Americano para el Intercambio de Información, es el estándar de codificación de caracteres más básico. Utiliza 7 bits para representar 128 caracteres, que incluyen letras, números y símbolos comúnmente utilizados en el idioma inglés. Sin embargo, la codificación ASCII no es adecuada para representar caracteres de otros idiomas.
• Unicode es un estándar de codificación de caracteres más completo que admite una cantidad mucho mayor de caracteres de diferentes idiomas y scripts. Puede utilizar hasta 32 bits para representar más de un millón de caracteres, incluidos aquellos de escrituras no latinas como el chino, el árabe y el cirílico. Unicode incluye varias codificaciones diferentes, incluidas UTF-8, UTF-16 y UTF-32.
• UTF-8 es un estándar de codificación de caracteres ampliamente utilizado compatible con ASCII. Utiliza una codificación de longitud variable que puede representar caracteres utilizando entre 1 y 4 bytes, dependiendo del carácter que se esté codificando. UTF-8 puede representar todos los caracteres del estándar Unicode, lo que lo convierte en una opción ideal para el desarrollo web.

Especificación del estándar de codificación de caracteres

UTF-8 es el estándar de codificación de caracteres más utilizado para el desarrollo web en la actualidad. Es el Estándar de codificación predeterminado utilizado por HTML5, y se recomienda su uso en todas las aplicaciones web modernas.

Para especificar el estándar de codificación de caracteres como UTF-8 en un documento HTML, puede utilizar el siguiente código en cabeza sección de su documento: <meta charset="UTF-8">.

Esto le dice al navegador web que el documento está codificado usando UTF-8 y que el navegador puede usar el algoritmo de decodificación apropiado para renderlos personajes correctamente.

Si aún no está familiarizado con los términos o cómo usarlos, no se preocupe: los cubriremos con más detalle más adelante en el curso. Por ahora, recuerde que es fundamental utilizar el estándar de codificación de caracteres correcto para sus páginas web para garantizar que todos los caracteres se muestren con precisión, y que UTF-8 es una opción recomendada para la mayoría de las aplicaciones web modernas, ya que puede manejar una amplia gama de caracteres y es ampliamente compatible con navegadores y otras herramientas web.

Si está interesado en obtener más información sobre la codificación UTF-8 y el conjunto de caracteres Unicode, visite Página wiki de UTF-8 para más información y ejemplos.

 

OpenEDG. primeros pasos HTML

 

Configuración de un entorno de desarrollo HTML

Para comenzar a escribir y probar su código HTML, necesitará un entorno de desarrollo mínimo que incluya un par de herramientas y recursos básicos. Estas herramientas incluyen a editor de texto y un navegador web.

Editor de texto

Un editor de texto es una aplicación de software que le permite crear y editar archivos de texto sin formato y escribir y editar código. Para escribir código HTML, puede utilizar cualquier editor de texto básico, como Bloc de notas en Windows o Editar texto en Mac.

Sin embargo, utilizar un editor de texto dedicado diseñado específicamente para la codificación puede mejorar enormemente su proceso de aprendizaje. Editores de texto como:

• Código de Visual Studio,
• Texto sublime, y
• Bloc de notas++

proporcionar una variedad de funciones diseñadas específicamente para codificación, tales como resaltado de sintaxis, lo que ayuda a que las diferentes etiquetas y elementos HTML sean visualmente más distintos, y finalización del código, que puede completar automáticamente el código a medida que escribe. Estas características te ayudan a Escribir código de forma más rápida y precisa, y puede reducir las posibilidades de cometer errores.

Navegador web

Es necesario un navegador web para que Abra, vea y pruebe su código HTML. La mayoría de los navegadores web modernos incluyen herramientas de desarrollo integradas que pueden ayudarle a depurar su código y analizar el rendimiento de su página web. Están diseñados para interpretar código HTML y mostrar su contenido, formato y diseño de una manera fácil de usar.

Algunos ejemplos de navegadores web de uso común incluyen:

• Google Chrome,
• Mozilla Firefox, y
• Microsoft Edge.

Para ver un archivo HTML en un navegador web, simplemente puede hacer doble clic en el archivo en su sistema de archivos, y el navegador web asociado con los archivos HTML debe abrir y mostrar el archivo. Alternativamente, puede abrir el navegador web y luego usarlo por medio de Archivo menú o un acceso directo de teclado para abrir el archivo HTML. Una vez abierto el archivo en el navegador, podrás interactuar con su contenido, seguir enlaces y navegar entre páginas, como lo harías con cualquier otra página web.

Tu primer archivo HTML

¡Genial! Estás listo para crear tu primer archivo HTML y ver tu primera página web. Para comenzar, asegúrese de tener un editor de texto y un navegador web instalados en su computadora. Estas herramientas serán tus mejores amigas a lo largo de este viaje. Una vez que los tengas listos, sigue estos tres pasos:

Paso 1 – Crear un archivo HTML

Abra su editor de texto y cree un nuevo archivo. ¡Es hora de darle vida a tu página web! Guarde el archivo con un nombre memorable y asegúrese de utilizar el .html extensión, como muestra.html. Esto le dice a la computadora que es un archivo HTML.

Paso 2 – Escribe el código HTML

¡Aquí viene la parte emocionante! Dentro de su archivo HTML, comenzará agregando la estructura esencial de un documento HTML. Lo tenemos cubierto con el código que necesita. Simplemente copie lo siguiente:

índice.html

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

¡Mira eso! Has sentado las bases para tu página web. El código establece la estructura, agrega un título e incluye un encabezado y un párrafo. Siéntete libre de personalizar el contenido para expresar tu creatividad y personalidad.

No te preocupes si aún no estás familiarizado con todos los conceptos. Cubriremos todo en detalle más adelante en el curso, para que tengas una comprensión sólida. Por ahora, centrémonos en comenzar a crear su archivo HTML y abrirlo en un navegador web. ¡Se avecinan tiempos emocionantes!

Paso 3 – Guarde y abra el archivo HTML

¡Ahora es el momento de ver tu creación cobrar vida! Guarde el archivo HTML y navegue hasta la ubicación donde lo guardó. Haga doble clic en el archivo y, como por arte de magia, se abrirá en su navegador web predeterminado. ¡Voila! Verás tu página web mostrada maravillosamente.

¡Guau, lo lograste! Ha creado y abierto con éxito su primer archivo HTML. Tómese un momento para apreciar su logro y las increíbles posibilidades que le esperan en su viaje de desarrollo web.

Recuerde, esto es sólo el comienzo. Cuanto más practiques y explores, más aprenderás y descubrirás. Esperamos que pronto te diviertas experimentando con diferentes elementos HTML, agregando imágenes y jugando con estilos para hacer que tu página web sea exclusivamente tuya.

Edube™ Sandbox

¡Buenas noticias! En este curso tendrás acceso a la Caja de arena Edube herramienta. Le permite escribir, probar y obtener una vista previa de su código HTML de inmediato. No es necesario instalar ni configurar ningún software en su computadora.

Para acceder a Edube Sandbox, simplemente busque y haga clic en Editor botón en su pantalla, o haga clic en el botón "Ejecutar" junto al código HTML que proporcionamos en el curso, de esta manera:

índice.html

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>
</html>

Una vez allí, puedes editar tu código en el editor. Con solo hacer clic en el botón "Ejecutar", verás que tu código cobra vida. ¡Esperamos que lo disfrutes!

 

OpenEDG. El origen de HTML

 

El nacimiento del HTML

Todo comenzó en 1989 cuando Sir Tim Berners-Lee inventó HTML mientras trabajaba en el CERN, la Organización Europea para la Investigación Nuclear. Su visión era crear una forma de compartir información científica fácilmente entre diferentes computadoras.

El primera página web, creada por Sir Tim Berners-Lee, fue una creación simple pero innovadora. Consistía en texto simple e hipervínculos que permitían a los usuarios navegar y explorar diferentes documentos y recursos. Esta humilde página sentó las bases para una era revolucionaria de intercambio de información y transformó la forma en que accedemos e interactuamos con el contenido de Internet.

La primera versión de HTML, llamada HTML 1.0, fue lanzada en 1993. Era un lenguaje de marcado simple con características limitadas en comparación con las versiones modernas que utilizamos hoy.

A lo largo de los años, HTML ha evolucionado y se han introducido nuevas versiones, cada una de las cuales aporta nuevos elementos, atributos y características para mejorar las capacidades del desarrollo web. HTML 5, la versión actual, se lanzó en 2014 e introdujo muchas características interesantes, como soporte multimedia nativo, elementos semánticos y controles de formulario mejorados. Entonces, la próxima vez que estés creando una página web, ¡recuerda el viaje que ha recorrido HTML para convertirse en el lenguaje versátil y poderoso que es hoy!

Evolución HTML

HTML ha recorrido un largo camino desde sus inicios. Echemos un vistazo rápido a algunos momentos importantes de su evolución:

Introducción de HTML1 (1993)

La primera versión de HTML que sentó las bases para el desarrollo web. Introdujo elementos básicos como encabezados, párrafos y listas, allanando el camino para el futuro de HTML.

Introducción de HTML2 (1995)

Con HTML2 se introdujeron las tablas y la capacidad de incrustar imágenes. Esto facilitó la creación de diseños estructurados y la inclusión de elementos visuales en páginas web.

HTML3 y HTML4 (1997)

HTML3 (1997) trajo características interesantes como marcos, hojas de estilo y la capacidad de agregar interactividad con JavaScript. HTML4 (1997, republicado en 1999) continuó aprovechando esos avances e introdujo soporte para elementos multimedia.

HTML5 (2014)

¡HTML5 fue un verdadero punto de inflexión! Introdujo muchos elementos y características nuevos que hacen que el desarrollo web sea más potente y versátil. Con HTML5, obtuvimos elementos semánticos para una mejor estructura, soporte multimedia para audio y video y un mejor manejo de formularios.

HTML5.1 y más allá

HTML5.1 y versiones posteriores continúan perfeccionando y mejorando HTML, centrándose en el rendimiento, la seguridad y proporcionando más herramientas para crear aplicaciones web modernas.

Estándares HTML

¿Sabías que detrás de escena existen organizaciones dedicadas a mantener los estándares HTML y garantizar una experiencia web fluida para todos? Una de esas organizaciones es la Consorcio World Wide Web, o W3C para abreviar. El otro es el Grupo de trabajo sobre tecnología de aplicaciones de hipertexto web (WHATWG).

El W3C y WHATWG son comunidades internacionales de expertos web que desarrollan y mantienen los estándares HTML. Trabajan en colaboración para proponer, revisar y perfeccionar las especificaciones a través de un riguroso proceso de discusiones, pruebas y creación de consenso. Su objetivo es establecer y mantener estándares HTML que mantengan Internet funcionando sin problemas y mejoren las capacidades del desarrollo web.

La principal diferencia entre W3C y WHATWG es su enfoque del desarrollo HTML, con El W3C sigue un proceso formal basado en el consenso y WHATWG adopta un enfoque más pragmático y ágil.

Ahora, quizás te preguntes por qué deberías preocuparte por los estándares HTML. Imagínese navegar por un sitio web que se ve impresionante en su computadora, pero cuando cambia a su teléfono inteligente, se convierte en un desastre confuso. Puede resultar frustrante. Al adherirse a los estándares HTML, puede crear páginas web que puedan Adaptarse sin problemas a diferentes dispositivos, brindando a sus visitantes una experiencia consistente y agradable, independientemente de cómo accedan a su sitio. Además, A los motores de búsqueda les encantan las páginas que cumplen con los estándares, lo que puede mejorar la visibilidad de su sitio web y atraer más visitantes.

HTML y su versión actual – HTML5 continúan evolucionando a medida que Nivel de vida, y tanto el W3C como el WHATWG contribuyen a su desarrollo y garantizan su compatibilidad con tecnologías en evolución. Se ha convertido en el estándar de facto para el desarrollo web, permitiendo a los desarrolladores crear sitios web modernos, receptivos y atractivos.

El futuro de HTML

El futuro de HTML es un ámbito apasionante donde abundan la innovación y las posibilidades. A medida que la tecnología continúa avanzando, HTML está evolucionando para satisfacer las demandas del desarrollo web moderno. Una de las tendencias actuales en HTML es el enfoque en el diseño móvil primero y la capacidad de respuesta. Con el creciente uso de dispositivos móviles, los desarrolladores web están adoptando técnicas como diseño web responsivo, que permite a los sitios web adaptarse y proporcionar experiencias de usuario óptimas en diferentes tamaños de pantalla y dispositivos. Esta tendencia enfatiza la importancia de crear sitios web que sean accesibles y fáciles de usar en una amplia gama de dispositivos, garantizando que los usuarios puedan acceder al contenido sin problemas independientemente del dispositivo que estén usando.

Otra área emergente en HTML es la integración de HTML con tecnologías emergentes como realidad virtual (VR) y el Internet de las cosas (IoT). Se está mejorando HTML para respaldar la creación de experiencias de realidad virtual inmersivas directamente dentro de los navegadores web, lo que facilita a los desarrolladores crear y entregar contenido de realidad virtual a los usuarios. Además, a medida que los dispositivos IoT se vuelven más frecuentes, HTML se está adaptando para adaptarse a los requisitos e interacciones únicos de los dispositivos IoT, lo que permite a los desarrolladores crear aplicaciones basadas en web que se integran perfectamente con dispositivos inteligentes.

En resumen, el futuro de HTML está lleno de posibilidades interesantes. Desde el diseño móvil hasta la integración de realidad virtual y la compatibilidad con IoT, HTML está evolucionando para mantenerse al día con el panorama en constante cambio del desarrollo web. Como desarrolladores web, mantenernos actualizados con estas tendencias actuales y los desarrollos futuros en HTML nos permitirá crear experiencias web de vanguardia que cautiven e involucren a los usuarios en los próximos años.

 

OpenEDG. Que es HTML?

 

¿Qué es HTML?

HTML es como El esqueleto de un sitio web, dándole estructura y forma. Configura todo lo que ves en línea, desde texto e imágenes hasta formularios y botones. Sin HTML, los sitios web serían simplemente texto simple sin ninguna organización.

HTML = Lenguaje de marcado de hipertexto

• Hipertexto se refiere a texto que contiene enlaces a otros documentos o recursos. En HTML, el hipertexto permite a los usuarios navegar entre diferentes páginas web haciendo clic en enlaces.
• Marcado se refiere a la anotaciones o etiquetas que se utilizan para definir la estructura y el formato del contenido de un documento. En HTML, las etiquetas de marcado se utilizan para especificar elementos como encabezados, párrafos, imágenes y enlaces que hacen que una página web sea visualmente atractiva y fácil de navegar. Estas etiquetas proporcionan información a los navegadores web sobre cómo debe estructurarse, diseñarse y representarse el contenido en la pantalla del usuario.
• Idioma se refiere a la sistema de reglas y sintaxis utilizado para escribir e interpretar el marcado de manera consistente y estandarizada. HTML proporciona un conjunto de etiquetas y atributos predefinidos que definen cómo se debe mostrar e interactuar con el contenido en un navegador web. Es el traductor universal, el lenguaje que entienden los humanos, las computadoras y los navegadores.

Los mejores amigos de HTML: CSS y JavaScript

Con HTML tienes el poder de organizar y estructurar tu contenido de una manera que tenga sentido. Es como crear un plano para tu página web, donde puedes definir encabezados, párrafos, imágenes, enlaces y mucho más. Piénsalo como si fuera tu herramienta elemental para crear experiencias en línea atractivas e interactivas.

Como notarás pronto, HTML no está solo en esta aventura. Se asocia con sus socios en el crimen, CSS (Hojas de estilo en cascada) y JavaScript. Piense en CSS como la pintura y las decoraciones que hacen que una habitación luzca bien, dándole a los sitios web su imagen y estilo. JavaScript es como los gadgets de una habitación: agrega funciones divertidas e interactivas que hacen que el sitio web sea más interesante y útil.

Juntos, este trío actúa como La base fundamental de la web. Colaboran estrechamente para crear sitios web y aplicaciones que atraen y sorprenden. Aprender HTML te pone en el camino de convertirte en parte de la comunidad de desarrolladores web que crean las experiencias en línea en las que todos confiamos.

En este curso te mostraremos todo sobre HTML5. Aprenderás a utilizar este importante lenguaje de marcado que le dice a las computadoras cómo mostrar texto y datos.

¡Prepárate para usar tu imaginación, hacer que tus ideas cobren vida y mejorar tus habilidades para crear sitios web!