DaCh » Recursos http://dach-dz.tuxpixel.net Wordpress, Diseño, Programacion y Mucho mas Mon, 06 Sep 2010 16:59:21 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Como crear un tema de WordPress, sesión 2 http://dach-dz.tuxpixel.net/como-crear-un-tema-de-wordpress-sesion-2.html http://dach-dz.tuxpixel.net/como-crear-un-tema-de-wordpress-sesion-2.html#comments Wed, 10 Feb 2010 01:13:54 +0000 dach http://dach-dz.tuxpixel.net/?p=787 Ahora que ya tenemos nuestro diseño. Empecemos con la siguiente sesión.

Este diseño es para un tema de WordPress en esta sesión veremos únicamente el diseño del tema, el tema se llamara SimpleCH. Empezaremos haciendo nuestro diseño en html, después le pondremos un mejor aspecto con imágenes y también añadiremos nuestra plantilla de css.

Es momento de abrir nuestro editor de html y el primer archivo que crearemos es el index.html

Lo primero que debemos escribir es el DOCTYPE en nuestro caso usaremos el XHTML 1.0 estricto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Después de esto insertamos el código de XHML indicando su namespace asociado y el metadato para definir la codificación de caracteres del documento.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>

Una de las cosas me gusta de Geany es que tiene varias plantillas para el documento que deseas usar y en la plantilla de html te inserta todo el modelo del archivo xhtml y por lo tanto,no tengo que estar recordando el DOCTYPE y su namespace.

Otra cosa que debemos de agregar en nuestro archivo index.html es el enlace de nuestra hoja de estilo CSS dentro de la etiqueta <head> </head>

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
</head>

Nuestro archivo de style.css debería tener una estructura o modelo más o menos así.


/* ****
Comentarios acerca del tema de WordPress como nombre de su creador, versión etc.
*****/
/***** General, todos los documentos que necesitan añadirle algún estilo *****/
body {}
#container {}
#container2 {}
#container3 {}
/***** Tipografía *****/
h1 {}
h2 {}
h3 {}
h4 {}
p {}
a {}
a:hover {}
a:visited {}
/*/**** Header o cabecera *****/
#header {}
/***** Contents los contenedores *****/
#content {}
/***** Las columnas o sidebar *****/
#sidebar-left {}
#sidebarRT {}
/***** Navegación o menú *****/
/***** Formularios *****/
/***** Footer (pie de nuestro documento) *****/
#footer {}
/***** Imágenes *****/
/***** Clases *****/
/*****Y cualquier estilo que queramos agregarle nuestros elementos *****/

Aunque tener nuestro archivo style.css de esta forma no es una ley o algo que tenga que ir como una obligación, sino que, es un modelo que ayuda a otras personas a ubicarse a la hora de hacer alguna modificación en el documento.

Seguimos editando nuestro archivo index.html y empezamos añadir los elementos dentro de la etiqueta <body></body>

<body>
	<div id="content-main" >
		<div id="header" class="margen">
			<div id="logo">
				<h1>SinpleCH</h1>
				<small>Diseño creado por David Chay</small>
			</div>
			<div id="form-header-search">
				<form action=" " method="post">
				<div>
					<input class="inptxt" type="text" name="s" value="" /><input class="btn" type="submit" value="Buscar" />
				</div>
				</form>
			</div>
		</div>
		<div id="menu" class="margen">
			<ul>
				<li><a href="">Inicio</a></li>
				<li><a href="">Portafolio</a></li>
				<li><a href="">Contacto</a></li>
				<li><a href="">Acerca de</a></li>
			</ul>
		</div>
		<div id="content-body" class="margen">
				<div id="contenido">
					<h2>Wordpress, Creación de un tema sesión 1</h2>
					<p>
						WordPress es sistema de gestión de contenidos (CMS) de fuente abierta bajo la licencia de GPL, por lo tanto es libre y al mismo tiempo gratuito, enfocado especialmente a la creación de blog. Esta de sarrollado en PHP y usa MySql como base de datos. Esta en orientado a la estetica, los estandares web y la usabilidad, debido a que es libre cuenta con una enorme comunidad de desarrolladores y diseñadores que se encargan de crear los plugins y temas.
						para su descarga e instalacion puedes visitar http://es.wordpress.org/
						Para el diseño de un tema en WordPress hay tres tipos de código principales XHTML, CSS y PHP. Por lo tanto debemos de tener conocimientos básicos, principalmente de XHTML y CSS.
					</p>

					<h2>The Gimp, Video tutoriales en español</h2>
					<p>
						WordPress a creado una Fundación no lucrativa con el motivo de garantizar el libre acceso, a los proyectos de WordPress. Como parte de esta misión. la Fundación se encargará de la protección de WordPress, WordCamp y marcas relacionadas, mediante una fundación sin fines de lucro puede recibir donativos para propagar temas relacionados a WordPress y el Software Libre. De este modo las puertas están abiertas a programadores para que contribuyan a crear nuevas herramientas, plugins o extensiones.
						Esta fundación se inspiró en algunas organizaciones sin fines de lucro como: Free Software Foundation (FSF), la creadora de la licencia GNU GPL que usa y promueve WordPress; Open Source Applications Foundation (OSAF), la cual creó Chandler (PIM); y la Fundación Mozilla, haciendo que la web y el correo electrónico sea más accesible y basado en estándares abiertos.
						Y los donativos no tardaron en llegar, ya que WordCamp NYC (Nueva York) decidió donar USD$28,000 tras el éxito del evento celebrado en noviembre de 2009.
						El sitio de la fundacion es http://wordpressfoundation.org/
						Fuente | http://www.fayerwayer.com
					</p>

					<h2>Wordpress 2.9.1 listo para su descarga</h2>
					<p>
						Wordpress ha lanzado su version 2.9.1 mas estable, mas segura y mas facil de usar.
						Wordpress es un gestor de contenidos que ha estado evolucionando desde su aparicion gracias a que es GPL y que cuenta con una enorme comunidad de desarrolladores y diseñadores que se encargan de crear los plugins y temas.
						Ya esta disponible su descarga en español desde http://es.wordpress.org/
					</p>
				</div>
				<div id="sidebar">
					<div class="sidebar_top">
						<div class="sidebar_bottom">
							<h2>RSS</h2>
							<ul>
								<li><a href="">RSS FEED</a></li>
								<li><a href="">RSS EMAIL</a></li>
							</ul>
							<h2>Ultimas entradas</h2>
							<ul>
								<li><a href="">Wordpress creacion de un tema</a></li>
								<li><a href="">Fundacion wodrpress </a></li>
								<li><a href="">Gimp creacion de un gif animado </a></li>
								<li><a href="">Python rules</a></li>
							</ul>

						</div>
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
	</div>
	<div id="content-footer">
		<div id="footer" class="margen">
			<small>Gestionado por WordPress, SimpleCH diseñado por <a href="http://dach-dz.tuxpixel.net/">DaCh</a></small>
		</div>
	</div>
</body>

Puedes encontrarse con términos como sidebar, header, content, wrapper, nav, u otros términos en ingles, estos términos no son palabras claves o reservadas sino nombres con los que se identifican algunos elementos importantes dentro de la estructura del diseño, generalmente a elementos que contienen otros elementos.

Como por ejemplo

<div id=”header”> Común mente se le llama al elemento que contiene el titulo, menú principal u otros elementos que están en la cabecera del diseño.

<div id=”footer”> Se le denomina al contenedor del pie del diseño.

<div id=”sidebar”> Comúnmente es la barra lateral.

<div id=”sidebar-left”> Se le llama a la barra lateral izquierda.

<div id=”sidebar-right”> Se le llama a la barra lateral derecha.

Estos son por mencionar algunos.

Tu puedes asignar el nombre que deseas a tus elementos, ya sea en ingles o español anulando tildes, la letra “ñ” u otros caracteres especiales, solo ten en cuenta que estos elementos son comúnmente llamados con estos términos para que cualquier persona pueda entenderle, de manera más fácil, a la estructura del diseño.

Esta es la visualización del documento index.html

Este es el puro diseño html ahora vamos a darle un poco de color. Para esto hay que definir los colores que usara el tema.

Yo usare la paleta con los colores

#cbe86b #f2e9e1 #1c140d #26ade4

Puedes combinar tus colores favoritos y si no tienes idea de que colores usar puedes acceder a COLOURlovers o Kuler de Adobe,  ahí encontraras cientos de paletas de colores.

Ahora que ya definimos los colores a usar, es tiempo de abrir nuestro editor de imágenes the gimp.

1.- Creamos una imagen nueva de 1024 x 768.

2.- Como segundo paso, creamos un rectángulo en la parte superior con una altura de 120 px y anchura de 1024 px. Y lo rellenamos del color #cbe86b.

3.- En siguiente paso, creamos un rectángulo justo debajo del que acabamos de crear, con una anchura de 1024px y una altura de 35px y lo rellenamos con el color #1c140d.

4.- Ahora agregamos los gradientes, seleccionamos el rectángulo de color #1c140d, el que creamos el paso anterior y escogemos la herramienta de gradiente con 60 de opacidad, de forma lineal, que tenga un degradado de #f2e9e1 a transparente, procura que el gradiente quede a la mitad del rectángulo.

5.- En el próximo paso, creamos un gradiente de bajo del rectángulo de color #1c140d, el mismo que modificamos en el paso anterior. Para esto escogemos la herramienta de selección rectangular y creamos la selección de 1024 x 80, ya hecha la selección, escogemos la herramienta de gradiente con 100 de opacidad, de forma lineal y que tenga un degradado de #f2e9e1 a transparente, procura que abarque toda la selección rectangular.

6.- A continuación, creamos una capa nueva y ponemos guías verticales a 37, 512 y 987.

7.- En el ultimo paso, hacemos una guía horizontal a 250, enseguida escogemos la herramienta de gradiente y creamos un gradiente de forma radial, con opacidad 100 y un degradado de color blanco #ffffff a transparente, justo en la guía vertical de en medio (a 512) y la guía horizontal y luego cambiamos el modo de la capa a claridad nueva.

Y a si nos queda la imagen terminada.

Guardamos el archivo en formato .xcf pero aun no lo cerramos.

Creamos una carpeta que se llame images y es ahí donde guardaremos las imágenes del tema.
Ahora que ya tenemos nuestro fondo hecho, empecemos a editar el archivo style.css.

/********************Aspecto General***********************/
body{
		margin:0px;
		padding:0px;
		background-color:#ffffff;
		font-family: verdana, Arial, Helvetica;
		font-size:13px;
}
#content-main{
		background-image:url(images/bg_body.jpg);
		background-repeat:repeat-x;
	}
#content-footer{
	background:#1C140D;
	color:#F2E9E1;
	padding:20px;
}
.margen{
	width:850px;
	margin:0 auto;
}

La imagen bg_body.jpg es un recorte del fondo que hicimos. De 1px de ancho por 250px alto empezando en la poción de 0,0 esta imagen la guardamos en la carpeta images.

Seguimos editando el archivo style.css y ahora definimos la tipografía a usar.

Sitios que te ayudaran a elegir la tiografia para tu css

En mi caso usare esta familia de fuentes.
Para body
verdana, Arial, Helvetica;

Para h1 y h3
Helvetica, Georgia, Arial;

Para h2
Georgia, times, Helvetica;

El codigo seria

/**********************Tipografia*************************/
h1, h2, h3, h4{
	color:#000000;
	margin:0;
}

h1{
	font-size:36px;
	font-family:Helvetica, Georgia, Arial;
}

h2{
	margin-bottom:10px;
	font-size:30px;
	font-family:Georgia, Times, Helvetica;
}
h3{
	font-size:20px;
	font-family:Helvetica, Georgia, Arial;
	margin-bottom:10px;
}

small{
	font-weight: bold;
	font-size:12px;
	display:block;
}

Ahora editamos los enlaces y la etiqueta p

/******************Enlaces y Parrafos*******************/
a:link, a:visited{
	color:#26ade4;
	text-decoration:none;
	font-weight: bold;
}

a:hover, a:active{
	text-decoration: underline;
}

p{
	margin:0px 0px 20px 0px;
	padding:10px;

}

Es hora de definir la estructura.

/********************Esctructura***********************/

#header{
		height:120px;
		background:url(images/bg_header.jpg) no-repeat;
		background-position:top center;
}

#logo h1, #logo small {
	   margin:0px;
	   display:block;
	   text-indent:-9999px;
	   _text-indent:100px;
}

#logo{
	background:url(images/logo.png) no-repeat;
	_background:none;
	width:470px;
	height:120px;
	float:left;
}
#form-header-search{
	float:left;
	margin:30px 0 0 0;
}
#menu{
		height:35px;
		color:#ffffff;
		text-align:center;
	}
#content-body{
	padding-top:20px;

}

#contenido{
	float:left;
	width:600px;
}

#sidebar{
	background:url(images/bg_sidebar.jpg) repeat-y;
	background-position:center;
	padding:0;
	margin:0;
	color:#f2e9e1;

	width:250px;
	float:left;
	}

La imagen de fondo de header, bg_header.jpg, la recortamos de nuestro fondo. Y la guardamos en la carpeta images.

Ahora, el logo o imagen del titulo en mi caso haré una imagen del nombre del tema.

Para crear esta imagen voy a usar inkscape.

1.- El primer paso es abrir el programa, y escribimos el texto del titulo.

2.- En el siguiente paso, vamos al menú de texto y escogemos la opción de texto y tipografía. Escogemos la tipografía deseada con un tamaño de 100.

3.- En el siguiente paso vamos al menú de objeto y escogemos la opción de relleno y borde, y en la pestaña Relleno le damos un color de 1c140dff y en la pestaña Color de trazo de trazo le damos un color de f2e9e1b7 y en la pestaña de estilo de trazo le damos un ancho de 3px.

4.- A continuación, escribimos el texto de la descripción y vamos al menú de texto y escogemos la opción de texto y tipografía. Escogemos la tipografía deseada con un tamaño de 72.

5.- Por ultimo solo giramos un poco el texto y listo. Y lo importamos en el menú de archivo/importar mapa de bits/titulo.png inkscape solo importa imágenes en png.

Ahora para terminar la imagen logo.png la abrimos con the gimp y la escalamos a 466 x 119.
En el menú Imagen/escalar imagen

Ahora regresamos a style.css y editamos el menú.

/***********************Menu**************************/
#menu ul{
	margin:0px; padding:0px;
	line-height:200%;
}
#menu ul li{
	display:inline;
	margin-left:30px;
}
#menu ul li a{
	text-decoration: none;
	color:#CBE86B;
	padding:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: bold;
	text-transform: uppercase;
}
#menu ul li a:active, #menu ul li a:hover {
	color: #1c140d;
	background:#CBE86B;

}

Después le damos estilo al formulario de búsqueda.

/********************Formulario************************/
.btn{
	font-weight: bold;
	border:5px solid #1c140d;
	background:#1c140d;
	margin:0px;
	color:#f2e9e1;
}
.btn:hover{
	color:#cbe86b;
}
.inptxt{
	border:5px solid #1c140d;
	margin:0px;
}

A continuación a footer

/**********************Footer**************************/

#footer{
	text-align: center;
}

Por ultimo editamos algunas clases extras que necesitamos.

/**********************Otras clases********************/

/*************El sidebar****************/

#sidebar .sidebar_top{
	background:url(images/sidebar_top.jpg) no-repeat;
	background-position:center top;
	display: block;
}
#sidebar .sidebar_bottom{
	background:url(images/sidebar_bottom.jpg) no-repeat;
	background-position:center bottom;
	display: block;
	padding:15px;
	margin:0;
}
#sidebar .sidebar_bottom h2{
	font-size:20px;
	color:#f2e9e1;
}
#sidebar .sidebar_bottom ul{
	margin:10px 0px 30px 15px;
	padding:0px;
}
#sidebar .sidebar_bottom ul li{
	list-style:none;
	margin:0px 0px 8px 0px;
	padding:0px;

}

Para hacer la imagen de fondo del sidebar seguimos los siguientes pasos.

1.- Abrimos otra vez el editor de imágenes y creamos una nueva imagen de 640 x 400 y con la herramienta de selección rectangular hacemos un rectángulo de 250x 300 px.

2.- Enseguida hacemos los bordes redondeados, desde el menú de seleccionar escogemos la opción de rectángulo redondeado con un radio de 15.

3.- Rellenamos el rectángulo con bordes redondeados con un color de #1c140d.

4.- Ahora vamos al menú seleccionar y escogemos la opción de borde y le damos 1px.

5.- Como siguiente paso, seleccionamos un color de #cbe86b y enseguida con la herramienta de pincel coloreamos el borde que hicimos en el paso anterior.

6.- El próximo paso le añadimos un efecto de gradiente en la parte superior de nuestro rectángulo, Seleccionando el color #f2e9e1 escogemos la herramienta de gradiente y le damos un valor de opacidad 60 de forma lineal y degradado de #f2e9e1 a transparente.

7.- Ahora seleccionamos la parte superior de l rectángulo con un ancho de 250px y alto de 59px y en el menú de imagen escogemos la opción recortar a selección y guardamos esa imagen como sidebar_top.jpg.

8.- Ahora deshacemos la imagen hiendo al menú de editar y en la opción deshacer o con las teclas Ctrl + Z y en el rectángulo seleccionamos un pequeño rectángulo de 250px de ancho por 1px de alto, procura que la selección la hagas en el centro del rectángulo, y nos dirigimos al menú imagen y escogemos Recortar a la selección por ultimo nos vamos al menú archivo guardar como y guardamos con el nombre de bg_sidebar.jpg

9.- por ultimo volvemos a deshacerla imagen con la tecla Ctrl + Z, y volvemos a realizar otra selección pero ahora la haremos en la parte posterior del rectángulo, la selección será de 250 x 20 y recortamos a selección y guardamos como sidebar_bottom.jpg

Todas las imágenes que usemos en el tema deben de guardarse en la carpeta images.

Por el momento esto seria el código de style.css pero podemos seguir añadiendo cuando ya estemos creando el tema para WordPress.

El código de style.css hasta este momento seria.

/********************Aspecto General***********************/
body{
		margin:0px;
		padding:0px;
		background-color:#ffffff;
		font-family: verdana, Arial, Helvetica;
		font-size:13px;
}
#content-main{
		background-image:url(images/bg_body.jpg);
		background-repeat:repeat-x;
	}
#content-footer{
	background:#1C140D;
	color:#F2E9E1;
	padding:20px;
}
.margen{
	width:850px;
	margin:0 auto;
}

/**********************Tipografia*************************/
h1, h2, h3, h4{
	color:#000000;
	margin:0;
}

h1{
	font-size:36px;
	font-family:Helvetica, Georgia, Arial;
}

h2{
	margin-bottom:10px;
	font-size:30px;
	font-family:Georgia, Times, Helvetica;
}
h3{
	font-size:20px;
	font-family:Helvetica, Georgia, Arial;
	margin-bottom:10px;
}

small{
	font-weight: bold;
	font-size:12px;
	display:block;
}

/******************Enlaces y Parrafos*******************/
a:link, a:visited{
	color:#26ade4;
	text-decoration:none;
	font-weight: bold;
}

a:hover, a:active{
	text-decoration: underline;
}

p{
	margin:0px 0px 20px 0px;
	padding:10px;

}

/********************Esctructura***********************/

#header{
		height:120px;
		background:url(images/bg_header.jpg) no-repeat;
		background-position:top center;
}

#logo h1, #logo small {
	   margin:0px;
	   display:block;
	   text-indent:-9999px;
}

#logo{
	background:url(images/logo.png) no-repeat;
	width:470px;
	height:120px;
	float:left;
}
#form-header-search{
	float:left;
	margin:30px 0 0 0;
}
#menu{
		height:35px;
		color:#ffffff;
		text-align:center;
	}
#content-body{
	padding-top:20px;

}

#contenido{
	float:left;
	width:600px;
}

#sidebar{
	background:url(images/bg_sidebar.jpg) repeat-y;
	background-position:center;
	padding:0;
	margin:0;
	color:#f2e9e1;
	width:250px;
	float:left;
}

/***********************Menu**************************/
#menu ul{
	margin:0px; padding:0px;
	line-height:200%;
}
#menu ul li{
	display:inline;
	margin-left:30px;
}
#menu ul li a{
	text-decoration: none;
	color:#CBE86B;
	padding:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: bold;
	text-transform: uppercase;
}
#menu ul li a:active, #menu ul li a:hover {
	color: #1c140d;
	background:#CBE86B;

}
/********************Formulario************************/
.btn{
	font-weight: bold;
	border:5px solid #1c140d;
	background:#1c140d;
	margin:0px;
	color:#f2e9e1;
}
.btn:hover{
	color:#cbe86b;
}
.inptxt{
	border:5px solid #1c140d;
	margin:0px;
}

/**********************Footer**************************/

#footer{
	text-align: center;
}
/**********************Otras clases********************/

/*************El sidebar****************/

#sidebar .sidebar_top{
	background:url(images/sidebar_top.jpg) no-repeat;
	background-position:center top;
	display: block;
}
#sidebar .sidebar_bottom{
	background:url(images/sidebar_bottom.jpg) no-repeat;
	background-position:center bottom;
	display: block;
	padding:15px;
	margin:0;
}
#sidebar .sidebar_bottom h2{
	font-size:20px;
	color:#f2e9e1;
}
#sidebar .sidebar_bottom ul{
	margin:10px 0px 30px 15px;
	padding:0px;
}
#sidebar .sidebar_bottom ul li{
	list-style:none;
	margin:0px 0px 8px 0px;
	padding:0px;

}

Y el diseño finalizado nos quedaría de la siguiente forma.

El diseño se ve bien con todos los navegadores que cumplen los estándares webs el único dolor de cabeza es IE6.

Para el logo hicimos una imagen png la cual no se visualiza bien con IE6 pero podemos hacer un pequeño hack a nuestro css para que no se vea la imagen sino que muestre el titulo con letras. Solo debemos de añadir dos líneas a nuestro código.

#logo h1, #logo small {
	   margin:0px;
	   display:block;
	   text-indent:-9999px;
	   _text-indent:100px;
}

#logo{
	background:url(images/logo.png) no-repeat;
	_background:none;
	width:470px;
	height:120px;
	float:left;
}

Con estas líneas agregadas al archivo style.css el diseño en IE6 se mira de la siguiente forma.

Otra cosa que debemos agregar es el favicon, el mió es.

Lo agregamos en la cabecera del index.html en la etiqueta <head></head>

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
	<link rel="shortcut icon" href="images/favicon.ico" />
</head>

Ahora solo nos queda validar nuestro diseño en http://validator.w3.org/

Esta Web se encargara de validar tu xhtml y te mostrara los errores que tengas en tu diseño.

En mi diseño original tuve que corregir un problema con el formulario y es que me pedía que los elementos input el botón como el texto deberían estar juntos en un div. Para esta sesión usare ya el código validado desde el principio para que no tengas ningún problema.

Espero haberte ayudado en esta sesión a crear tu diseño. Y en la próxima sesión empezaremos a crear el tema de WordPress con este diseño.

]]> http://dach-dz.tuxpixel.net/como-crear-un-tema-de-wordpress-sesion-2.html/feed 3 Sitios que te ayudaran a elegir la tiografia para tu css http://dach-dz.tuxpixel.net/sitios-que-te-ayudaran-a-elegir-la-tiografia-para-tu-css.html http://dach-dz.tuxpixel.net/sitios-que-te-ayudaran-a-elegir-la-tiografia-para-tu-css.html#comments Tue, 09 Feb 2010 06:32:35 +0000 dach http://dach-dz.tuxpixel.net/?p=778 Cuando diseñas una pagina web una de las interrogantes que te debes de hacer es ¿Que tipo grafia voy a usar? Alguna idea ¿no? bueno para fortuna de muchos (como yo que no me se decidir) existen varias herramientas web que nos ayudan a escoger la tipografía a usar,

cssTypeset

csstypeset es una herramienta web que permite crear el código CSS de un texto.

typeTester

typetester

Es un sitio que te ayuda a analizar tamaños, espacios em blanco, sangrías, colores y demás detalles.

csstxt


Es una herramienta web que ilustra las diferentes maneras que puede editar su estilo de tipografia.

]]> http://dach-dz.tuxpixel.net/sitios-que-te-ayudaran-a-elegir-la-tiografia-para-tu-css.html/feed 0