82 recursos para empezar a diseñar

Para aquellos que ven como una utopía el llegar a ser diseñadores y hasta poder vivir de esto o solo eres diseñador en busca de nuevos recursos o tutoriales para renovar esa inspiración y practica que alguna vez creíste perdida , pues el día de hoy y por cortesía de TheNextWeb te traemos una recopilacion de un total de 82 recursos para ya sea empezar o simplemente afianzar tus conocimientos previos.

En este enlace encontraras una masiva recopilación de recursos que va desde la teoría del diseño hasta las mas conocidas herramientas para tu diseño web.

 

Por cortesía de: TheNextWeb.

Consejos prácticos y rápidos para desarrolladores web noveles

Teclado-Gateway-m6810m

Los siguientes son algunos consejos que me hubiera gustado conocer recién comencé en el mundo de la programación web. Con estos podrás no sólo organizar mejor tu código, sino acelerar la carga de tu sitio. Con lo que le ahorrarás un poco de trabajo al servidor, lo cual con el tiempo se traduce en ahorro de recursos. Así pues, vamos a los consejos:

  • Comenta cada etiqueta div que estás cerrando: Quizá en un principio recuerdes muy bien la estructura de tu sitio, pero conforme vayas agregando más y más divs, se irá perdiendo la sencillez, y aún a pesar de que utilices indentación, te será más fácil si agregas a cada etiqueta div de cierre un comentario, especificando que div se cierra con ella.

comentar-cada-div-cerrado

  • Utiliza un reset de CSS: Ya en una entrada anterior se habló sobre los reset CSS. Su uso es recomendable debido a que los navegadores web no toman los mismos valores por default cuando leen elCSS. Por lo que se podría decir que cada uno interpretará el CSS a su manera. Más cuando utilizamos un reset, nos aseguramos de que lo interpreten todos igual, con los valores por defecto que nosotros indiquemos.

    Leer más

Prueba diferentes Resets CSS

Esta entrada será de utilidad para aquellos que se dedican o que van comenzando con el diseño web. Así como a uno que otro programador cuya tarea sea realizar el maquetado en algún proyecto . Como sabrán, para el aspecto visual de los sitios web se utiliza un lenguaje llamado CSS, el cual a muy grandes rasgos, le dice a cada elemento de HTML, XML, SVG, etc. donde colocarse, y las propiedades visuales que debe adquirir.

css reset

Leer más

Generadores de imágenes para rellenar al maquetar

Durante el desarrollo de un sitio web, dependiendo de su diseño, es común que lleguemos a necesitar imágenes con las cuales rellenar ciertas secciones. Generalmente no son las finales, sino imágenes temporales, sólo para “simular”.

Si bien es cierto que nosotros podemos crearlas en Paint, Photoshop, GIMP, o cualquier programa de edición digital, también lo es que hay sitios que nos pueden evitar el tener que hacerlo nosotros mismos, ahorrándonos algo de tiempo y esfuerzo.

A continuación dos sitios que merece la pena nombrar y tomarlos en cuenta, por su utilidad, sencillez y simpatía:

Leer más

Pure CSS Menu, crea un menú en CSS online

PureCSSMenu

Pure CSS Menu es excelente herramienta que te da la posibilidad de crear menúes desplegables en CSS sin ningún tipo de conocimientos de diseño, y en un par de clicks. Podemos partir de templates predefinidos, tenemos 8 para elegir, no son muy lindos que digamos, pero lo ideal es que lo personalicemos a gusto en vez de usar un template.

Para decirlo de una manera sencilla, es una especie de editor WYSIWYG para menúes CSS, ya que podemos ir agregando o eliminando ítems o enlaces con un click, ajustando las tipografías y colores, el enlace de destino, etc. Siempre viendo una vista previa de los cambios en la parte derecha de la pantalla.

Una vez que terminamos le damos al botón «download» y descargaremos un archivo comprimido con el código CSS y HTML para instalar el menú, también están incluídas las imágenes.

PD: No vamos a entrar en la discusión de cómo se dice, si menúes o menús, por favor les pido (?).

Visto en Web Upd8

Easy CSS Styler: Crea estilos CSS


Easy CSS Styler: Creando estilos CSS
Easy CSS Styler: Creando estilos CSS

Si uno no tiene demasiado conocimiento sobre CSS, lo ideal es aprender. Para esto o para salir del paso en un apuro, una herramienta útil es Easy CSS Styler.

Con Easy CSS Styler podremos crear y compartir nuestro propio estilo CSS en poco tiempo y sin saber nada de programación. Solo deberemos seleccionar las características que nos ofrecen. Entre ellas figuran los colores del estilo, los enlaces, las tipografías, sus tamaños, etc. Una vez estemos conformes con lo que vemos podremos descargarlo o copiarlo.

Mi consejo es que se tomen un tiempo para intentar aprender CSS. Si bien al principio se lo ve como algo complicado la realidad es que con paciencia es algo entendible y sumamente útil si queremos diseñar. Sin embargo, también hay momentos en los cuales necesitarán algo que los ayude a ahorrar tiempo, y Easy CSS Styler parece ser una buena opción.

Fuente: FeedMyApp

CSS explicado para borrachos

css-white-space-nowrap
Todavía me estoy revolcando de la risa con este post que encontré en el blog de Carlos Leopoldo. En realidad el título esá mal expresado a proposito, en este caso se usan borrachos para explicar las propiedades CSS, y la verdad es que funciona perfecto, sino échenle un vistaso al post original en el blog de Darío Ferrer (¡hay más fotos!).

Excelente post para empezar la mañana riéndose, en realidad acá ya es terminar la mañana, son las 11:30 AM, pero para mí empezó hace un ratito, y los mates que estoy tomando lo confirman (?).

Easy CSS Styler, arma un CSS básico de manera visual

css-styler
Easy CSS Styler

Cuando armamos un sitio en HTML, por más básico que sea, hay que darle un poco de estilo a las partes principales mediante CSS, es algo simple, pero que es aburrido hacerlo «manualmente». Hoy encontré Easy CSS Styler , una herramienta excelente, especial para los que nos gusta hacer las cosas lo más rápido posible y con el menor esfuerzo.

Con Easy CSS Styler podemos crear la parte básica de un estilo de manera visual, algo así como un editor WYSIWYG para CSS. Navegando por las diferentes pestañas, body, h1, h2, etc., podemos ir cambiando solores, tipografías, y demás configuraciones de manera visual, y viendo cómo queda en una previsualización a la izquierda.

Una vez que terminamos con la edición visual, sólo queda descargar el archivo con el CSS en formato texto, listo para que lo subamos a nuestro diseño. Me parece una herramienta muy útil, no debe faltar en nuestros favoritos.

Visto en FeedMyApp

CSS Menu Builder, generador de menúes en CSS

cssmenubuilder
CSS Menu Builder

Hace unos días les comenté de un generador de menúes en Flash, ahora le toca el turno a CSS Menu Builder, que con ese nombre nos deja entrever de qué se trata, es un generador de menúes en CSS. La herramienta funciona online y es totalmente gratuita, además no hay que tener ni el más mínimo conocimiento para crearlos, tenemos varios diseños predefinidos, a los cuales luego les podremos cambiar los colores a gusto, agregar íconos, etc.

El primer paso es el elegir el diseño del menú, ya sea horizontal, desplegable, o vertial, luego vamos por el tipo de fondo de los botones del menú, después elegimos el diseño de los punteros, y por último los colores. A la derecha vamos viendo como queda el código, ya sea en HTML o CSS, y también tenemos la opción de descargarlo en formato zip para luego instalarlo en nuestro sitio web.

30 técnicas CSS para crear menúes de navegación


Menúes CSS
Menúes CSS

Tener un buen menú de navegación en nuestro blog es algo importante y no solo por el diseño. Es el medio por el cual los lectores van (o no) a recorrer nuestro sitio, así que se merece nuestra atención y que logremos que se vea atractivo y accesible al final, además de que quede en armonía con el resto de la web.

En SixRevisions publican una lista con 30 excelentes menúes de navegación en CSS para que busquemos inspiración y aprendamos como hacerlos. Practicar es bueno para conocer las técnicas que suelen implementarse al crearlos y para llevarnos mejor con el CSS si es que no tenemos experiencia. Cada ejemplo se acompaña de la demostración, así que solo resta que elijamos el que nos guste y nos animemos para luego adaptarlo a nuestro gusto.