si bien no es difícil aprender a usar estos nuevos estándares, porque la verdad solo trae funcionalidades que nos facilitan mucho la vida, lo mas complicado es aprender a diferenciarlos y saberlos implementar por eso hoy voy a colocar algunos de los tutoriales que se encuentran en la web.
-
HTML 5 Tutorial
-
dave wood
-
nettus
-
SmashingMagazine
-
Inspect Element
-
orderedlist
- Trucos para pasar de un archivo PSD a HTML: line25.com
- Cómo pasar de un boceto a un tema en Wordpress: spoongraphics.co.uk
- Tutoriales de CSS3 y técnicas de creación de botones: speckyboy.com
- Excelentes diseños web oscuros: webdesignledger.com
- Cientos de trucos para quien trabaja con CSS: css-tricks.com
- 17 extensiones de Google Chrome para webdesigners: designm.ag
Espero que los aprovechen.
]]>Bueno ahora si vamos a comenzar esto, la vez pasada les había dicho que iba a inventar el nuevo diseño a medida que lo fuera realizando, pero hoy por casualidad termine en el sitio de Woo Themes y encontré 
creado por Tim van Damme; y recorde al go que vi en CSS Tricks donde dice que una buena manera de mejorar en este cuento del diseño web es buscar un sitio web que nos guste y tratar de copiar el diseño lo mas parecido posible, y eso es lo que voy a hacer.
Para comenzar voy a crear una carpeta con el nombre del nuevo tema dentro de la carpeta /wp-content/themes, con los siguientes archivos index.php y style.css asi:
Vamos a comenzar con index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="palabras, clave" />
<meta content="<?php bloginfo('description'); ?>" name="description"/>
<meta content="titulo" name="DC.Title"/>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?>
» Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="alternate" type="application/rss+xml"
title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback"
href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet"
href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css" />
<link rel="shortcut icon"
href="<?php bloginfo('stylesheet_directory'); ?>/imagenes/favicon.gif" />
<meta http-equiv="Content-Language" content="es" />
</head>
<body>
</body>
</html>
Con esto deberíamos tener una pagina en blanco, ahora continuaremos con style.css
/*
Theme Name: SitioAparte
Theme URI: http://sitioaparte.info
Description:
Version: 2.0
Author: SitioAparte.info
*/
* {
border: none;
margin: 0;
padding: 0;
}
Con esto deberíamos ver una pagina en blanco con el titulo de nuestro sitio, la descripción, los links de RSS y el favicon si lo tenemos; con un CSS reset muy general y en el panel de administracion de los temas se debe visualizar nuestro tema con la descripción que le dimos y el nombre.
En el siguiente post veremos cuales son las etiquetas usadas en wordpress y comenzaremos a darle estilo a nuestro tema.
]]> Dentro de la carpeta dle tema se crean el archivo index.php y style.css ( son los archivos necesarios para que Wordpress reconozca el tema), ademas de las carpetas para las imagenes y los archivos java que se vayan a utilizar. Abrimos el archivo index.php con cualquier editor de texto o el de su preferencia y comenzamos con las primera lineas y las mas importarntes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="palabras, clave" />
<meta content="descripcion" name="description"/>
<meta content="titulo" name="DC.Title"/>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?>
» Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="alternate" type="application/rss+xml"
title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback"
href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet"
href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css" />
<link rel="shortcut icon"
href="<?php bloginfo('stylesheet_directory'); ?>/imagenes/favicon.gif" />
<meta http-equiv="Content-Language" content="es" />
</head>
<body>
</body>
</html>
]]>Tutoriales de Adobe Fireworks por Smashing Magazine
Varios tutoriales y descargas para Fireworks.
Como crear un portafolio de una sola pagina por Chris Spooner
Tutoriales CSS3
Tutoriales por Antonio Lupetti
Estos solo algunos de los muchos que se puden encontrar por la web, si tienen alguna duda o estan buscando algo en especial no duden en preguntarme o tambien pueden buscarlo en Google.
]]>El CSS Naked Day es el dia en que todas los sitios web (los que quieran) desactivan toda las hojas de estilo dejando lo mas importante, el contenido.
Para participar solo necesitan usar esta funcion en php
<?php
function is_naked_day($d) {
$start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
$end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
$z = date('Z') * -1;
$now = time() + $z;
if ( $now >= $start && $now <= $end ) {
return true;
}
return false;
}
?>
y se usa insertando esta funcion entre las etiquetas HEAD
<?php
if ( is_naked_day(9) ) {
echo '';
} else {
echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
}
?>
Y si no quieren modificar sus temas de wordpress pueden usar este plugin creado por Aja's
]]>
Bueno pues, manos a la obra; para empezar escogi un ancho de 910px centrado de 2 columnas, asi que para empezar creamos un archivo llamado index.html con el siguiente contenido:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="es"> <head> <title>SitioAparte V 2.0</title> <link media="screen" type="text/css" href="style.css" rel="stylesheet" /> </head> <body> <div id="wrapper"> </div> </body> </html>
y ademas creamos un archivo llamado style.css con lo siguiente:
body,div,p,h1,h2,h3,h4,h5,h6,ul{ margin:0; padding:0; } body{ background:#fff url(images/bg.gif) repeat-x; font-family:helvetica,arial; text-align:justify; } #wrapper{ margin:0 auto; padding:0; width:910px; background-color:#666; }
con lo que tendriamos un layout mas o menos asi
