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
Siguiendo la costumbre Google de cambiar el logo para conmemorar fechas especiales, hoy celebra el cumpleaños de Josef Frank, sin embargo no se si es que soy yo o que, pero no entiendo o no veo la palabra google en la imagen para esta fecha; a alguien mas le pasa eso???
]]>
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
]]>para comenzar a usarlo solo debemos colocar entre las etiquetas head lo siquiente:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
y luego colocar en la hoja de estilos esto:
font-family: 'Tangerine', serif;
al final deberiamos tener algo asi:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>aca pueden ver la lista de las fuentes disponibles; y para colocar una fuente propia se debe colocar lo siguiente:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
custom: { families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ] }
});
</script>para esto se debe usar el webfont loader de google, el cual tambien permite usar cuentas de typekit para seleccionar las fuentes a mostrar colocando esto:
WebFont.load({
typekit: 'myKitId'
});- 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>
]]>Se llama The Make Yourself Foundation o MYF; se preguntaran porque les escribo sobre una fundación aca, aparte de que la creo un grupo que me gusta mucho lo hago por el diseño del sitio y ademas porque tambien es una red social que permite la creacion de de grupos y discuciones, subir videos y fotografias.
