Elements of Design: showcase de elementos web

ByLuis

Elements of Design es una galería de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas al diseño general. Es como CSSMania pero en vez de diseños completos, enfocado únicamente a elementos.
elementsofdesign.png
Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda y tipología de cabeceras.
Elements of Design

Similar Posts

| |

Everystockphoto: buscador de imágenes gratuitas

ByLuis

everystockphotoMuchas de las veces que hago un script para una entrada que necesita de una imagen, suelo intentar buscar alguna que sea gratuita o con licencia Creative Commons, suelo buscar en Flickr, pero o no me apaño muy bien, o el número de resultados que ofrece no son todos los que tiene, también suelo buscar en Open Photo. Ahora hay otro nuevo servicio que nos ofrece un lugar dónde encontrar estas fotos, se trata de Everystockphoto, que con 220 mil fotos (y subiendo), nos da la posibilidad de buscar esas fotos gratuitas de calidad que buscamos.
Everystockphoto.com
Vía / Intenta

Cómo realizar un diseño web 2.0

ByLuis

Un buen artículo en el que nos explican cómo pasar nuestro diseño a diseño web 2.0. Claro, cada cual tiene sus gustos y sus conceptos de diseño y puede que no esté de acuerdo con todo lo que se dice, pero aún así es un artículo a tener en cuenta.

Resumiendo un poco el post, nos encontramos con los siguientes consejos:

  • Simplicidad: cuanto más sencillo mejor, es necesario tener en cuenta que todos los sitios webs tienen sus metas y que cada página tiene su propósito. Es necesario obtener la atención del usuario, pero cuidado que su atención es algo que se acaba. La simplicidad es algo que siempre deberíamos tener en cuenta, elimininando contenido innecesario pero sin quitar funcionalidad.
  • Layout centrado: muy característico de la web 2.0 es tener en contenido centrado en la página.
  • Menos columnas: mientras que antes lo normal era un diseño en 4 columnas, ahora lo más utilizado son las dos columnas, evitando así llenar completamente la pantalla y reforzando el primer punto, la simplicidad.
  • Navegación arriba: separar la navegación del contenido principal no es nada nuevo, pero en este caso se resalta que se situe arriba.
  • Diferenciar distintas áreas: que a simple vista, cada área con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
  • Navegación sencilla: debemos conseguir que el usuario sepa dónde está y a qué contenidos puede acceder desde donde está.
  • Logos en negrita: limpios, en negrita y fuertemente marcados.
  • Tamaño de texto grande: haciendo el texto grande se consigue mayor atención que con el texto pequeño.
  • Introducciones en negrita: consiguiendo así mayor impacto visual sobre las cosas más importantes.
  • Colores fuertes: usando colores brillantes y fuertes se consigue una separación de contenidos más sencilla.
  • Superficies con detalle: ya sea mediante sombras, resaltados, difuminados, que las superficies no sean simples, sino más realistas.
  • Gradientes
  • Reflejos
  • Iconos atractivos: es necesario que sean fácilmente reconocibles, que no provoquen confusión.
  • Contornos estrellados: sobre todo con el beta dentro.

Web 2.0 how-to design style guide

Vía / dzone

Torii: aplicación para crear portales

ByLuis

torii.pngTorii es una aplicación que desarrolla portales de forma sencilla mediante el uso y desarrollo de módulos. Incluye una extensa documentación y una serie de módulos iniciales como integración de feeds, tiempo, sistema de información, listas to-do y mucho más.
torii2.png
Además incluye temas que nos permite modificar el aspecto de nuestro portal de forma rápida.
No hace mucho uso de Javascript para evitar que el gasto innecesario de los recursos del navegador. A parte, el porta se cargan con mucha rapidez ya que los datos se cargan asíncronamente más tarde.
Es necesario disponer de PHP 5.2 y las siguientes extensiones: SimpleXML, DOM, PCRE y SPL, JSON, PDO y PDO/SQLite, y Curl. PDO/SQLite es necesario porque algunos módulos necesitan almacenar información.
Torii

Consejos para desarrollar Rich Internet Applications

ByLuis

Buenos consejos a tener en cuenta cuando quieras desarrollar un aplicación de internet (Rich Internet Applications):

  • Hazlo interactivo: en vez de ir página a página, hazlo que sea interactivo, edita contenidos, usa drag & drop.
  • Invita a usarlo: pequeños efectos con hover puede conseguir que el usuario se atreva a interactuar.
  • Usa popups ligeros: no se trata de ventanas popups, sino capas que de despliegan. Intenta usarlos cuando puedas para no tener que ir de página en página.
  • Piensa en la interacción como si fuera un storyboard: situa los frames como un storyboard para hacerte una mejor idea de cómo se deben producir las acciones.
  • Indica que acciones se realizan: avisa cuando se haya producido una acción, sin necesidad de dejar la página.
  • Piensa en objetos: en vez de pensar en contenidos y páginas.

Puedes leer más en:

Nine Tips for Designing Rich Internet Applications

Vía / backdraft

|

170 cheat sheets para desarrolladores web

ByLuis

Ya hace tiempo hablamos de un directorio donde podíamos encontrar 30 cheat sheets, en este caso se trata de 170, que nos ayudarán en nuestro desarrollo web.
Aunque no todas son de desarrollo web, si la mayoría. Organizada por categorías, podemos encontrar ‘chuletas’ sobre: ActionScript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, Firefox, Google, HTML, Java, Javascript, LaTeX, microformatos, MySQL, Oracle, Perl, Photoshop/Gimp, PHP, Python, expresiones regulares, Ruby, Linux, blogs, Windows y XMLs.
Yo ya le he dado a imprimir unas cuantas que me van a venir muy bien.
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby
Vía / Digg

|

Scale-out vs Scale-up

ByLuis

In this post I'll cover the difference between multi-core concurrency that is often referred to as Scale-Up and distributed computing that is often referred to as Scale-Out mode.  more.. Source: Scale-out vs Scale-up (http://www.dzone.com/links/r/scaleout_vs_scaleup.html) by Nati Shalom …

Post original