Curso de programación web desde cero, clase 4
comment 0

Curso de programación web desde cero: Clase 4

(Lo lees en 08:53)

Continuamos con una nueva entrega del curso de programación web desde cero de Incoming Startup. En esta ocasión vamos a hablar de un montón de cosas interesantes, como los id, las clases, el dimensionamiento de un elemento web o normalize.css.

Si recuerdas, en la última clase, estuvimos viendo conceptos de maquetación web básica como la teoría del modelo de cajas, el margin, el padding, y el concepto de div.
Si no lo recuerdas, deberías darle un repaso rápido a la clase anterior.

En este post vamos a seguir avanzando en ese mismo sentido: dominando los conceptos más básicos para empezar a andar y correr con seguridad más tarde.

Identificando elementos: atributos id y clase.

Hasta ahora hemos utilizado como selector, esto es, como identificación de elementos html para asignar estilos css, las propias etiquetas semánticas de los elementos. Por ejemplo, para estilizar un h1, usábamos como selector el h1, para estilizar un header, usábamos como selector el header.

Pero para poder estilizar elementos más genéricos como los div, necesitamos usar otro tipo de selectores, para poder identificar cada elemento correctamente.
Para ello usamos los atributos id y class.

Tenemos fundamentalmente dos formas de identificar un elemento web que no tienen información semántica:

id: el id es un atributo HTML que sirve para identificar inequívocamente un elemento en nuestro html, en nuestra página. Es decir, un id solo puede identificar a un elemento y por lo tanto no podemos repetir ese id en nuestra página. Por tanto, los id son útiles cuando necesitamos etiquetar elementos únicos en nuestro html.

Generalmente los id se usan para interactuar con nuestros elementos html desde nuestros archivos javascript, o para poder interactuar con nuestros elementos desde Analytics o Google Tag Manager.
Por ejemplo, si queremos saber si un usuario ha pulsado un botón en concreto de nuestra web podemos asignar un id para identificar ese botón, que será único.

Para crear un atributo id dentro de la etiqueta de nuestro elemento html, le asignamos un valor, en este caso un nombre:

HTML:

<div id="caja-roja"></div>

Para referirnos a un id desde nuestro css, usaremos el símbolo # seguido del nombre del identificador. En este caso en concreto:

CSS:

#caja-roja {
	background-color:red;
}

clase: una clase es un atributo HTML que nos permite identificar elementos que tienen características en común. Una clase viene a ser como un molde de galletas, el cual configuramos a nuestro gusto y con el cual creamos elementos que serán iguales entre sí. Tendrán el mismo molde.

Las clases son sin duda, el atributo de html más frecuente ya que lo usamos básicamente para dar estilo a elementos que tienen las mismas características.

Una clase se declara en el html como cualquier atributo, asignándole un valor, que en este caso será el nombre de la clase:

HTML:

<div class="caja-roja"></div>

Para interactuar con las clases que hemos definido en nuestro html, usamos el . seguido del nombre de la clase, por ejemplo:

CSS:

.caja-roja {
	background-color:red;
}

Un elemento puede tener varias clases y así puede adquirir características de varios tipos de elemento. Dicho de una forma simplificada: imagina que tenemos una clase declarada para elementos que tienen un borde naranja de 2 px, y otra clase diferente para elementos que tienen color azul.
Si queremos un elemento que tenga esas dos características, esto es, fondo azul con borde naranja no tenemos que crear otra clase, sino que le podemos asignar las dos simplemente separando ambas clases en nuestro atributo html con un espacio:

CSS:

.borde-naranja{
	border: 1px orange solid;
}

.fondo-azul{
	background-color: blue;
}

HTML:

<div class="borde-naranja fondo-azul"></div>

Esta es parte de la magia y la potencia del CSS y de las clases. Por eso es muy importante, antes de empezar un proyecto, reflexionar y analizar qué clases vas a necesitar crear para el mismo.

Es muy importante aplicar ciertas metodologías que nos ayuden a plantear un proyecto y que crezca de forma controlada. He llegado a ver proyectos totalmente inabordables y descontrolados.

Recuerda que muchos proyectos hay que mantenerlos, modificarlos tiempo después o incluso colaborar con más compañeros, por lo que el orden y la metodología son claves para el éxito del proyecto.

Ya hablaremos de métodos como SMACSS cuyo libro te recomiendo encarecidamente leer, y BEM, que son métodos y formas de nombrar nuestras clases en CSS con un determinado criterio.

Sistema escalable de CSS, Smacss.

Sistema escalable de CSS, Smacss.

También hablaremos de frameworks como Bootstrap o Foundation, que son colecciones de clases creadas que nos ayudan a dar estilo a nuestros proyectos web. Pero esto será en las últimas clases, aún queda mucho para eso.

Bootstrap 3. El framework CSS por excelencia.

Bootstrap 3. El framework CSS por excelencia.

Foundation, uno de los mejores frameworks para CSS.

Foundation, uno de los mejores frameworks para CSS.

Dimensionando una caja: width y height.

Ya comentamos que todo elemento web se comporta como una caja, y también vimos lo que es un div, que no es otra cosa que un elemento web sin significado semántico, una caja en su sentido más general.

Algo fundamental en la maquetación web es poder asignar un tamaño a un elemento web, a una caja. Pues bien, podemos dimensionar una caja aportándole un ancho y un alto. Esto lo hacemos asignándole los atributos CSS width y height a dicho elemento.

Para asignar un valor de ancho o de alto a un elemento web, lo más sencillo es indicar el valor en pixeles. Pero vamos a ver un ejemplo.
Vamos a crear un div, de color rojo y de dimensiones 50 px de alto y 100 px de ancho.
Como un div es un elemento genérico, vamos a utilizar una clase como selector de CSS:

HTML:

<div class="caja-roja"></div>

CSS:

.caja-roja {
	background-color: red;
	width: 100px;
	height: 50px;
}
Una caja roja de 50 pixeles de alto y 100 pixeles de ancho.

Una caja roja de 50 pixeles de alto y 100 pixeles de ancho.

Ahora bien, hoy día, aplicar valores absolutos para dimensionar un elemento no tiene demasiado sentido.
Uno de los requisitos que tiene que cumplir nuestros proyectos web a día de hoy es que se adapte a cualquier tipo de pantalla. Nuestros diseños deben ser elásticos, adaptativos.
Por ello tenemos que dimensionar nuestros elementos de forma dinámica, para que puedan adaptarse a la pantalla de un dispositivo móvil.
Hay muchas formas de dimensionar nuestros elementos de forma dinámica, como por ejemplo, los %:

Al div anterior podemos decirle que ocupe la totalidad de la pantalla independientemente de los pixeles que esta tenga. Basta con indicarle un width del 100%, o indicarle un 50% si queremos que ocupe la mitad de la pantalla:

Dimensionando una caja en pixeles o por porcentaje de forma dinámica.

Dimensionando una caja en pixeles o por porcentaje de forma dinámica.

CSS:

.caja-roja {
	background-color: red;
	width: 100%;
	height: 50px;
}
La misma caja, en función del ancho de pantalla se ajusta a la mitad de la misma.

La misma caja, en función del ancho de pantalla se ajusta a la mitad de la misma.

Otra forma de dimensionar un elemento de forma elástica son los em y los rem. Pero los veremos más adelante cuando tratemos la tipografía. No falta mucho.
Básicamente se basa en la idea de dimensionar nuestros elementos en base al tamaño de la fuente que hemos definido. En el caso de los em, se trata de la medida de la letra M mayúscula. Por tanto si hemos definido que la fuente del documento es de 16 px, 1em será 16 px. Si dimensionamos un elemento indicando ancho de 2em, serán 32 px. De momento no te preocupes por esto, sólo intentar captar la idea.

One more thing: Normalize.css

Antes de terminar la clase de hoy, me gustaría hacer un pequeño punto y aparte.

Presta atención a la posición de la caja roja en nuestro navegador. ¿Porqué, si no hemos asignado ningún margen a nuestra caja, hay una especie de margen blanco entre nuestra caja roja y la ventana de nuestro navegador?

Parece que alrededor de nuestro div hay un margen que no hemos puesto....

Parece que alrededor de nuestro div hay un margen que no hemos puesto….

La respuesta es muy sencilla: porque los navegadores vienen con estilos predeterminados que modifican el comportamiento de nuestros elementos, y encima, para complicarlo más, cada navegador trae estilos diferentes entre sí.

Esto produce varios efectos no deseados: el primero es que afecta a cómo deben relacionarse los objetos de nuestra página entre sí, ya que añade márgenes, paddings y diferentes estilos.
Otro efecto no deseado es que ,como cada navegador viene con sus estilos predefinidos y son diferentes, nuestras maquetaciones pueden verse afectados de diferente forma en función del navegador con el cual estamos renderizando nuestra web. Un h1 no tiene el mismo tamaño predeterminado en Safari o en Chrome.

Para solucionar este hay varias opciones. Quizá las más destacadas sean reset y normalize.

Reset es un archivo que se enlaza en nuestra página como si una hoja de estilo css se tratara, y lo que hace es resetear todos los estilos. Es decir, a todos los atributos le asigna un valor de 0.
Debido a que en HTML se ejecuta el código en orden secuencial, cuando el link de reset lo colocamos antes de nuestro estilo, lo que ocurre es que todos los estilos, incluidos los del navegador se ponen a cero.
Tras esto se carga nuestro CSS sin que sea interferido por los estilos del navegador.
El problema de reset es que una vez aplicado, un h1 tiene el mismo tamaño que un p, lo cual es un inconveniente porque además nos obliga a sobreescribir todos los elementos semánticos que utilicemos.

Por ello hay otra solución mucho más optima y que te recomiendo, que es Normalize.

Normalize al rescate!

Normalize al rescate!

Lo que hace Normalize es homogeneizar los estilos de todos los navegadores. Cuando usamos Normalize, un h1 tiene el mismo estilo predeterminado en todos los navegadores, tanto en Chrome como en Safari.
Puedes descargarlo de aquí.
Al descargarlo se abre una ventana del navegador con el código. Simplemente cópialo y pégalo en un archivo CSS en blanco que creas tu mismo. Enlázalo con tu html, y recuerda hacerlo siempre antes de tu CSS de estilos:

HTML:

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

Recuerda añadir siempre a todas tus páginas tu normalize.css. Ahora si te fijas ha desaparecido ese margen que aparecía alrededor de nuestra caja roja, y además ha cambiado el tipo de fuente.

Gracias a normalize nuestro div ya no tiene márgenes y se comporta de una forma civilizada,

Gracias a normalize nuestro div ya no tiene márgenes y se comporta de una forma civilizada,

Conclusión:

En esta clase hemos avanzado mucho. Primero hemos aprendido qué son los id y las clases. Hemos aprendido a dimensionar elementos html, y a que sean elásticos. Y también hemos aprendido a normalizar los estilos base de nuestro proyecto web en todos los navegadores.
Pero si esta clase ha sido importante por los temas que hemos visto, las siguientes son capitales: display y position… ahí lo dejo.

Post Relacionados:

Clase 0, Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.

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.

Leave a Reply