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
bueno pues buscando encontre algunos tutoriales sobre como hacerlo y voy a colocar algunos de los que me parecen mas sencillos.
1. Psd-tutorial
en este tutorial de Psd-tutorial, que podemos decir que es 2 en 1, nos muestran como crear este efecto en photoshop y con CSS.
2. ilovecolors
este tutorial de ilovecolors, no me parece muy practico, porque para lograr el efecto utiliza un enfoque de capas que a mi parecer es bastante impractico.
3. janko at warp speed
este tutorial tiene algo adicional, que es el uso de una sombra adicional mas oscura en la parte superior del texto, y tambien nos explica como crearlo en Artweaver/.
recuerden que este efecto solo se puede ver en los navegadores que soporten CSS 3, como Safari, Google Chrome, Firefox y Opera, por esta misma razón recuerden escoger bien los colores de el texto, para que sea visible en aquellos navegadores que no lo soportan.
]]>buscando en google encontré varias soluciones, las cuales no me sirvieron, no se si fue porque no supe hacerlo o porque no funcionaban, el caso es que después de intentar varias veces y no obtener el resultado que queria me puse a intentar con combinaciones de tutoriales que había encontrado, hasta que por fin lo logre.
no se si estará bien o no, por favor corrijanme si me equivoco, lo primero es colocar dentro de el archivo functions.php, lo siguiente
if ( function_exists('register_sidebar') ) register_sidebar(2,array( 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', ));
luego, dentro de footer.php colocamos esto
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?><?php endif; ?>
y ya, eso es todo
]]>- 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.
]]>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.
]]>
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
Esta serie es srealizada por Blog Design Blog, y el tema a desmantelar es Designredux
En la primera parte se trata de explicar los archivos: index.php, header.php, sidebar.php y footer.php; los demas son tratados en la segunda parte donde tambien encontraran como incluir caracteristicas adicionales asi como tambien scripts.
tambien les dejo algunos tutoriales sobre como realizarlos:
www.crookedgremlins.com
www.cs.cmu.edu
Este es un muy buen tutorial sobre como integrar paisajes en el cuerpo.
Aca lo pueden encontrar completo y tambien tiene la opcionde descargarlo.
]]>