HTML5 doctype

HTML5Para empezar a trabajar con html5 vamos a ver los cambios que hay en la definición del doctype y en algunas etiquetas que usamos en el header:

  • Doctype
  • Script para incluir acrhivos javascript
  • Script para escribir código javascript
  • Link para incluir archivos de estilo css
  • Style para escribir codigo css

Primero veamos un ejemplo de html4:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/TR/strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript">
var now = Date();
</script>
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
</style>

En HTML5 todo se simplifica

Simplemente debemos especificar que el doctype es “html”

<!DOCTYPE html>

Eliminamos unos cuantos caracteres y simplmente decimos que es utf-8

<meta charset="utf-8">

Al incluir un archivo con la etiqueta “script” no es necesario especificar el type ya que se entiende que es javascript.

<script src="js/jquery.js">

Lo mismo ocurre si vamos a escribir el javascript en el documento html5

<script>
var now = Date();
</script>

Al incluir un archivo css no es necesario incluir el type ya que al especificar rel=”stylesheet” se entiende que es css

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

Al incluir css directamente en el documento usando la etiqueta <style> tampoco es necesario especificar el type ya el que navegador asume que es css

<style>
body { background: #ccc; }
</style>

CSS3 Diseño Multi column

Empece a estudiar CSS3, asi que voy a ir escribiendo un poco del tema.

El selector para poder hacer multi-columnas es uno de los que mas me llamó la atención, mas que nada porque hace un par de días estaba precisando hacer exactamente esto, si hubiera sabido de esto, la solución hubiera sido mucho mas sencilla.

Ej. el texto a continuación esta todo dentro de un solo div que usa el siguiente codigo css:

div.columnas {
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-width: 150px;
-moz-column-rule: 1px solid #00000;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-width: 150px;
-webkit-column-rule: 1px solid #00000;
}

Definimos lo siguiente:

  • column-count: la cantidad de columnas
  • column-gap: la distancia entre columnas
  • column-width: el ancho de la columna
  • column-rule: linea de division entre columnas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dui felis. Quisque ornare tellus et tortor pellentesque vulputate. Ut mollis accumsan neque, quis vestibulum erat varius at. Aliquam cursus consectetur viverra. Pellentesque dolor augue, pulvinar sit amet molestie non, egestas mollis risus. Aenean eu nisi odio, eget accumsan libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dui felis. Quisque ornare tellus et tortor pellentesque vulputate. Ut mollis accumsan neque, quis vestibulum erat varius at. Aliquam cursus consectetur viverra. Pellentesque dolor augue, pulvinar sit amet molestie non, egestas mollis risus. Aenean eu nisi odio, eget accumsan libero.