Siguenos en Twitter - tuProgramador.com
Contactanos por telefono - diseño web
tuProgramador.com empresa de diseño web en valencia
blog

Archivo de la categoría ‘Recursos diseño web’

Chuleta (Cheat Sheet ) para CSS 2.1

Viernes, 16 de Octubre de 2009

Esta chuleta para CSS2 contiene todas las principales referencias para trabajar con CSS 2.

CSS2 se cimenta en CSS1 (véase [CSS1]) y, con muy pocas excepciones, todas las hojas de estilo CSS1 válidas son hojas de estilo CSS2 válidas. CSS2 brinda soporte a hojas de estilo específicas para cada medio, de modo que los autores puedan adaptar la presentación de sus documentos a los browsers visuales, a los dispositivos sonoros, a las impresoras, a los dispositivos braille, de mano, etc.

Esta especificación también soporta el posicionamiento de contenidos, fuentes descargables, disposición de la página, aspectos para la internacionalización, contadores y numeradores automáticos, y algunas características relacionadas con la interfaz del usuario.

El visual cheat sheet ofrecido por la página web woorkup.com está completo de descripciones detalladas y algunos ejemplos.

Podeis descargar la versión en PDF directamente desde aquí.

FUENTE:
http://woorkup.com/2009/10/02/css2-visual-cheat-sheet/



Publicado en Artículos, Recursos diseño web | 1 comentario »

Como distribuir elementos horizontalmente con CSS

Jueves, 8 de Octubre de 2009

En este articulo vamos a explicar como distribuir horizontalmente varios elementos dentro de un contenedor utilizando CSS.

Suponemos de querer 3 elementos distribuidos horizontalmente dentro de una capa contenedora.

<div id="contenedor">
    <div class="seccion"></div>
    <div class="seccion"></div>
    <div class="seccion"></div>
</div>

Para distribuir los elementos "seccion", dentro de la capa contenedora,
se podría pensar de aplicar un  margin-left a la clase .seccion. 

En este caso pero, tendríamos el problema de la ultima capa a la derecha que no cabría
dentro del contenedor.

La solucion es utilizar el selector CSS :first-child para aplicar un estilo al primer elemento
dentro de la capa contenedora "contenedor".

Primero hay que definir un estilo a la capa contenedora:

#contenedor { width: 640px; height: 300px; }

luego hay que aplicar un estilo a la clase “seccion” de los tres elementos:

.seccion{
    float:left;
    height:300px;
    margin-left:10px;
    width:200px;
}

y entonces podremos sobrescribir el estilo del primer elemento dentro de la capa
contenedora:
#contenedor div:first-child{margin-left:0px;}

Atención: IE6 no soporta este selector.



Publicado en Artículos, Recursos diseño web | 2 comentarios »

Todos los ultimos mejores plugins jQuery

Miércoles, 30 de Septiembre de 2009

jQuery es una libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.

La sencillez de su sintaxis y la poca extensión del código que necesitas escribir son las características más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrías que escribir mucho, si no que surgirían muchos errores si no eres un experto en JS.

Aquí teneis una colección de los mejores plugins de jquery.

FacyBox – jQuery Based Facebook/FancyBox Style Lightbox

Es un componente que permite la visualización de imágenes, divs o enteras páginas como si fuera una FancyBox o una ventana de Facebook.

FacyBox – jQuery Based Facebook/FancyBox Style Lightbox

(más…)



Publicado en Artículos, Recursos diseño web | 2 comentarios »

jQuery Visual Cheat Sheet una Chuleta de jQuery 1.3

Jueves, 24 de Septiembre de 2009

La página web de woork es un  recurso muy interesante y proporciona muchisimos recursos sea para diseñadores sea para programadores.

Una de sus ultimas aportaciones es una chuleta para jQuery 1.3. Esta chuleta (o Cheat Sheet ) de 6 páginas, contiene referencia a toda el API jQuery con una descripción detallada y algunos ejemplos de uso.

Podeis visualizar el PDF directamente desde Scribd pinchando aquí.

Podeis descargar el PDF completo desde este enlace.

FUENTE ORIGINAL:
http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html



Publicado en Artículos, Recursos diseño web | 1 comentario »

Colección de 50 plantillas web para inspirarte

Jueves, 24 de Septiembre de 2009

Una colección de 50 layouts hechos por varios diseñadores de DevianArt para el diseño de tus páginas web.

Diseño web Inspira de AlxDesign

inspira-creative-web-design-layout-inspiration

Diseño web Jocoo de SencerBugrahan

jocoo-creative-web-design-layout-inspiration

Diseño web EG-Layout Web 2.0 de ejsing

eg-layout--creative-web-design-layout-inspiration

Diseño web Moodbase de sinthux

moodbase-creative-web-design-layout-inspiration

Diseño web Book Store de downsign

book-store-creative-web-design-layout-inspiration

Diseño web One Three V2 de BboyWicked

one-three-creative-web-design-layout-inspiration

Hypowired de sinthux

hypowired-creative-web-design-layout-inspiration

Diseño web Plush de AlxDesign

plush-creative-web-design-layout-inspiration

Diseño web My Portfolio de SencerBugrahan

my-portfolio-creative-web-design-layout-inspiration

Diseño web LedTek de hinokledtek-creative-web-design-layout-inspiration

Diseño web Art4you de ECP-Pro

art4you-creative-web-design-layout-inspiration

Diseño web New freebiesdock.com design de kac2or

freebies-dock-creative-web-design-layout-inspiration

Diseño web Eyebrid de sinthux

eyebrid-creative-web-design-layout-inspiration

Diseño web Greenfolio de CoronaLemon

greenfolio-creative-web-design-layout-inspiration

Diseño web Echo.com de ECP-Pro

echo-com-creative-web-design-layout-inspiration

Diseño web Hydro Quebec de niponwar

hydro-quebec-creative-web-design-layout-inspiration

Diseño web Trillium de Nas-wd

trillium-creative-web-design-layout-inspiration

Diseño web FreeLance de SencerBugrahan

free-lance-creative-web-design-layout-inspiration

Diseño web Partly temporary de tehacesequence

partly-temporary-creative-web-design-layout-inspiration

Diseño web Zimo de zee7

zimo-creative-web-design-layout-inspiration

Diseño web Milostudy de DouglasEltz

milo-study-creative-web-design-layout-inspiration

Diseño web Video de SencerBugrahan

video-creative-web-design-layout-inspiration-1

Diseño web Info CMS de Narayanan

infocms-creative-web-design-layout-inspiration

Diseño web Model de lluck

model-creative-web-design-layout-inspiration

Diseño web grochowicz.pl de gluszczenko

grohowicz-creative-web-design-layout-inspiration

Diseño web ForeSight de pcholewa

foresight-creative-web-design-layout-inspiration

Diseño web Music Shop de pcholewa

music-shop-creative-web-design-layout-inspiration

Diseño web PlugHD de jamesmtb

plug-hd-creative-web-design-layout-inspiration

Diseño web BlackNews de SencerBugrahan

black-news-creative-web-design-layout-inspiration

Diseño web Freschwimmer de CoronaLemon

freschwimmer-creative-web-design-layout-inspiration

Diseño web ECO Insect de Lbr0skc

eco-insect-creative-web-design-layout-inspiration

Diseño web Qarstar Design de Qarstar

qarstar-creative-web-design-layout-inspiration

Diseño web Grabzer de alighandour

grabzer-creative-web-design-layout-inspiration

Diseño web 490 -The Layout de detrans

490-creative-web-design-layout-inspiration

Diseño web SuitJunky de night-m4re

suit-junky-creative-web-design-layout-inspiration

Diseño web Empati Design de SencerBugrahan

empati-creative-web-design-layout-inspiration

Diseño web Kosetasi Web Interface de ThanRi

kosetasi-creative-web-design-layout-inspiration

Diseño web Guitar de Merendil

guitar-creative-web-design-layout-inspiration

Diseño web SimpleSolution de acidflow

simple-solution-creative-web-design-layout-inspiration

Diseño web CubeProductions de vanmall

cube-productions-creative-web-design-layout-inspiration

Diseño web Photo-Folio de S-a-t-i-n-e

photo-folio-creative-web-design-layout-inspiration

Diseño web 8Pixels Studio de arakros1

8pixels-creative-web-design-layout-inspiration

Diseño web Pencilpress theme de gdnz

pencil-press-creative-web-design-layout-inspiration

Diseño web Miasma de Sunjo

miasma-creative-web-design-layout-inspiration

Diseño web ATAK Interactive – Unofficial de Bugx0r

atak-creative-web-design-layout-inspiration

Diseño web Business theme de prkdeviant

business-creative-web-design-layout-inspiration

FUENTE: http://www.1stwebdesigner.com/inspiration/46-outstanding-web-layouts-from-deviantart-september-2009/



Publicado en Recursos diseño web | 2 comentarios »

Iconos para diseño web gratis powered by fatcow.com

Martes, 8 de Septiembre de 2009

fatcow

Os proponemos otra colección de iconos para diseño web.

La colección incluye 600 iconos en 16×16px y 32×32px en el formato PNG.

Como podeis ver desde la imágen de arriba, en la colección de iconos de fatcow.com hay un poco de todo:
iconos de campanas, iconos de estrellas, iconos de libros, iconos de cd, iconos de tartas, iconos de coches, iconos de carritos, iconos con emoticonas…

En la página web prometen incrementar los 600 iconos para diseño web hasta 1000 en Septiembre 2009.

Estos iconos están bajo licencia Creative Commons y se pueden utilizar para cualquier proyecto o página web personal o comercial.

Edit: perdon.. el enlace de la imágen estaba mal.. ahora está arreglado.



Publicado en Recursos diseño web | 2 comentarios »

12 iconos de redes sociales con estilo post-it

Viernes, 21 de Agosto de 2009

postit-icons

Brian Yerkes, famoso y talentoso diseñador ha publicado una colección de iconos gratis de redes sociales con un estilo Post-it.

El paquete de iconos incluye: DesignMoo, DesignFloat y DesignBump además de linked-in, twitter, facebook, digg y otras..

Los iconos tienen formato PNG ( 65px  x  65 px ).

Estos iconos están bajo licencia Creative Commons y se pueden utilizar para cualquier proyecto o página web personal o comercial.

Lo unico que se nos pide es incluir un enlace al blog de Brian: http://www.brianyerkes.com.

fuente:
http://www.brianyerkes.com/free-social-media-icons-post-it-note-style/



Publicado en Recursos diseño web | 1 comentario »

myFontbook: Previsualizador de fuentes online

Lunes, 10 de Agosto de 2009

myFontbook.com es una aplicacion web para navegar, buscar y descrubrir nuevas fuentes online.

De todas las páginas que ofrecen un servicio de este tipo, myFontbook es sin duda la más rápida porque utiliza el sistema de renderización nativo del navegador para ofrecerte tu colección de fuentes y visualizar una vista previa.

Aquí os dejamos un video que demuestra las potencialidades de esta herramienta.

Saludos.



Publicado en Recursos diseño web | 1 comentario »

40 paquetes de iconos para diseño web

Lunes, 10 de Agosto de 2009

Os proponemos una colección de 40 paquetes de iconos para diseño web que son sin duda un recurso indispensable para cualquier diseñador de páginas o aplicaciones web.

Estas pequeñas imágenes pueden darle vida a ciertas zonas del contenido, y en todo caso siempre viene bien saber donde encontrarlos para cuando los necesitemos.

tuProgramador.com, además de proponeros 40 colecciónes de iconos para diseño web, os recomienda un repositorio de paquetes gratuitos muy simple y muy completo:

http://www.iconspedia.com

Recuerden revisar las licencias si van a utilizarlos en un proyecto comercial.

Fuente:

Hongkiat

(más…)



Publicado en Recursos diseño web | 7 comentarios »

Diseño web: verifica tu sitio en todos los navegadores

Miércoles, 22 de Julio de 2009

Una de las tareas más complicadas y que toman mucho tiempo, es la de verificar si los sitios web que se diseñan funcionan correctamente en todos los principales sistemas operativos y navegadores.

Una de las soluciones mas comunes es instalar diferentes SO con maquinas virtuales o disponer de muchos ordenadores con diferentes instalaciones y configuraciones.

Pero estas soluciones son bastante ridiculas y suponen una inversion bastante alta.

Hay numerosos servicios online que ofrecen probar nuestros diseños en todos los navegadores y con todas las configuraciones posibles como la resolución de pantalla, la configuración de colores, plugins como el mediaplayer o desactivar javascript, etc.

Estos servicios generan imágenes de la pantalla de un sitio en hasta 80 versiones de los navegadores más populares de Windows, Linux, BSD y Mac.

Los principales servicios online para verificar tu sitio en los principales navegadores son:

BrowserCam

Tienes que registrarte y pagar una cuota para acceder sin limitaciones a sus servicios, aunque puedes utilizarlo para probarlo.

Browsershots

Aunque no es instantáneo, tarda su buena media hora en trasegarse los pantallazos.

Sin embargo, aunque este último servicio ofrece una gran variedad de navegadores web en los cuáles verificar el sitio, el proceso puede durar hasta una hora.

Adobe BrowserLab

Otra valida solución es Adobe BrowserLab, un nuevo servicio de Adobe que genera screenshots instantáneas de los siguientes navegadores:  Firefox 2.0 (XP, OS X), Firefox 3.0 (XP, OS X), IE6 (XP), IE7 (XP), Safari 3.0 (OS X).

adobebrowserlab

Ahora que la mala noticia, es que el servicio es gratuito solamente por un tiempo limitado por lo que si necesitas seguir usándolo, habrá que pagar por él.  No obstante, para hacer revisiones rápidas con navegadores populares como Firefox o Safari, Adobe BrowserLab es una excelente opción que te será de gran ayuda cuando termines de diseñar tus sitios web.



Publicado en Recursos diseño web | 1 comentario »