Comenzamos una serie de tutoriales para crear tu primera plantilla para Joomla y WordPress. desde su diseño estático con Photoshop y su codificación en xHTML y CSS utilizando el Framework 960 Grid System hasta la implementación en Joomla 1.5.

Para este primer ejemplo crearemos una plantilla lo más sencilla posible que sirva de excusa para la posterior codificación e implementación como plantilla de Joomla.

Este primer tutorial aborda conceptos muy básicos de Photoshop, por lo que está recomendado para los que se inician con este Programa, utilizaremos la versión CS4 pero para seguir el tutorial podréis disponer de versiones anteriores.

Estas son las partes del tutorial:

• Parte 1: Diseño Estático
• Parte 2: Codificación xHTML/CSS (proximamente…)
• Parte 3: Implementación en Joomla 1.5 (proximamente…)
• Parte 4: Implementación en WordPress (proximamente…)

(más…)

Agrupado en: CSS, Diseño Web, Joomla by Miguel Puig
17 Comentarios »

A mi modo de ver las cosas uno de los elementos principales a la hora de diseñar una página web es la elección de la tipografía. Existen ciertas reglas a la hora de usar una u otra en cuanto a legibilidad y aspecto.

Las fontstacks (conjunto de fuentes) son cada librería tipográfica que insertamos en los elementos de una Web mediante la propiedad CSS “font-family”. En grandes rasgos se dividen en fuentes serif (con adornos) o sans-serif (sin adornos o de palo seco), un ejemplo de serif es la “Times New Roman” y sans serif la “Helvética”.

En el siguiente enlace podremos ver las más usadas en cada sistema operativo y las más apropiadas para aplicar tanto en los párrafos como en los encabezados

Enlace:
Build better CSS font stacks

Agrupado en: CSS, Diseño Web by Miguel Puig
Sin Comentarios »

Styled Menus es una colección de menus en css para tus diseños.

Han sido testeados en IE6, IE7, Firefox, Opera, Safari y Chrome.

Más info: http://www.styledmenus.com/

Agrupado en: CSS, Diseño Web, Recursos by Miguel Puig
Sin Comentarios »

La siguiente lista de páginas diseñadas con CSS ha sido expuesta en webdesignerwall. Se va viendo una tendencia a usar imágenes de fondo en los diseños a la vez que utilizar frameworks javascript como MooTools o jQuery.

Agrupado en: Actualidad, CSS by Miguel Puig
Sin Comentarios »

Malo es un pequeño CSS framework (0,25 kb comprimido) para crear la estructura base de un sitio web pequeño/medio

Es una derivación del Emastic CSS Framework

Malo tiene dos partes:

• Reseteo básico
• Sistema de rejilla

Es ideal para el que no quiera complicarse con un framework grande.

Más información (code.google)

Agrupado en: CSS, Diseño Web, Recursos, framework by Miguel Puig
Sin Comentarios »

Esta nueva aplicación web será la delicia de los desarrolladores web, con ella podrás crear via web menus personalizados en CSS e integrarlos facilmente en tus proyectos.

Agrupado en: CSS, Diseño Web, Recursos by Miguel Puig
Sin Comentarios »

Dynamic Drive All Levels Navigational Menu es un menú basado en CSS/xHTML para incorporar en tus proyectos, es multinivel por lo que podrás insertar infinitos enlaces, fácil e intuitivo.

Agrupado en: CSS, Recursos by Miguel Puig
Sin Comentarios »

CSS Decorative Gallery. Tutorial de CSS  con el cual podrás decorar tus imágenes sin editarlas en Photoshop, Todo lo que necesitas es una etiqueta  <span> extra y aplicársela a la imagen de fondo para crear el efecto.

Este truco funciona con cualquier imagen de cualquier tamaño.

Via: visual-blast.com

Agrupado en: CSS, Diseño Web, Tutoriales by Miguel Puig
5 Comentarios »

Una lista de libros en Inglés recomendados por Blog design blog.
Se presentan libros de Tipografía, CSS/XHTML, Diseño, Color Usabilidad, Logos, Javascript, etc.

visitar enlace [inglés]

He recopilado para descarga directa desde rapidshare unos cuantos que a mi parecer son indispensables. Pongo su descripción (traducida del inglés) sacada desde blogdesignblog.

CSS Mastery: Advanced Web Standards Solutions por Andy Budd, Simon Collison, and Cameron Moll

CSS Mastery es uno de esos libros solidos que hacen un bun trabajo cubriendo los diferentes aspectos de CSS y XHTML que necesitas saber para construir un sitio web. Al final del libro se detiene sobre unos cuantos casos de estudio de manera que puedas ver en la practica las aplicaciones que has aprendido
Descargar desde rapidshare.
Comprar en amazon.com

The Art and Science of CSS por Jonathan Snook, Steve Smith, Jina Bolton, and Cameron Adams

Un libro que está lleno de buenos ejemplos enseñándote lo fundamental que necesitas para construir un sitio web. La diferencia entre este y CSS Mastery es que este libro usa más color de tal forma que los ejemplos son fáciles de ver y también cubren diferentes tópicos. Ámbos libros cubren lo básico, el que necesitas depende de tu preferencia personal.
Descargar desde rapidshare.
Comprar en amazon.com

Learning jQuery: Better Interaction Design and Web Development with Simple Javascript Techniques por Karl Swedberg and Jonathan Chaffer

jQuery es un gran marco que hace el javascript más facil de usar y también más fácil de entender. Este libro esta escrito por los desarrolladores de jQuery y está lleno de grandes ejemplos que lo hacen mucho más fácil de aprender
Descargar desde rapidshare.
Comprar en amazon.com

Simply Javascript por Kevin Yank and Cameron Adams

Llega un punto en el que quieres añadir más funcionalidad a tu diseño y javascript es un gran camino para hacerlo. Se cuidadoso utilizando javascript por si estas pensando en utilizar este lenguaje en funciones vitales de tu sitio web

Descargar desde rapidshare.

Comprar en amazon.com

Google Analytics 2.0 por Jerri L. Ledford and Mary E. Tyler

Google Analytics es increíble no solo porque es gratis, es un programa muy potente para saber lo que tus visitantes están haciendo. Si no sabes lo que los visitantes están haciendo, entonces puedes corregir problemas antes de que ellos tengan el control o hacer tu diseño mejor.

Descargar desde rapidshare.

Comprar en amazon.com

The Principals of Beautiful Web Design por Jason Beaird

Un libro muy bueno para que empieces con los principios de un bonito diseño web. Tiene muchos y muy buenos ejemplos de cada principio. Al final de cada capítulo, lo que has aprendido es aplicado a una pagina web que el autor está creando, para que cuando termines veas un diseño terminado

Descargar desde rapidshare.

Comprar en amazon.com

Agrupado en: CSS, Diseño Web, Tutoriales, libros by Miguel Puig
5 Comentarios »

Via Artegami nos llega esta tabla de equivalencias para las diferentes medidas a la hora de diseñar una Web, recomendable es utilizar por ejemplo las medidas em para el texto, lo hará más compatible por asíd decirlo. No me paro demasiado a explicarlo que llego tarde a clase

Agrupado en: CSS, Diseño Web by Miguel Puig
Sin Comentarios »

Design es la nueva herramienta web que puede utilizarse en cualquier página. Lo que hace es sencillamente mostrarte una rejilla, regla, unidad o un punto de coordenadas.

Su instalación es muy sencilla

1- Visita http://www.sprymedia.co.uk/

2- Arrasrtrala imagen de design a la barra de marcadores y púlsala, verás como aparece mediante javascript un panel de opciones para añadir estas herramientas a cualquier sitio.

Es de gran utilidad para empezar tu diseño con CSS.

Agrupado en: CSS, Diseño Web by Miguel Puig
Sin Comentarios »

En el siguiente enlace teneis una serie de técnicas que siempre van a venir bien a todo diseñador web, solo aplicando CSS se pueden hacer cosas que yo ni pensaba, como personalizar radio buttons de formularios.
53 CSS-Techniques You Couldn’t Live Without

Agrupado en: CSS by miguel puig
Sin Comentarios »