VideoTutorial Maquetación básica en CSS

Tratando de aportar un granito de arena a la educación he decidido crear ciertos videotutoriales de CSS y Diseño web, poco a poco ire creando pequeños videos de temas específicos donde tratare de una forma sencilla explicar como se lleva acabo una maquetación en CSS en distintas situaciones de diseño.

Por lo pronto he creado un video donde he diseñado una plantilla base y luego la convierto a CSS manualmente desde cero, aunque el video no profundiza mucho servirá para empezar a familiarizarse con el CSS, en caso de no entender algo, pueden preguntarlo sin problema en los comentarios.

Yo no trabajo, hago lo que me gusta… Theme AW

Algunas personas me dicen que trabajo demasiado, eso es lo único malo cuando te ganas la vida haciendo lo que te apasiona, lo que una vez fue mi hobbie ahora es mi principal fuente de ingreso, eso si, aunque suene contradictorio, nunca a dejado de ser mi hobbie, por lo que cuando no estoy laborando en la empresa, también estoy haciendo diseños en casa y es que para mi es como ir al cine, escuchar música o ir a playa, Diseñar web y escribir CSS, para mi, es como encerrar a un niño en una habitación con la ultima consola de videojuegos.

Para esta oportunidad he diseñado un theme completo para un blog, apesar de usar la plantilla por defecto de WordPress llamada Twentyten como base para el proyecto, me a tocado igual escribir muchas lineas de CSS ya que el diseño en cuestión es mucho mas complejo que la plantilla Twentyten.

Hablando un poco de class en CSS

Por medio de las clases podemos definir los estilos a cualquier etiqueta o elemento de la web.

Cuando definimos una clase, el estilo no se aplica a una etiqueta html en concreto, si no que se mantiene con una disponibilidad general para ser utilizado en cualquier parte del sitio, inclusive en distintos lugares de la web al mismo tiempo.

Las clases se reconocen por tener un .(punto) como prefijo, ejemplo:

.abreo {
width: 320px;
}

Con el CSS anterior simplemente estamos diciendo que la etiqueta o cualquier elemento HTML, que contenga la clase (.abreo) tendrá un ancho fijo de 320px.

Algunos ejemplos para aplicar en el HTML, seria el siguiente:

Textareas resize error en Firefox 4

Bien, resulta que hace unos días, actualicé mi Mozilla Firefox a su nueva versión 4, debo reconocer, que han hecho un gran trabajo, el navegador es mucho mas estable, ni hablar de la velocidad de carga, los sitios webs abren mucho mas rápido y su nuevo diseño achromado minimalista permite visualizar el portal con mas amplitud, dándole mayor prioridad al contenido web.

Ok, todo era color de rosa hasta que me di cuenta que en varios diseños webs donde suelo ponerle fondo con esquinas redondeadas a las textareas de los formularios de contacto.. se encontraba ahora una nueva funcionalidad llamada Resize, y es que ahora, las textareas de los sitios webs puedes darle cualquier tamaño, su función resize le permite al visitante de un portal ajustar manualmente el area de texto del mensaje para su mayor comodidad, son unos punticos en la esquina inferior derecha de la textarea como lo muestro en la siguiente imagen

40 coloridas tipografías para inspiración

Algunos diseñadores crean sus propias tipografias para cada diseño, otros se inspiran, modifican la idea y crean nuevos conceptos a partir de una fuente base, sin importar el caso, hace 10 años la existencia de fuentes no era tan variada como ahora, apesar de que existía un sin numero de familia de fuentes, la evolución hasta ahora es muy evidente, nuevas tecnicas y efectos acompañan ese conjunto de curvas que conforman una letra, una palabra o hasta una frase, una fuente puede hablar por si sola, puede contar una historia, siendo la puerta principal a lo que sigue por explorar.

En este post, mi primero para ser exacto, quiero dejarles este listado  de fuentes muy simpáticas que han nacido en los últimos años, fuentes en las que vale la pena inspirarse, ojo dije inspirarse, no copiarse de todos modos las fuentes puedes usarlas para tus proyectos, siempre y cuando respetes los derechos, las fonts al salto.

Firefox 4, la Fundación Mozilla contraataca

Más de un año ha pasado desde la última gran actualización del navegador de la Fundación Mozilla. Durante este tiempo la competencia se ha hecho extrema y el crecimiento en la base de usuarios de Firefox se ha estancado.

Todo gracias a que los navegadores rivales han sabido ofrecer alternativas y se han esforzado en dar lo que el usuario quiere: mayor compatibilidad con los estándares web emergentes como HTML5 y sus tecnologías asociadas, un interfaz minimalista que priorice el contenido sobre el navegador, un consumo de recursos controlado y velocidad.

Se puede decir que todos y cada uno de estos puntos han sido cubiertos de forma extraordinaria con Firefox 4. El nuevo interfaz se basa absolutamente en las pestañas y hasta permite definir cuales quiere el usuario que permanezcan siempre abiertas para los servicios web que usa de forma regular. No es nuevo, ya habíamos visto esta filosofía en Opera o Chrome, donde se demostró que los navegadores que aún piensan en ventanas están desfasados (sí, me refiero a Safari, pero esa es otra historia).