comments 2

Curso de programación web desde cero: Clase 1

(Lo lees en 19:11 )

Y aquí comienza nuestra andadura hacia la libertad como creadores digitales gracias a este curso gratuito de programación web.
El objetivo de Incoming Startup no es otro que conseguir tu libertad para crear productos de IT. Por eso aquí aprenderás diseño, usabilidad, UX/UI, programación, métricas, analíticas, estrategias, de todo.
Así que, si estás [email protected] para hacer tu primera aplicación web sigue leyendo…

Objetivo del curso

El objetivo del curso es que entiendas como funciona la web contemporánea. Que conozcas la terminología, y por supuesto, que también seas capaz de crear una página web.

En este curso gratuito de programación web vas a adquirir los fundamentos para poder profundizar y crecer en esto del desarrollo web, obtener los conocimientos que necesitas para poder entender técnicamente los proyectos web que te rodean y tener capacidad crítica y creativa en este campo.
En definitiva, el objetivo de este curso, es que aprendas sobre web.

Para quien está dirigido este curso

– Emprendedores sin blanca.
– Diseñadores y gente de UX/UI que no saben desarrollo web.
– Analistas cansados de esperar a que el programador incluya ese track de analytics.
– SEO y SEM cansados de esperar a que el programador les cambie las meta type=“description” o aquel h1 con las palabras clave para la campaña.
– Desarrolladores web que tuvieron que aprender por su cuenta.
– Cualquier persona que quiera crear un producto relacionado con la web.

Antes de empezar

Para crear y estructurar este curso he tenido muy presente qué es lo que me hubiera gustado aprender a mi en su momento.

Algunas personas con amplios conocimientos del desarrollo web ya han visto gran parte de este curso. Algunos me han preguntado sobre el hecho de no crear videotutoriales. Les he explicado porqué no me parece oportuno el crearlos para este curso.

Entiéndeme. Para mí hubiera sido mucho más cómodo y rápido crear una serie de videos explicativos, subirlos a youtube y ponerte aquí lo enlaces.
Para ti sería mucho más rápido de ver y quizá más cómodo.

Pero no aprenderías lo mismo.
En este curso vamos a tratar aspectos fundamentales para comprender el desarrollo web. Si no tienes estos conceptos claros no entenderás el código, y no podrás seguir aprendiendo. Te costará mucho. Es muy difícil aprender algo que no se entiende.
Este curso trata de entender y de aprender. Y para aprender, no hay nada mejor que leer y absorber reposadamente, poco a poco. Probar tu el código, escribirlo, equivocarte y experimentar. Eso es mucho más instructivo que verme a mi escribir código.

Recuerda: la clave es aprender los conceptos básicos y practicar mucho, pero sobretodo equivocarse. Así que si te parece bien… ¡empezamos!

Comienzo del curso

Si esperabas un curso tranquilo, relajado y teórico te equivocabas. Para coger moral, en esta primera clase, vamos a hacer nuestra primera aplicación web.
No vamos a hacer ningún Spotify, ni siquiera un Facebook, pero sí vamos a hacer una mini aplicación que nos permita entender el funcionamiento de la web y de paso nos motive a seguir aprendiendo más y más.

Para mi es más importante que sepas lo que puedes llegar a hacer y que tengas una visión general del desarrollo web que cualquier otra cosa. A mi, los cursos excesivamente teóricos me aburren, así que en esta primera clase veremos algunas cosas por encima.

Recuerda que el objetivo es que adquieras un poco de perspectiva sobre de qué trata el desarrollo web, y sus bases más elementales, y ahora veremos muchas cosas por encima. Ya tendremos tiempo de verlo todo en profundidad.

1.- Un poco de perspectiva: frontend, backend y bbdd

Estructura básica y ciclo de la web moderna.

Estructura básica y ciclo de la web moderna.

Hoy día una aplicación web, o incluso una web pequeña como por ejemplo un blog, se compone de tres elementos de los cuales habrás oído hablar: el frontend, el backend y las bases de datos.

Bases de Datos: Son las estructuras donde se almacenan los datos que necesita nuestra web o una aplicación, y cómo se relaciona con el resto de la información. Por ejemplo, cuando hacemos login en una app, y creamos el usuario, los datos de user y password se almacenarán en una base de datos. Algunas tecnologías para bases de datos son MySQL, Mongo DB,etc, y muy probablemente habrás oído hablar de ellas.

El backend: es la parte de una web que no ven los usuarios. Es donde se encuentra la parte tecnológica, de gestión, de eficiencia, la que controla los procesos que se realizan, la lógica. En esta parte se utilizan lenguajes como PHP, Ruby, Python,etc, con sus frameworks Ruby on Rails, Django. Los frameworks no son más que herramientas que nos facilitan el uso de estos lenguajes.

El frontend: es la parte de la web que está “en contacto” con el usuario, es lo que nos muestran los navegadores web, y es lo que escanea Google para posicionarnos. Es la parte de la web que vemos. Cuando hablamos de frontend hablamos de HTML, de CSS y de Javascript.

Si hacemos una analogía de una web con respecto a una vivienda – puede que un poco forzada – podríamos decir que las bases de datos son los armarios y los cajones, donde almacenamos cosas con un orden, el backend son las instalaciones como la electricidad, la fontanería, el aire acondicionado, y que hacen la vivienda habitable y dota de servicios para que funcione y puedas vivir en ella. Y el frontend serían la pintura, las puertas e incluso los sofás, lo que tocamos, lo que se ve.

Este curso de programación web se centra exclusivamente en esta última parte, en el frontend.

2.- Cómo funciona la web-frontend

Para conocer el proceso de web en frontend, vamos a hacer un experimento. Sigue estos pasos:

– Abre tu editor de textos favorito. (En mi caso es Sublime Text, y lo puedes descargar aquí
– Crea un nuevo documento, y llámalo test.html

Creando test.html

Creando test.html


– Escribe: “Hola Mundo” y salva el archivo.
Escribe Hola Mundo en el documento

Escribe Hola Mundo en el documento


– Abre test.html con tu navegador favorito, con Abrir archivo… o directamente arrastrando el archivo dentro de la vista del navegador.
Abre el html desde el navegador.

Abre el html desde el navegador.


Tachán! Acabas de crear tu primera página web! Enhorabuena.
Tu primera web...más o menos.

Vamos a analizar el proceso de lo que ha ocurrido: hemos creado un archivo de tipo html, que ha sido interpretado por un navegador web, y ha mostrado el contenido. Eso es el frontend.

Esquema frontend

Esquema frontend

Si bien, nuestro archivo test.html no es una página web como tal, ya que no estamos aportando ningún tipo de información al navegador. El no entiende nuestro texto, y es nuestra misión que entienda la información que contiene nuestro documento. Tenemos que indicarle de qué se trata cada elemento que incluya nuestro html.

3.- HTML primeros pasos

El navegador (y Google) necesitan conocer la información de nuestras páginas web. Para ello utilizamos un lenguaje semántico: HTML, cuya misión es indicar a los motores de render de un navegador web de qué tipo son los elementos que componen nuestro documento. A Chrome hay que indicarle, cuales son las imágenes, de qué dimensiones queremos mostrarla, y qué imagen es, debemos indicarle lo que es texto, lo que es un título, lo que se una sección y un artículo,etc.

HTML es el lenguaje que modela la información de los documentos para que lo entiendan los navegadores, no es un lenguaje de programación en sí.

Esta información semántica se realiza mediante etiquetas. Las etiquetas empiezan por el símbolo < y acaban con el símbolo > y en medio se encuentra el contenido:

<etiqueta>Contenido</etiqueta>

Algunos tipos de etiqueta son:

<p>Esto es un párrafo</p>
<title>Esto es un título de una página</title>

Hay etiquetas que no tienen contenido, por ejemplo las etiquetas meta:

<meta />

que por tanto no necesitan etiqueta de apertura y cierre.

Hay muchas etiquetas que necesitan aportar más datos al navegador. Estos datos se llaman atributos, y se colocan en la apertura de la etiqueta. Por ejemplo, para indicar una imagen hacemos:

<img src=”nombre-de-la-imagen.jpg” />

Esta es una etiqueta sin cierre, con un atributo src cuyo valor es el nombre y la ruta de la imagen para que el navegador la pueda cargar.
También hay etiquetas que pueden tener varios atributos, como por ejemplo:

<meta type=“description” content=“Esta es una etiqueta con dos atributos, type y content”/>

Un documento HTML, se dispone en forma de árbol. Es una estructura jerárquica, por ello las etiquetas de los elementos se abren y se cierran al mismo nivel.
La estructura básica HTML se compone de los siguientes elementos en forma de árbol:

Jerarquía de una estructura básica HTML.

Jerarquía de una estructura básica HTML.

Dentro de HTML encontramos dos elementos al mismo nivel, que son head y body:
head: aquí va el contenido que no ve el usuario, y que es necesaria para el navegador, como el título de la página, la descripción (que luego muestra Google), los enlaces a otros archivos, las etiquetas de Google Analytics,etc.
body: aquí va el contenido que es visible para los usuarios.

Vamos a realizar un ejemplo, que es como mejor se entienden las cosas:

– primero crea un nuevo archivo en tu editor de texto que se llame clase1.html
– ahora creamos la estructura básica del archivo html: elemento html, y en su interior un head y un body, tal y como está en el esquema superior.
– si queremos añadir algo de contenido tendremos que hacerlo dentro de la sección body. Por ejemplo un h1 y un párrafo en cuyo interior hay un enlace. Un h1 es un texto de título, muy usado para los títulos de los artículos de un blog, por ejemplo.

<h1> Hola Niño!</h1>
<p> Cómo estás??</p>

Este sería nuestro esquema html:

Nuestra estructura html con un h1 y un p en el body.

Nuestra estructura html con un h1 y un p en el body.

Fíjate como se abren y se cierran las etiquetas respetando la jerarquía de árbol. Esto es vital.
Si te das cuenta, cada nivel jerárquico se encuentra con distinto tabulado. Esto se llama identación, y es muy importante para darle legibilidad al código y evitar errores. Así a simple vista estamos viendo la jerarquía de la estructura html.

Por cierto, si una línea está comentada no será renderizada por el navegador. Para comentar una línea hay que añadir los siguientes elementos:

 <!— texto comentado que no será renderizado por el navegador —>

Los comentarios son muy frecuentes, y se utilizan para dejar anotaciones que nos puedan aclarar una sección de código o dejar un comentario para un compañero de proyecto.

Tenemos nuestra estructura básica creada, si bien nuestro navegador necesita más información. Con la estructura básica no es suficiente.

¿Te has dado cuenta que la ñ que he añadido al h1 y los acentos en nuestro párrafo no se ven correctamente?

Algo raro está pasando en nuestro html

Algo raro está pasando en nuestro html

Esto es por la codificación del archivo. Para que se vean correctamente los caracteres latinos en nuestras páginas web, necesitamos especificarle al navegador que la codificación es UTF-8. Esto lo podemos hacer mediante una etiqueta meta en el head, recuerda, la parte de la web que no ve el usuario.
También es muy importante indicarle al navegador en qué idioma está el contenido, mediante el atributo lang en la etiqueta html.

<html lang=“es”>

El documento debemos iniciarlo indicándole al navegador que tipo de documento es, en este caso html:

<!DOCTYPE html>

También le añadimos un title y una meta description, tal y como hemos visto anteriormente. El título será mostrado en la parte superior del navegador, generalmente en la pestaña o en la barra superior. El título también es mostrado en las búsquedas de Google. Por cierto, este título no debe ser mayor de 65 caracteres para que no salga cortado en los resultados de búsqueda de Google.

La descripción se incluye en una etiqueta meta con los atributos description y content. Esta es la descripción que muestra google en los resultados de búsqueda, y no debe ser mayor de 150 caracteres.

Title-y-meta-description-en-google

Esta estructura básica es común a todas las web.

Así queda nuestro html:

Así queda nuestro test.html

Así queda nuestro test.html

Y así se ve en nuestro navegador.

Y así se ve en nuestro navegador.

4.- CSS primeros pasos

CSS tampoco es un lenguaje de programación, sino que se encarga de dotar de estilo e información visual a las etiquetas de nuestro archivo html.
Esta información gráfica, jamás debe mezclarse con la semántica. Es decir, nunca debemos añadir información gráfica en el html, sino que los crearemos en un archivo independiente con extensión .css y que será enlazado al archivo html.

Este enlace se realiza en la parte que no se ve de nuestro html, en el head y se realiza con una etiqueta:

<link rel="stylesheet" href=“ruta-del-archivo-y-nombre-style.css"> 

Con esta línea le estamos indicando al navegador que tiene que leer este archivo y renderizarlo.

En CSS se trata de dotar de estilo desde los elementos más genéricos hasta los más detallados o particular, como si de una cascada se tratara.
Y estos estilos se crean mediante selectores. Un selector es el identificador del elemento html al que queremos dar estilo y entre llaves pondremos que atributos queremos estilizar, y con qué valor:

selector {
	atributo: valor;
}

Pero nada mejor que un ejemplo para entenderlo.
– crea un archivo nuevo en el editor de texto y llámalo style.css
– lo primero que tenemos que hacer es linkarlo o enlazarlo a nuestro html. Para ello usamos la etiqueta link indicándole el archivo y la ruta.
– ahora supongamos que queremos darle estilo al párrafo. Para ello haremos:

p{
	color:blue;
}

Con esta simples líneas de código, todos los textos que estén dentro de una etiqueta p se pondrán de color azul.

Para comentar una línea en un archivo css usamos la doble barra: //
Y para hacerlo multi-línea, empezamos con /* y terminamos al final del bloque de texto que queremos comentar con */

Vamos a probarlo:

– crea un archivo que sea style.css en una carpeta que se llame css en el mismo directorio donde se encuentra tu test.html

Creando un css.

Creando un css.


– ábrelo en tu editor de textos y crear una regla para colorear los párrafos:

p{
	color:blue;
}

– lo enlazamos con nuestro test.html:

<link rel="stylesheet" href="css/style.css">

– recargamos nuestro test.html en nuestro navegador
– aparece nuestro párrafo en color azul.

Nuestro párrafo coloreado en azul con nuestra regla en css.

Nuestro párrafo coloreado en azul con nuestra regla en css.

5.- Javascript primeros pasos

Javascript es el lenguaje de programación estándar de la web. Es el lenguaje de programación que dota de interactividad y dinamismo a nuestra página.
Al igual que ocurre con el CSS, lo normal es tenerlo en un archivo externo y enlazarlo en nuestro html. Ahora bien, como ya comentamos anteriormente, la ejecución del html por parte del navegador es secuencial, de arriba hacia abajo, línea tras línea y en muchas ocasiones necesitamos ejecutar código javascript a diferentes alturas de nuestro documento, y no solo en el head, aunque son cosas que iremos viendo poco a poco. Simplemente tenlo en cuenta.

Javascript es un lenguaje de programación que es ejecutado por el navegador, no necesita de un compilador.
Esto no ocurre con otros lenguajes de programación como PHP.

Para ejecutar javascript en nuestro html, basta con usar la etiqueta script.
Por ejemplo:

	<script style="text/javascript">
		alert("Hola Mundo!");
	</script>

El contenido que hay entre la etiqueta script es código javascript.
Si añades ese código al documento y recargas la página, obtendrás una alerta, una ventana emergente con el texto “Hola Mundo”. Exactamente lo que has dicho al navegador que hiciera.

Alerta de Javascript

Alerta de Javascript

Vamos a analizar qué ha pasado:

Funciones:

Has utilizado una función llamada alert, que entiende el navegador, y que consiste en un trozo de código que provoca que se genere la ventana emergente, y muestra el texto que has indicado como parámetro. En este caso una cadena de texto “Hola Mundo”.

nombreDeLaFuncion(parámetro);

Las cadenas de texto se designan entre comillas, otros valores numéricos como un entero van sin comillas, Prueba a cambiar el parámetro de la alerta:

     alert(47); 
Mostrando un entero en una alerta con Javascript.

Mostrando un entero en una alerta con Javascript.

Y puedes hacer operaciones matemáticas (la multiplicación se indica con el asterisco):

	alert(12*24); 
Mostrando el resultado de una operación matemática en una alerta.

Mostrando el resultado de una operación matemática en una alerta.

Variables:

Una variable es una instrucción nativa que me permite crear un elemento y asignarle un valor, tal y como hacemos en álgebra.
Para crear una variable utilizamos la instrucción var seguida del nombre de la variable. Por ejemplo:

var nombre = valor; 

para asignarle un valor a dicha variable:

var nombre = “Fran”;

Le hemos asignado a la variable nombre un valor de tipo cadena de texto que es igual a “Fran”.

Las variables podemos usarlas en Javascript cuando queramos. En el caso de la función alert podemos concatenar texto, es decir, unir trozos de texto, unir strings:

var nombre = "Fran";
alert("Mi nombre es: "+nombre);

Funciones con varios parámetros:

Existen muchas funciones que aceptan varios parámetros. Los parámetros pueden ser obligatorios u opcionales. Por ejemplo, la función prompt:
Prompt es una función que acepta dos parámetros, uno obligatorio, y otro opcional. Esta función muestra una ventana emergente con un texto y un campo de tipo input donde el usuario puede insertar datos y podemos capturar esos datos.

prompt("¿Estás aprendiendo Javascript?","Esto es un valor por defecto");
Mostrando un prompt para capturar datos que ingrese el usuario.

Mostrando un prompt para capturar datos que ingrese el usuario.

El segundo parámetro es opcional y consiste en asignar un valor por defecto para facilitar al usuario.
Un prompt nos permite almacenar el dato introducido por el usuario si creamos una variable y le asignamos ese valor. Por ejemplo:

var nombre;
nombre = prompt(“Introduce aquí tu nombre”);

En este caso, cuando el usuario ingrese su nombre, y pulse el botón de Aceptar, en nuestra variable nombre se almacenará ese dato.

Escribiendo desde Javascript en el HTML:

Lo interesante de Javascript es que nos permite interactuar con nuestro html añadiendo elementos o cambiándolos.
Para ello se pueden utilizar funciones como document.write.
No es la forma idónea de escribir sobre HTML, pero por algo tenemos que empezar. Lo bueno es que soporta etiquetas html, y por tanto podemos darle estilo con css.
Algo que nos viene genial para nuestra primera app:

Nuestra primera app: What’s your name

Nuestra primera app va a consistir en decirle al usuario que acaba de acceder a la app What is your name mediante una alerta.
Cuando acepte, le pediremos el nombre y los almacenaremos en una variable. Para ello usaremos un prompt.
Utilizaremos la variable y la función document.write para dar la bienvenida en nuestra web a nuestro visitante.

Piénsalo bien, porque con lo poco que hemos visto deberías ser capaz de hacerlo. De hecho si aceptas un consejo, no sigas leyendo, intenta crear la app, y luego vuelve y mira cómo lo he hecho yo.

Voy a resolverlo de forma un poco esquemática. Si no sabes resolver uno de los pasos vuelve atrás al documento, a la explicación, y seguro que sabrás resolverlo. Si aún así no puede seguir sigue el código tal y como te indico y luego pregunta en comentarios para poder resolver tus dudas:

– Lo primero es crearnos un archivo html. En este caso lo he llamado your-name.html
– Creo una estructura básica de html. Deberías sabértela de memoria.
– Creo una hoja de estilo style.css y la enlazo a mi html
– Creo un logic.js donde crearé todo mi código de javascript y lo enlazo a mi html
– Lo primero que necesito es una alerta para indicarle al usuario que ha entrado en mi app, así que en logic.js:

	alert("Hola! Esta es la app What's your name");

– Lo siguiente es mostrarle un prompt para que en el campo de input, el usuario ponga su nombre y poder capturarlo para saludarlo después. Pero ojo para usar el nombre de usuario necesito almacenarlo en una variable que me permita usarlo después, para ello hago:

var nombre = prompt("Escribe aquí tu nombre por favor, para poder saludarte",
	"Fran de Incoming Startup");

– Utilizo una alerta para confirmar al usuario de que su nombre es correcto:

alert("Tu nombre es: "+nombre);

– Y ahora escribo en mi html:

document.write("<p>Hola que tal <span>"+nombre+"</span>
</p>");

Como puedes ver he añadido etiquetas html en mi javascript, lo que es genial para por ejemplo, poder colorear el nombre con css.

– Para ello voy a mi style.css y añado la siguiente regla para colorear en rojo el nombre.
– Voy a ponerle un mayor grosor a los textos que estén en los p:

p{
	font-weight: bold;
}

– para colorear el nombre tengo que crear una regla con orden jerárquico. Como puedes ver, la variable nombre la tengo dentro de un párrafo, y dentro de una etiqueta span por tanto para crear una regla de css que lo afecte tengo que hacer lo siguiente:

p span{
	color: red;
	font-size: 28px;
}

De paso le he subido el tamaño al texto con font-size.

– También añado a mi your-name.html un párrafo de felicitación por acabar tu primera app.

		<p>Impresionante...¡Acabas de crear tu primera app web!</p>

Aprovecho que el renderizado es secuencial y se con total seguridad de que el texto solo se imprimirá en pantalla tras realizar todo el javascript. Mientras tanto el fondo de mi html estará en blanco.

Esta es toda la secuencia de la aplicación que acabas de hacer:

Damos la bienvenida al usuario con una alerta.

Damos la bienvenida al usuario con una alerta.

Prompt para capturar el nombre del usuario y guardarlo en una variable

Prompt para capturar el nombre del usuario y guardarlo en una variable

Confirmamos el nombre introducido mediante una alerta.

Confirmamos el nombre introducido mediante una alerta.

Escribiendo y coloreando un saludo en nuestro html

Escribiendo y coloreando un saludo en nuestro html


Enhorabuena!! Acabas de crear tu primera aplicación web!
Fea, si, muy fea….pero tuya!!!

Aquí tienes el código de los 3 archivos en imágenes.

Archivo your-name.html

Archivo your-name.html

Archivo style.css

Archivo style.css

Archivo logic.js final

Archivo logic.js final

Esta primera clase ha quedado un poco larga, pero creo que era inevitable. Lo que busco con esta primera clase es que consigas terminar tu primera app, que consigas la perspectiva suficiente para entender cual es el proceso de crear una aplicación web completa.

Por favor, es muy importante que te asegures de haber entendido los fundamentos. Es muy importante que antes de continuar con la siguiente clase, repitas este ejercicio completo, entiendas todo lo que estás haciendo y experimentes un poco con el código.

Ya hemos visto como funciona la web, y lo que somos capaces de hacer. A partir de las siguientes clases aprenderemos un poco más en profundidad cómo programar en la web de hoy día.

Antes de irnos, a modo de resumen:

– Con HTML dotamos de información semántica a los navegadores que renderizarán nuestras webs, y a Google que nos indexarán y nos posicionarán. Esta información semántica, la añadimos mediante .
– Con CSS dotamos de información gráfica a estos elementos semánticos, como color, posición y estilos.
– Con Javascript programamos la web, dotamos de interactividad a nuestra información semántica para interactuar con el usuario de forma dinámica.

Para la Siguiente clase: HTML5 estructura semántica actual. Un ejemplo práctico.

¿Qué te ha parecido la clase de hoy? ¿Te ha gustado? ¿Has tenido dudas? No te preocupes, contestaré a todo lo que necesites en los comentarios. Si alguien pregunta algo y tu conoces la respuesta, hazlo! aportemos entre todos, ayudémonos a aprender.

Posts relacionados:
Curso de programación web: clase 0
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.
Clase 6, Position.
Clase 7, Instalando fuentes desde Google Web Fonts.
Clase 8, Fuentes seguras, añadiendo tus propias fuentes a tu proyecto web.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

2 Comentarios

  1. Juan Antonio Gomez

    Excelente la primera clase! Fácil, práctica y muy intuitiva. Nos vemos en la siguiente ;)

  2. FranciscoJGallardo

    Muchas gracias Juan Antonio! Me alegra mucho que te haya gustado.

Leave a Reply