Teko Estudio | Diseño web & Marketing Online | Aguascalientes, Ags » Blog http://www.tekoestudio.com Teko Estudio | Diseño web & Marketing Online | Aguascalientes, Ags Fri, 26 Feb 2010 15:47:25 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Smashing Magazine Book http://www.tekoestudio.com/smashing-magazine-book/ http://www.tekoestudio.com/smashing-magazine-book/#comments Thu, 07 Jan 2010 20:53:29 +0000 admin http://www.tekoestudio.com/?p=705 En días pasados tuve la fortuna de recibir mi copia del primer libro de Smashing Magazine el cual puedo decir que es el mejor libro de Diseño Web que he tenido en las manos, es practico, tiene ejemplos fáciles de comprender y se centra en tratar de desarrollar tu sentido del diseño dentro de las nuevas tendencias y formas utilizadas para el desarrollo web.

Smashing Magazine Book

En este libro podras encontrar:

  • Diseño de Interfaces
  • Arte y ciencia del CSS
  • Tipografía:reglas, guias y errores comunes
  • Principios de Usabilidad
  • Formas de uso de colores
  • Optimización para páginas web
  • Diseña para Vender
  • Como convertir tu portal en algo memorable
  • Entrevistas con expertos

Estos son los capítulos que van a poder encontrar dentro de este libro, el cual cubre todos los aspectos importantes al momento de querer desarrollar un portal.

Costo: $29.90 dlls
Tiempo de Entrega: 3 semanas esto del día que lo pedí al día que llego a mi casa (México)

A los que les interese comprar el libro les dejo la liga para que puedan checar sus opciones #smashingbook

Estoy en espera del libro “Digging into WordPress”, espero recibirlo pronto para poder compartirlo con ustedes

.

]]> http://www.tekoestudio.com/smashing-magazine-book/feed/ 0 ¿Donde buscar inspiración? http://www.tekoestudio.com/%c2%bfdonde-buscar-inspiracion/ http://www.tekoestudio.com/%c2%bfdonde-buscar-inspiracion/#comments Mon, 14 Dec 2009 17:26:07 +0000 teko http://www.tekoestudio.com/?p=681 Me han llegado algunos correos preguntando donde podemos encontrar algunos recursos y diseños para mejorar nuestras habilidades en el desarrollo web, es por ello que me decidí en hacer este post en el cual podrán encontrar 5 de mis portales favoritos, con los cuales pueden buscar ideas, tutoriales, entrevistas y muchas cosas más para encontrar esa inspiración que algunas veces no encontramos.

1. Cssmania

Css Mania

Showcase de diseño en CSS y HTML, en este portal prodrás encontrar maneras creativas y diferentes de como hacer portales bajo estándares web.

2. Smashing Magazine

Smashing Magazine

Blog de recursos y diseño web, ganador del .Net Award este mes de diciembre y en mi punto de vista el mejor portal de inspiración y tutoriales en la red

3. Css Tricks

Css Tricks

Blog de recursos para mejorar tus habilidades en el uso de CSS y HMTL, también podrás encontrar temas como jquery y wordpress, lo mejor de este portal son los Video Tutoriales (screencast) ya que la manera de explicar los temas y códigos son muy sencillos.

4. Line 25

line25

Portal de tutoriales relacionados al diseño y desarrollo web

5. Nettuts

Nettuts

Este portal es parte de la red TutsPlus, en la cual podrás encontrar diferentes sitios todos enfocados a la enseñanza e inspiración, hago mención de este ya que es el que se especializa en desarrollo y diseño web

Si crees que me falto alguno, por favor hazmelo saber…

]]> http://www.tekoestudio.com/%c2%bfdonde-buscar-inspiracion/feed/ 0 Posada Twittgdl http://www.tekoestudio.com/posada-twittgdl/ http://www.tekoestudio.com/posada-twittgdl/#comments Tue, 01 Dec 2009 15:24:14 +0000 admin http://www.tekoestudio.com/?p=675 Este próximo 19 de Diciembre se llevara acabo la “TWITTPOSADAGDL” la cual comenzará a partir de las 20:00 hrs, el lugar es lo único que esta por definirse este lo podremos saber en unos días más. Habrán tacos, chelas, piñatas, mucha gente que seguir (órdenes de restricción aplican en el mundo real, stalkers favor de abstenerse) y mucha diversión. Si quieres saber más, toda la información que necesitas se encuentra en Twittgdl.

El costo del evento será de $120 en preventa y $150 pesos el día del evento, y esto incluye:

  • Tu acceso
  • La cena
  • La Piñata
  • El bolo
  • El tener la oportunidad de estar con twitters de primera
  • y muchas cosas más…

Puedes comprar el boleto y registrarte directamente aquí.

No Faltes

]]> http://www.tekoestudio.com/posada-twittgdl/feed/ 0 Como crear un boton con CSS sprites http://www.tekoestudio.com/como-crear-un-boton-con-css-sprites/ http://www.tekoestudio.com/como-crear-un-boton-con-css-sprites/#comments Fri, 25 Sep 2009 17:09:35 +0000 teko http://www.tekoestudio.com/?p=630 El uso de sprites en CSS es una práctica muy común en los desarrolladores web, esto se hace para poder reducir el tiempo de carga de imágenes en el portal que estas desarrollando. Ahora vamos a ver como funcionan los sprites y que necesitas hacer para poder crear el tuyo.

En este caso vamos a comenzar con el diseño de un botón y vamos a hacer el código necesario para su buen funcionamiento.

Vamos a diseñar nuestro botón en photoshop y va a ser solamente una base de gradientes y lineas , para comenzar creamos un forma de esquinas redondeadas, las proporciones del botón depende del diseño que ustedes necesitan, en mi caso lo voy a hacer de 360 x 110 px y esta será la base que tomare para el código  CSS.

Boton conCSS sprites

Ahora le aplicaremos algunos estilos para dar volumen y forma a nuestro botón

boton CSS Sombra y Gradiente

Este es el resultado que debemos de obtener después de haber aplicado nuestros estilos.

Boton con estilos

Escribe lo que te gustaría que llevara el boton y agregale la fuente y estilos apropiados para tu diseño, en este caso yo usaré la letra Cambria y los siguientes estilos:

Estilos texto letterpress

Este es el resultado que hemos obtenido.

Ejemplo boton

Selecciona el botón y el texto, arrastralo mientras presionas las teclas ALT y SHIFT para duplicarlo. Alinea el botón duplicado justo debajo del botón original, respetando la sombra que le asignamos. Modifica los estilos del botón superior para darle un fondo de diferente color. Por ultimo utilizaremos la herramienta TRIM para ajustar el lienzo al tamaño de nuestra imagen

Efecto Roll Over

Oculta el fondo y guarda la imagen presionando ALT, CTRL, SHIFT y la tecla S, recuerda que debemos de guardar la imagen como PNG para que nos respete las transparencias del fondo.

Save for Web

Abre tu aplicación favorita para el desarrollo de código y creamos un simple HTML.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Sprite CSS</title>

</head>

<body>

<div id="btncss">

<p><a href="#" class="btn">Sprite CSS</a></p>

</div>

</body>
</html>

Para crear el boton agregaremos un pequeños parrafo y dentro de el un anchor que es el que nos va a dar el enlace para nuestro botón, la clase para este anchor va a ser “btn”


<p><a href="#" class="btn">Sprite CSS</a></p>

Ahora empezaremos con la magia del CSS.


#btncss p a.btn {
background-image: url(btn_css.png);/*Asignamos el fondo*/
background-position: top; /*Definimos la posición del fondo*/
text-indent: -9999px;/*Desaparecemos el txt "Sprite CSS"*/
display: block;/*Lo mostramos en bloque, para poder definir width y height*/
width: 364px; height: 114px; /*Definimos medidas del boton*/
}

#btncss p a.btn:hover {
background-position: bottom; /*Definimos la posición del fondo*/
}

Como lo comentamos al principio del tutorial, las medidas de nuestro botón se definieron de 360 x 110px y le agregamos 4px por el efecto de sombra que le hemos aplicado.

La descripción de cada linea esta en el código anterior, recuerda que siempre que trabajes con anchor o el tag “a” debes de definir en que manera lo quieres desplegar, en este caso lo haremos en bloque para poder asignar una altura y anchura determinada.

demo

Ver demo, en este podrás encontrar la manera de aplicar esta misma técnica de CSS a un menú horizontal de manera facil.

Descarga los archivos del tutorial

¿Crees que falto algo?  deja tu comentario.

]]> http://www.tekoestudio.com/como-crear-un-boton-con-css-sprites/feed/ 0 10 “Footers” creativos http://www.tekoestudio.com/10-footers-creativos/ http://www.tekoestudio.com/10-footers-creativos/#comments Tue, 22 Sep 2009 14:10:03 +0000 teko http://www.tekoestudio.com/?p=592 El “footer” o pie de página de tu web tiene como principal proposito dar la información que el usuario necesita, detalles de la información de contacto, un pequeño resumen de la información contenida en el portal, un formulario de contacto, etc. Este tipo de acciones pueden poco valoradas y se puede llegar a pensar que no es importante un buen diseño del pie de página, por ese motivo realice la lista de mis 10 “footers” favoritos y te los dejo para tu inspiracíón.

1. Branded07

branded07

2. David Hellmann

davidhellmann.com

3. Blup

Blup

4. Volll

Volll

5. Biowind

biowind

6. Web Designer Wall

Web Designer Wall

7. Multiways

Multiways

8. Leemunroe

Leemunroe

9. Spoongraphics

spoongraphics

10. CSS Tricks

CSS Tricks

¿Crees que me falto alguno? Porfavor hazmelo saber

]]> http://www.tekoestudio.com/10-footers-creativos/feed/ 0