Introducción a CSS y sus propiedades

En esta instancia doy por hecho que tienen una noción al menos básica de HTML5 y que al menos por curiosidad saben que es CSS. Si por el contrario no lo saben he aquí una definición:

Según nuestra amiga Wikipedia "Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en XML como son XHTML o SVG."

Empezando con CSS

Las hojas de estilo (CSS) requieren conectarse con las páginas HTML y al mismo tiempo, poder comunicarse entre sí. Para que las hojas CSS puedan enviar las instrucciones de diseño y estilos, se necesita tener un identificador en las hojas HTML para que podamos manipular cada etiqueta. Para eso, están las propiedades “id” y “class”, esto permite una conexión entre ellos y sepas exactamente qué estás manipulando. Realmente es muy sencillo:

HTML

<etiqueta id=”usuario1” class=”azul”></etiqueta>
<etiqueta id=”usuario2” class=”azul”></etiqueta>

CSS

#usuario1 {
    /* Fuente especial para usuario1 */
    font-size:16px;
}

#usuario2 {
    /* Fuente especial para usuario2 */
    font-size:14px;
}

.azul {
    /* Mismo color para todos los usuarios */
    color: blue;
}

Ya tenemos una idea de como se usa CSS, si quieres aprender sobre CSS básico puedes googlear "curso de CSS", "tutorial de CSS", etc. En este artículo nos basaremos en las nuevas características de CSS3.

¿Que hay de nuevo?

A continuación veremos las nuevas capacidades de CSS3; bordes redondeados, sombras, @font-face, etc..

Bordes Redondeados

El border-radius es una nueva característica de CSS3 que permite crear border redondeados de forma sencilla. Ej.:

#caja {
  border-radius: 20px 40px 60px 80px;  
  background-color: #fafafa;
  width: 300px;
  padding: 10px;
}

Podemos indicar el redondeo de cada esquina de forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda).

Se pueden setear de forma individual como les muestro a continuación:

#caja {
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 20px;
}

Sombras

El box-shadow nos permite darle una sombra a un objeto de nuestra página.

#caja {
  box-shadow: 30px 10px 20px #aaa; 
}

Debemos definir tres valores y un color.

Desplazamiento horizontal: un valor positivo indica que la sombra será a la derecha del objeto y un valor negativo a la izquierda
Desplazamiento vertical: un valor positivo indica que estará en la parte superior y uno negativo en la inferior.
Radio de desenfoque: en valor 0 la sombra será muy fuerte y si aumentamos su valor la sombra será suave.
Color: este último valor como su nombre lo dice establece el color de dicha sombra.

Hay mucho más sobre sombras; sombras múltiples, sombras interiores, sombras con transparencias, sombras de texto (text-shadow) pero eso se los dejo de tarea para que investiguen por su cuenta :)

@font-face

En CSS3 se especifica una nueva sintaxis para importar fuentes no disponibles en el navegador y que se descargan de un servidor web.

El problema actual es que hay varios formatos de fuentes que son apoyados por distintos navegadores. El IE8 e inferiores solo admite el formato EOT que es propietario. El formato True Type es ampliamente soportado por navegadores modernos. Otros formatos son el OpenType, SVG y WOFF.

Esta diversidad de formatos de fuente hace necesario que indiquemos la mayor cantidad de formatos de fuentes posibles para nuestro sitio.

Para importar una fuente que será utilizada por nuestra página web debemos utilizar la regla @font-face, en la misma indicamos el nombre de la fuente a importar y la dirección web de donde la debe descargar el navegador, la sintaxis es:

@font-face {
  font-family: [nombre de la fuente];
  src: local(""),
  url("nombrearchivo.woff") format("woff"),
  url("nombrearchivo.otf") format("opentype"),
  url("nombrearchivo.svg#nombre de la fuente") format("svg");
}

Podemos descargar una fuente del sitio www.fontsquirrel.com para probar la importación de fuentes (hay una sección donde podemos descargar varios formatos para la misma fuente).

Veamos un ejemplo de utilizar una fuente descargada del sitio mencionado anteriormente:

<!DOCTYPE html> 
<html> 
<head> 
<title>Prueba @font-face</title> 

<style type="text/css"> 
@font-face {
    font-family: "Ubuntu";
    src: url("Ubuntu-Title-webfont.eot") format("eot"),
         url("Ubuntu-Title-webfont.woff") format("woff"),
         url("Ubuntu-Title-webfont.ttf") format("truetype"),
         url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");
}
#cuadro1{
  border-radius: 20px;  
  background-color: #ddd;
  width: 200px;
  padding: 10px;
}
#cuadro1 p {
  font-family: Ubuntu;
  color: #ff0000;
  font-size: 20px;
}
body {
  background: white;
  margin: 50px;
}
</style> 
</head>
<body>

<div id="cuadro1"> 
<h3>Cuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
</div> 

</body> 
</html>

Con @font-face hacemos referencia a cuatro fuentes con distintos formatos y definimos su nombre en la propiedad font-family:

@font-face {
    font-family: "Ubuntu";
    src: url("Ubuntu-Title-webfont.eot") format("eot"),
         url("Ubuntu-Title-webfont.woff") format("woff"),
         url("Ubuntu-Title-webfont.ttf") format("truetype"),
         url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");
}

Ya podemos utilizar la fuente "Ubuntu" que acabamos de importar:

#cuadro1 p {
  font-family: Ubuntu;
  color: #ff0000;
  font-size: 20px;
}

En este código indicamos que los párrafos contenidos en #cuadro1 deben utilizar la fuente Ubuntu.

Hay otras propiedades interesantes de CSS3 que puedes investigar; transform, opacity, animaciones, etc.

No olvides participar dejando tus dudas y comentarios :)

Can I Use

Can I Use

Este sitio es de mucha utilidad ya que nos muestra una tabla de compatibilidad de HTML5 y CSS3 en los diferentes navegadores que existen en el mercado tanto para desktops y móviles.

Nuevas etiquetas en HTML5

En esta segunda parte vamos a hablar de las nuevas etiquetas, para que sirven y algunos ejemplos de uso. Ya que una imagen vale más que mil palabras veamos la diferencia entre el viejo HTML y el nuevo HTML5:

Como vemos la diferencia principal es que en HTML5 ya no usamos clases o ids para identificar las diferentes partes de nuestra estructura HTML.

Ahora que ya vimos la diferencia veamos para que sirve cada etiqueta:

<header>
Mayormente se utiliza para definir el encabezado de una página. Una buena práctica es incluir dentro de él el logo y el slogan del sitio.

<header>
<img src="logo.jpg" alt="" />
<h1>Nombre del sitio</h1>
<p>Slogan</p>
</header>

<nav>
Es el sector que designamos al menú de navegación de nuestro sitio web.

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="seccion.htm">Sección</a></li>
<li><a href="contacto.htm">Contacto</a></li>
</ul>

<form id="buscar">
<input name="query" type="text" /> <input type="submit" value="Buscar!" />
</form>
</nav>

<section>
Sencillamente es la parte donde debe ir el contenido de nuestra página.

<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

<article>
Ésta etiqueta es un bloque de información o sub etiquetas. Para entenderlo mejor podemos referirnos a que un article es un artículo de un blog donde podemos encontrar un título, texto, imágenes, links, etc.

<article>
<h2>Titulo de una noticia</h2>
<p>Texto de la noticia</p>
<img src="imagen.jpg" alt="" />
</article>

<article>
<h2>Titulo de otra noticia</h2>
<p>Texto de la segunda noticia</p>
<img src="imagen2.jpg" alt="" />
</article>

<aside>
Es un fragmento de nuestra página que no tiene demasiada relevancia con el contenido en sí; por ejemplo nuestros anuncios de adsense, un banner, etc.

<aside>
<script>codigo adsense</script>
</aside>

<footer>
Es el denominado pie de página de una página y generalmente se utiliza en la parte final de nuestra página.

<footer>
- @copy; Sitio.com -
<a href="contacto.htm">Contacto</a>
</footer>

Si quieres conocer las etiquetas HTML5 que faltan a continuación un listado:
<audio>
<canvas>
<figure>
<video>

Hay otras etiquetas pero no las incluí porque creo que no son útiles o, en su mayoría, no son compatibles con todos los navegadores.

Hasta aquí llego el segundo artículo, en el próximo hablaremos de CSS3 y sus capacidades.

Como siempre, no olviden comentar, si tienen preguntas sobre algo comentado en este artículo, sugerencias, etc.

Saludos!

Aprendiendo HTML5 desde Cero

En este primer artículo voy a hablarles de cómo crear una página web desde cero, qué herramientas utilizar, tips y consejos a la hora de iniciarse. En primer lugar aclarar que HTML no es un lenguaje de programación sino un lenguaje de marcado, una forma de codificar un documento. HTML es texto + etiquetas que dan formato a la estructura del texto y a su presentación.

Aclarado esto voy a darte un consejo: si eres principiante aprende directamente HTML5 (la actualización de HTML, el primer lenguaje en el que se creó la Web) y si ya tienes conocimientos básicos o avanzados olvídate de todo eso y comienza desde cero con HTML5. Esto te permitirá no confundir viejos conceptos obsoletos y comenzar con un lenguaje que actualmente, junto con CSS y JS, te permitirá crear aplicaciones web avanzadas.

Si quieres aprender más sobre conceptos de HTML, HTML4, XHTML o incluso HTML5 puedes googlearlo.

Manos a la obra

Nota: Para crear una página web solo necesitamos un editor de texto como el block de notas de Windows. Sin embargo te recomiendo utilizar Sublime Text 2 que es un editor de texto con algunas características para programadores que te facilitarán la vida.

Para empezar a crear una página web con HTML5 solo debemos definir este DOCTYPE antes de la etiqueta <HTML>:

<!DOCTYPE html>

Esto indica que al navegador que va a recibir y como procesarlo. No definirlo es un pecado mortal ya que cada navegador interprerá por defecto y a su forma el código que escribamos.

Una vez definido el DOCTYPE procedemos de esta forma:

<!DOCTYPE html>
<html lang="es">
 <head>
 <meta charset="utf-8" />
 <title>Aprendiendo HTML5 desde Cero</title>
 </head>
 <body>
 <header>Diseño Web Fácil</header>
 <section>
 <article></article>
 <aside></aside>
 <article></article>
 </section>
 </body>
</html>

lang: es necesario en HTML5 definir el idioma en cual se basa el sitio.
charset: indica al navegador como está codificado el documento.

Ésta es la estructura básica de cualquier documento HTML5 básico y a partir de esta base podemos empezar a crear nuestra página web. En el siguiente artículo veremos un poco más sobre las nuevas etiquetas HTML5, para que sirven, en que caso usarlas y algunos ejemplos prácticos para continuar con nuestra primer página web en HTML5 desde Cero.

No olviden dejar sus preguntas, aportes y comentarios.