La intención de este tutorial es proponer algunos ejemplos básicos a intermedio/avanzados para ir evolucionando en el conocimiento del lenguaje Html/Javascript, útil para la creación de Páginas Web, blogs, y contenidos web.
Un lenguaje de etiquetas
HTML es un lenguaje de etiquetas. El navegador web interpreta etiquetas definidas y estandarizadas. Estructura básica de una página html:
<html>
<head>
(...)
</head>
<body>
(...)
</body>
</html>
Dentro de la etiqueta <head> colocamos el título, la codificación de caracteres que utilizará nuestra página web(<meta charset="UTF-8">); la escala inicial que indica el nivel de zoom inicial cuando la página es cargada por primera vez, útil para que el contenido no se vea reducido cuando navegamos desde dispositivos móviles(<meta name="viewport" content="width=device-width, initial-scale=1.0">); así como otras instrucciones que luego veremos.
Dentro de la etiqueta <body> colocaremos nuestro contenido HTML; el mismo puede ser colocado en forma estática, o puede ser manipulado dinámicamente mediante el lenguaje JAVASCRIPT. El uso de Javascript permite interacción con el cliente o visitante. Lenguaje Javascript puede ser incluido dentro de <head>; dento de <body>: después del código Html que modificará (<script> (...) </script>); en un archivo externo con extensión .js que se incluirá mediante una instrucción de inclusión en <header>. Las etiquetas Html también permiten la inclusión de código Javascript mediante los atributos de eventos, que veremos en el capítulo 3.
También los estilos CSS pueden ser definidos en <head>, en <body> antes del código Html que dará formato (no es considerado una buena práctica incluir etiquetas <styles> dentro de <body>); en un archivo externo con extensión .css que se incluirá mediante una instrucción de inclusión dentro de <head>, o en las mismas etiquetas Html dentro del atributo "style".
¿Javascript y Css en archivo externo, en <head> o en las mismas etiquetas Html?
Es habitual incluir hojas de estilo o código Javascript desde archivos externos cuando los mismos van a ser utilizados en más de una página. De este modo simplificamos el trabajo. También si tenemos muchas líneas de código Javascript o definimos muchos estilos de manera que generamos muchas líneas de código, probablemente lo hagamos en un archivo externo. Esto lo veremos en el próximo capítulo.
¿Conviene usar librerías Javascript como JQuery?
JQuery nació para darle solución al problema de compatibilidad que generaba el uso del navegador web Internet Explorer (en versiones antiguas) que no adoptaba todos los estándares W3, por lo que lo que se veia bien en un navegador, no se obtenía el mismo resultado en otro, dentro de los más usados. Luego surgieron también librerías como Bootstrap que tenían un objetivo más integral, facilitando botones, formularios y modales, etc, integrando CSS y JQUERY.
En mi experiencia son valiosas las librerías, puesto que ofrecen una solución general (casi integral para diseñadores web) en la creación de páginas web y facilitan los usos más comunes. Pero para aprender a programar en el sentido de la palabra, se debe aprender Javascript nativo; es por esto que los ejemplos de este curso serán únicamente en Javascript y no se utilizarán librerías web. Saber usar una librería, si bien requiere tener conocimientos básicos de programación, nos limita a las soluciones que nos puede ofrecer esa librería específica.
Mi primera Página
Sin ningún conocimiento de programación podemos crear un archivo .html y verlo desde nuestro ordenador. Esto lo podemos hacer abriendo un archivo .txt copiando código Html y guardándolo con extensión .html. Luego, al abrirlo, nuestro dispositivo lo hará desde el navegador web predeterminado. Por ejemplo, copiamos y pegamos las siguientes líneas:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
</head>
<body>
<h2>Mi Página Web</h2>
<p>Estoy dentro de una etiqueta <p> o "párrafo". Esta etiqueta tiene un márgen determinado por el navegador web.</p>
</body>
</html>
Vemos en el ejemplo anterior que las etiquetas tienen atributos. La etiqueta <html> tiene el aributo "lang" que está declarando el lenguaje que estamos utilizando en nuestra página web: "es = español". Esto sirve para que el navegador web sepa el idioma que se está utilizando. De esta manera navegadores como el Chrome nos pueden ofrecer la opción de traducirlo a otro idioma si detecta que estamos accediendo desde una ip que se corresponde a un país cuyo idioma nativo no es el español.
En una de las etiquetas meta definimos la codificación de caracteres: UTF-8 que es el estándard occidental, utilizado en América y Europa.
En la siguiente etiqueta meta definimos la escala inicial en 1.0: esto mantiene la proporción del zoom si se visualiza la página desde un dispositivo móvil.
En el cuerpo de la página o <body>, utilizamos una etiqueta de encabezado (pueden ser h1, h2, h3, h4, h5, h6). Estas etiquetas tienen un formato dado por el navegador web, siendo h1 el encabezado principal y decreciendo sucesivamente.
También la etiqueta <p> o párrafo tiene un formato de estilos dado por el navegador web.
Emulando un servidor web en nuestra computadora
Es conveniente instalar algún paquete que contenga un servidor web, un sistema de base de datos y un lenguaje del lado del servidor. Uno de los más usado es XAMPP, que es gratuito y viene configurado con el servidor web, la base de datos MySql y PHP. MySql y Php son la base de datos y el lenguaje del lado del servidor más utilizados en la web. Por lo que este paquete parece apropiado. Una vez instalado, los archivos de extensión .html .js .css los colocaremos en la carpeta: ../htdocs que es la carpeta donde van los archivos web.
Verificado que el servidor esté iniciado, conviene crear una carpeta para nuestro proyecto o sitio web dentro de htdocs. Por ejemplo: htdocs/miproyecto1/. Colocamos en esta carpeta nuestro archivo index.html, y podremos visualizar nuestra página navegando la dirección: localhost/miproyecto1/. Hay muchos video-tutoriales de cómo instalar y configurar Xampp, por lo que no nos extenderemos en el asunto.
Cabe mencionar que JAVASCRIPT es un lenguaje de programación del lado del cliente, esto es, lo interpreta el navegador web: No hay carga para el servidor en este caso puesto que todo el trabajo lo realiza el propio navegador web del usuario. Es importante no hacer código del lado del servidor que podría realizar el navegador. Lo agradecerá la empresa de hosting que hemos contratado, y nuestras sitios no tendrán penalización. Hay que considerar que por cada petición de consulta (o visita) a nuestra página web, el servidor debe ejecutar el código Php que contenga.
A programar..
Dicho lo anterior, y habiendo instalado nuestro programa de edición de código preferido (NotePad++, Atom, Visual Studio Code, etc) empecemos a crear páginas web. Un buen editor de código debe indicar el número de línea y dar formato de color a las instrucciones del lenguaje. Es muy útil que pueda dar sugerencias de código y tenga la opción de cerrar etiquetas automáticamente.
Siguiente → |