Una de las historias más interesantes para contar es la historia de Internet, sin embargo no tenemos tanto tiempo para desplegar esto, lo que si intentaremos que queden conceptos claros y puntuales que se utilizarán en el transcurso de este curso.
Comenzamos con el más obvio, y tanto de obvio que le pedimos que ud lo intente: ¿Qué es Internet?
Hoy, el concepto, parece transparente al usuario final que ni hace falta definirlo, pero le pedimos que se esmere en esto y pueda encontrar una definición. En su búsqueda se encontrará con diversas posturas al momento de definir, basadas principalmente en la idea de Sistema Informático. Un sistema informático tiene como componentes el Hardware, el Software y el Usuario, entonces cuando define internet puede hacerlo desde estos tres aspectos.
Si lo pensamos como un hecho comunicativo, la idea es simple: queremos enviar datos de un lugar a otro, la idea es simple pero por detrás hay una gran complejidad, que ud, que no es usuario final, debe entender y manejar. Esta complejidad, en sus inicios, implicaba grandes desafios.
La idea de Inter Net se remonta hacia mediados del siglo XX, época en la que recién aparecian las computadoras. Ahora piense cómo es posible que estas computadoras puedan COMPARTIR información. Esta idea comunicativa tiene dos problemas: el problema del hardware que permitía la conexión de estas computadoras (antes por cables y hoy casi todo inalámbrico) y luego el problema de un software que hiciera realidad la transferencia de datos (aquí aparecerán los protocolos). De aquí saca una definición.
Esta red global de computadoras interconectadas que permite la transmisión de información en todo el mundo, tuvo su origen en el proyecto ARPANET, una red creada por el Departamento de Defensa de los Estados Unidos, que, con el tiempo, evolucionó hasta convertirse en lo que hoy conocemos como Internet.
Pero, ¿cómo funciona Internet?. Piense un segundo, qué ocurre cuando ud hace click en algún hipervínculo...
Internet opera mediante la interconexión de dispositivos a través de una infraestructura de redes de comunicación. Para lograr esto, se basa en los denominados Protocolos de Comunicación (en castellano simple, el lenguaje que utilizan las computadoras para comunicarse, ud seguro tendrá un curso de redes que profundice este concepto). Estos protocolos son reglas y estándares que permiten la comunicación entre dispositivos en Internet, sin importar lo diversos que puedan ser (observe que hoy ud puede comunicar un Celular con un Lavarropas a través de la red).
El conjunto principal de protocolos por los cuales Internet se hace masivo es el TCP/IP (Transmission Control Protocol / Internet Protocol).
Este protocolo es la base tecnológica que permite la transmisión de datos en la red. A grosso modo, el TCP se encargará de armar y desarmar los paquetes de información y el IP se encargará de llevarlos puerta a puerta (piense esto como enviar/recibir una encomienda).
Con el tiempo aparecieron nuevos protocolos, entre los más conocidos el HTTP y HTTPS (HyperText Transfer Protocol / Secure), protocolos utilizados para la transferencia de información en la web. Y el DNS (Domain Name System): Sistema que traduce los nombres de dominio en direcciones IP.
Hablando de estos últimos, es importante entender que cada dispositivo conectado a Internet tiene una dirección IP única, que puede ser:
IPv4: Formato numérico de 32 bits (ejemplo: 192.168.1.1).
IPv6: Formato alfanumérico de 128 bits (ejemplo: 2001:0db8:85a3::8a2e:0370:7334).
Y como las direcciones IP son difíciles de recordar, los nombres de dominio permiten asociar direcciones más comprensibles para los usuarios (ejemplo: www.google.com).
Un poco más cerca a nosotros, a fines de la década del 80 y principios de los 90 tiene lugar una revolución en la conocida Internet: aparece la Web. La World Wide Web (WWW) se presenta como la cara visible, y visualmente agradable, del sistema. Aprovechando la agilidad del mouse, se observa la intención de acceder a la información a través de un link. Por lo que la Web es un sistema de información basada en hipertexto que permite acceder a recursos en Internet mediante navegadores web.
Con el tiempo, el nuevo sistema redefinió la idea del modelo con el que trabaja internet: el modelo Cliente - Servidor.
En este modelo el Cliente es un dispositivo que solicita información (ejemplo: un navegador web) al Servidor, una máquina que almacena y entrega información a los clientes. Con el tiempo esta idea se ha intentado optimizar dando lugar a nuevos Frameworks con características muy particulares, que dependerán de las decisiones de diseño que tomemos al momento de proyectar nuestro sistema web.
HTML
Los dichos frameworks para el desarrollo web se dividen principalmente en herramientas para el frontend (atendiendo más al cliente) y herramientas para el backend (atendiendo más al servidor).
Del lado del FrontEnd es muy importante entender la estructura de una página web, y para esta maquetación existe un lenguaje de marcado (entre muchos) que es el standar: el HTML (HyperText Markup Language).
Hyper Text Markup Language es el lenguaje de marcado de hipertexto. Se utiliza en las páginas y sitios web y fue creado por el padre de la web, Tim Berners Lee en 1989.
El lenguaje HTML es el encargado de definir los contenidos de un sitio web de forma textual y estructurada. Dicho de otra forma, es el encargado de decirle al navegador web cómo debe visualizarse el sitio web. Si el título está centrado, en negrita o si tiene un enlace, por ejemplo, son elementos del marcado en HTML.
Las ventajas de utilizar el HTML son:
Cualquier modificación del HTML puede hacerse desde un editor de texto. No es necesario ningún software o conocimiento de programa alguno.
Puede integrar diferentes tipos de lenguaje de marcas, XML por ejemplo.
A pesar de todas estas ventajas HTML no es un lenguaje perfecto, sus principales desventajas son:
No soporta tareas de impresión y diseño.
El lenguaje no es flexible, ya que las etiquetas son limitadas.
No permite mostrar contenido dinámico.
La estructura y el diseño están mezclados en el documento.
El lenguaje XML
A diferencia del HTML, el lenguaje XML o Extensible Markup Language, etiqueta toda información, entre dos marcas, pero está separado el contenido de la presentación. XML no indica cómo presentar los datos, un mismo documento XML puede presentarse de muchas formas. Es muy utilizado junto a aplicaciones HTML, donde XML guarda o transporta los datos, y HTML les da formato y los muestra.
El XML es un lenguaje estándar, independiente, no forma parte de ninguna empresa. Es la forma segura y fiable de intercambiar información entre diferentes programas.
XML es un metalenguaje que se caracteriza por:
Permitir definir etiquetas propias.
Permitir asignar atributos a las etiquetas.
Utilizar un esquema para definir de forma exacta las etiquetas y los atributos.
La estructura y el diseño son independientes.
Otros lenguajes de Marcado:
Al mismo tiempo, existen otros lenguajes de marcas, algunos orientados a la presentación como RTF, y otros orientados a procedimientos como LaTeX.
Cómo funciona HTML
El lenguaje de marcado de hipertexto se basa en “distintivos” conocidos como etiquetas o tags con los cuales estructura el texto. Estos se colocan antes y después de cada elemento al que definen, y su característica principal es que se indican entre corchetes angulares (<>).
El siguiente es un ejemplo básico del uso del lenguaje de marcado
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mi primera página</title></head>
<body><h1>¡Hola, mundo!</h1><p>Bienvenidos a mi primera página web.</p></body></html>
📌 Explicación del código:
<!DOCTYPE html> → Define que el documento es HTML5.
<html lang="es"> → Indica que el idioma de la página es español.
<head> → Contiene información meta sobre la página.
<title> → Define el título que aparecerá en la pestaña del navegador.
<body> → Contiene el contenido visible de la página.
<h1> → Encabezado principal de la página.
<p> → Párrafo de texto.
Para aprender más de HTML
Compartimos uno de muchos cursos que pueden encontrar en la Web, esto no es obligatorio ni el mejor o más completo, simplemente tiene la idea de acompañar lo que se irá desarrollando en clase.
.
.
Estilos en HTML
Para cambiar el estilo en el que por defecto se visualizan los elementos de un documento HTML en un navegador web, existen varios métodos:
Estilo en línea (Inline): utilizando el atributo style.
Estilo interno (Internal): usando un elemento "style".
Estilo externo (External): empleando un archivo CSS (Cascading Style Sheets) externo al documento HTML.
Aquí tenemos que preguntarnos: ¿cuál es el mejor método?
Cómo funciona CSS
El mecanismo CSS se basa en “reglas predeterminadas” (o simplemente “reglas”) que permiten dar formato a los distintos elementos del lenguaje HTML. Sus componentes son:
Selector: identifica dónde se aplicarán los cambios y tiene el mismo nombre que en el código HTML. Después de indicarlo, el resto de elementos va dentro de llaves ( { } ).
Propiedad: se refiere al atributo que se va a modificar. Por ejemplo, si el selector especifica que se trata de un título, la propiedad puede ser el color o el tipo de fuente de dicho título.
Valor: es la característica de la propiedad. Siguiendo con el ejemplo anterior, podríamos referirnos al verde, en el caso del color, o Arial, para la fuente.
Las propiedades y el valor van separados entre sí por dos puntos ortográficos (:) y juntos conforman una declaración. A su vez, las declaraciones se separan con punto y coma (;).
El nombre de hojas en cascadas proviene de la forma en cómo el CSS jerarquiza la aplicación del formato a los distintos elementos de una web. Esto es de utilidad cuando varias reglas entran en conflicto a la hora de definir el aspecto.
Con CSS la prioridad la tienen las declaraciones que afectan a los elementos internos del código HTML. Después están las hojas de estilo, que configuran el diseño de forma más general y pueden ser externas (en un archivo enlazado al código) o internas (en el apartado de <style>, justo después de <head>). Por último están los criterios por defecto que aplica el navegador.
Para aprender más de CSS
De la misma manera que HTML, existen de los más diversos y gratuitos cursos para profundizar la práctica del estilo en cascada. Dejamos uno en la misma línea que el anterior
