El Desarrollo Web tiene un crecimiento exponencial, puesto a que evoluciona a medida de la Internet, es por ello que es fundamental comenzar a aprender al respecto.

Como se sabe:

Desarrollo web es un término amplio que define la creación de sitios web para Internet (World Wide Web) o una Intranet (red privada).

Para poder adentrarnos en este mundo, es conveniente comenzar por lo básico y, para ello, en este artículo mostraremos la estructura de un sitio web y,  así, destacar los conceptos de HTML (acrónimo de HyperText Markup Language), CSS (Cascading Style Sheets) y Js (Javascript).

En este caso, no utilizaremos ninguna herramienta que ayude al desarrollador (como Bower, npm, Webpack, etc.), de todas maneras recomendamos la posterior lectura de nuestro blog técnico

http://itech.folderit.net/1566/herramientas-imprescindibles-javascript-parte-1/

Como editor de texto se puede utilizar cualquiera, en mi caso utilizaré “Sublime Text 3”, pero también son buenas opciones “Atom”, “Notepad++”, “Visual Studio Code”, etc.

 

I. Comenzando

Para comenzar debemos comprender la estructura de un sitio web. El mismo cuenta de tres secciones básicas, a) un archivo .html (por defecto nombrado index.html) que es quien defina las secciones y el contenido de nuestro sitio, b) un archivo .css que le da estilos a nuestro sitio y c) un archivo .js que se utiliza para brindarle funcionalidad al mismo. Para relacionarlos no hace falta ordenarlos en carpetas (ni nombrarlas como a continuación), sin embargo, si es una buena práctica para que el proyecto sea comprensible para otros desarrolladores y, por lo tanto, escalable.

arquitectura del proyecto

 

II. Estructura Básica de un Sitio Web

En un documento del tipo HTML nos encontramos con la siguiente estructura básica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>

Lo primero que aparece en el código fuente de una página web es la declaración “DOCTYPE”. Esto le indica al navegador el tipo de documento que recibe.

Puesto que HTML ha evolucionado a lo largo de los años hay diferentes versiones del lenguaje. Al día de hoy se utiliza HTML5, por ello, en caso de utilizar alguna versión anterior, se debe indicar en dicha declaración.

Por ejemplo en HTML4.01 Strict se declara:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

La etiqueta <html> indica que comienza nuestro código, es el elemento raíz de nuestro documento HTML. Dicha etiqueta es la que contiene a todas las demás etiquetas del documento. En este caso indicamos <html lang=”es”> para que los buscadores (como Google) y navegadores (Firefox, Chrome, etc.) sepan que el contenido de nuestra página es en español, aunque señalarlo es opcional.

 

<head>

El elemento <head> es el contenedor de varios elementos, entre ellos el título del documento, el vínculo hacia otros documentos, información “meta” y más.

 

<head>

<meta charset=”UTF-8″>

<title>Document</title>

</head>

Como podemos ver, en el encabezado de nuestro documento, estamos indicando que nuestro sitio web contiene caracteres del tipo “UTF-8″ (lo logramos con la etiqueta <meta charset=”UTF-8”> ) y que el título de la misma será “Document”. Generalmente, en HTML, cada etiqueta que se abre luego se cierra, en este caso nuestra etiqueta “<meta charset=”UTF-8″>” no necesita ser cerrada puesto que lo realiza el navegador sin necesidad de hacerlo en el código.

 

<body></body>

Dentro del elemento body (en español: “cuerpo”), es donde escribiremos el contenido principal de nuestra página web, dentro del mismo se definirán otros contenidos como texto, vínculos, listas, tablas, imágenes, etc.

 

</html>

Como dijimos anteriormente el elemento “</html>” es el que indica que se cierra el contenedor del tipo HTML, en este caso, que termina nuestro código.

 

III. Hola Mundo

Continuamos nuestro proyecto creado anteriormente. Para ello, dentro del documento index.html, utilizaremos la estructura básica y agregaremos una etiqueta que indica un título, otra que indica un párrafo y, además, les daremos estilos a nuestro documento.

Para continuar, debemos copiar y pegar el siguiente código dentro del documento index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Comenzando mi primer Desarrollo Web</h1>
  <p>Gracias Folder!</p>
</body>
</html>

Al abrir el documento con nuestro navegador preferido, deberiamos visualizar algo como esto:

primer preview

<h1> es una etiqueta que se utiliza para indicar un título (o subtitulo), mientras que <p> indica que estamos escribiendo un párrafo.

Para más información sobre éstas y otras etiquetas dirigirse al siguiente enlace:

https://www.w3.org/wiki/HTML/Elements/h1,_h2,_h3,_h4,_h5,_and_h6

 

IV. Jugando con CSS

Al observar el resultado anterior, por más satisfacción que brinde el tener un resultado, hay que admitir una realidad: no es muy agradable a la vista. Es para esto que se introduce el concepto de “Hoja de Estilos” (Stylesheet en inglés), la cual se utiliza para dar atributos a nuestros elementos. No solo se puede indicar color (que será nuestro ejemplo inicial), sino también, indicar posición dentro de la página, transiciones, fondos, tamaños, bordes, etc.

Para comenzar se buscan cumplir tres objetivos:

  • Centrar el Titulo
  • Cambiar el color de nuestro texto
  • Modificar el color de nuestro fondo

Antes que nada, hay que “enlazar” nuestro archivo styles.css a el documento HTML, para que el navegador cargue los estilos tan pronto como cargue la página.

Para ello hay que agregar la siguiente etiqueta al encabezado del documento HTML:

<link rel="stylesheet" href="css/styles.css" type="text/css">

En la misma queda indicado que se debe enlazar la hoja de estilos del tipo css al archivo que se encuentra en la carpeta “css” llamado styles.css, es decir,  quedaría de la siguiente manera en el código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
  <h1>Comenzando mi primer Desarrollo Web</h1>
  <p>Gracias Folder!</p>
</body>
</html>

Ahora la página sigue cargando igual, pero esta vez lo hace junto con la hoja de estilos, aunque, como la misma está vacía, no se perciben cambios. Para modificar esto, debemos escribir el siguiente código en el documento styles.css:

body{
  background-color: #0D2441;
}

En este caso “body” actúa como un “Selector” es decir en css siempre que se dan atributos utilizaremos selectores. Aquí utilizamos el elemento body, pero podría ser una clase, id u otro tipo de selector.

Para más información sobre selectores visitar el siguiente enlace:

http://www.w3schools.com/cssref/css_selectors.asp

Después del selector se indican llaves para delimitar lo que abarca dicho selector, y dentro de las mismas, se escriben las propiedades que deseamos agregar. En este caso background-color indica que buscamos modificar el color de fondo. Luego se escribe el atributo correspondiente.

Para background-color elegí el color azul oscuro representado por el valor hexadecimal #0D2441 .

Para terminar éste post invitamos a agregar las siguientes propiedades:
Color de Texto
Alineación del Texto.

Debe quedar de ésta manera:

body{
  background-color: #0D2441;
}
h1, p{
  text-align: center;
  color: #FBFBFC;
}

 

V. Conclusión

Si todo sale bien, se debería obtener el siguiente resultado:

preview final

En la parte 2 se profundizará en HTML, buscando modelar un sitio web un poco más complejo.