- 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.
Similar Posts:
Similar Posts:]]>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.Similar Posts:
Similar Posts:]]>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.Similar Posts:
Similar Posts:]]>
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:
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
Similar Posts:
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.Similar Posts:
tambien les dejo algunos tutoriales sobre como realizarlos:
www.crookedgremlins.com
www.cs.cmu.edu
Similar Posts:
Similar Posts:]]>
Este es un muy buen tutorial sobre como integrar paisajes en el cuerpo.
Aca lo pueden encontrar completo y tambien tiene la opcionde descargarlo.Similar Posts:
Similar Posts:]]>aca les dejo algunos
urban-style
grungy poster
textured tag
bussines card
Similar Posts:
en blogototote vi este manual sobre como crear lineas de “energia” en photoshop, es muy bueno y muy sencillo de hacer
aca lo pueden ver completo luxa.orgSimilar Posts:
Similar Posts:]]>
encontre en deviantart un pequeño tutorial, realizado por Lucas Savelli, sobre como vectorizar en flash.
aca les dejo el video de el tutorial, si quieren saber mas aca pueden ver el tutorial completo
Similar Posts:
Similar Posts:]]>