Posts Tagged: "Diseño Web"

5 Plantillas de videojuegos para Joomla

Marbella Romero - June 30, 2010 - Descargas, Herramientas de Diseño, templates de web sites

En este blog por lo general tratamos de traerles cosas que les sean útiles a todos, pero es bien sabido por todos ustedes que la mayor parte de las veces cuando se trata de gestores de contenido les traemos opciones de plugins y plantillas para WordPress u otras herramientas y tips para este sistema.

En esta ocasión he decidido dejar el fanatismo por ese CMS en especial, para traerle a las personas que gustan de usar Joomla como gestor de contenido en sus sitios unas recomendaciones de plantillas, en el ramo de los videojuegos.

Porque ya sabemos que muchos prefieren jugar en su Playstation, Xbox o su consola de preferencia antes que diseñar una web, pero tienen esas ganas de tener su web de juegos, foro de su clan o simplemente compartir con otros fanáticos de algún juego, les traemos esta opción en Joomla en donde existen unas buenas plantillas que les harán el trabajo más fácil.

En esta ocasión les traemos 5 plantillas para Joomla que hemos encontrado en la web de Ayuda Joomla quienes crearon esta recopilación de plantillas entre las cuales se encuentran algunas plantillas de juegos como Medal of Honor, World of Warcraft ( el que seguramente es el juego favorito de muchos de los jugadores en pc) entre algunas otras.

Plantilla Joomla de Medal of Honor

Descargar plantilla Joomla Medal of Honor.

Plantilla Joomla de World of Warcraft ( WoW)

Descargar plantilla Joomla World of Warcraft (WOW).

Si tuviera que elegir una, sin duda mi favorita seria la de Battlefield ya que es el juego que mas me ha entretenido de las opciones mencionada ¿y a ti cual te gusto?

Diseñar webs para móviles

Alfonso Lozano - June 29, 2010 - Como Hacer, Diseño en General, Editores Digitales, Herramientas de Diseño

A la hora de diseñar una web, bien sea personal o para algún cliente en concreto, queremos que se visualice lo mejor posible en todos los navegadores y dispositivos disponibles. Lógicamente esto no es una tarea sencilla porque existen distintos estándares que condicionan que una página web se vea de distinta manera dependiendo de donde se muestre.

Por ejemplo, algo que debemos tener en cuenta es que Internet Explorer, un navegador por todos conocido que Microsoft ha distribuido gratuitamente siempre con sus ordenadores, no soportaba (al menos hasta su última versión) el código html estándar, de igual modo que lo hacían la mayoría del resto de otros famosos navegadores como FireFox, Safari o Ópera. Algo que trae de cabeza a los diseñadores web ya que deben hacer ciertos cambios en el código para que IE, visualice las páginas correctamente. Esto pasa desapercibido por la mayoría de los usuarios de este navegador, que piensan que debe ser bueno ya que es el más utilizado en el mundo. Sin duda una buena estrategia de imponer por parte de Microsoft, un software mediocre, en el sistema operativo más vendido en el mundo.

Sin embargo no todo empieza y acaba en los ordenadores ya que hoy en día van saliendo un montón de dispositivos como los móviles con características avanzadas para una correcta navegación por internet. Y es aquí donde nos encontramos con el mismo problema a la hora hacer que nuestras páginas se visualicen de forma correcta para estos dispositivos cada día más utilizados por miles de personas.

Onbile, puede ser una de las soluciones a este problema ya que nos propone crear una versión de nuestro site para los dispositivos móviles. Totalmente online y en sencillos pasos, podemos realizar la adaptación necesaria para que nuestra web corra correctamente por los navegadores incorporados en los dispositivos celulares.

Esta aplicación online contempla crear tanto versiones de blogs como de páginas html e incluso introducir las feeds necesarias en el código para ser reconocida fácilmente por los distintos motores de búsqueda.

Sin duda una opción a tener muy en cuenta a la hora de adaptar el contenido de nuestra web a las distintas plataformas, para que la mayoría de la gente las visualice lo más correctamente posible.

Entra en Onbile y descubre lo que puede hacer por ti.

EsmeraldasBlog / Fuente de referencia.

Webs de diseñadores para inspiración

Alfonso Lozano - June 16, 2010 - blogs recomendados, Como Hacer, Diseño en General

Parece ser que hoy en día es del todo necesario tener un blog o página web con la que tener presencia en la red. Internet han pasado de ser un medio más a casi ser algo imprescindible en nuestras vidas. Desde buscar información o trabajo hasta comunicarte con cualquier persona del planeta, son cosas que nos ofrece el mundo virtual, que en el real serían verdaderamente costosas de realizar.

Por eso, no solo es de vital importancia tener un espacio propio en la red, sino que ese espacio comunique fielmente lo que queremos representar y lleguemos al público deseado de la manera más eficaz.

En esta labor de crear nuestro propio contenido web, que mejor que echar un vistazo antes a páginas del sector que nos pueda interesar para realizar la nuestra. Por ejemplo, si eres diseñador quizás esta colección de sites te sea de utilidad. No sólo son webs profesionales diseñadas por distintos diseñadores de distintas partes del mundo, si no que además están realizadas con apariencia y estructura marcadas por las últimas tendencias.

Las tendencias suelen ser efímeras y cambian en poco tiempo a diferencia de los estilos que perduran más, sobre todo en la red que todo va demasiado rápido. Por este motivo es recomendable diseñar una web basándonos en un estilo más estable que aguante mejor el paso del tiempo.

Para que tengáis una buena fuente de inspiración a la hora de diseñar una web, esta recopilación es un buen ejemplo a tener en cuenta.

Ver toda la colección en Naldzgraphics / Fuente de referencia.

Como saber la tipografia de un sitio web

Marbella Romero - June 1, 2010 - Como Hacer, Herramientas de Diseño, Informática e Internet, Tipografías y Letras

Todos los diseñadores siempre estamos atentos a los detalles de todos los sitios web que visitamos, es imposible no tener una opinión al respecto del diseño ya sea buena o mala.

En lo personal una de las cosas en las que siempre me fijo es en el tipo de tipografía utilizada en las diferentes partes de la pagina y en muchas de las ocasiones termina gustándome alguna tipografía pero..como es obvio, en ningún lado dice el nombre, así que tengo que andar buscándola en algunos servicios en linea o directamente en las paginas de tipografías gratuitas.

Creo que no soy la única a la que le pasa esto, por ello me ha dado gusto darme cuenta que hay una manera muy fácil de descubrir que tipografías utiliza un sitio web.

Si utilizas como navegador Firefox esto también te será de utilidad ya que se trata de una extensión para este navegador, la cual es muy fácil y practica.

La extensión de la que hablo se llama Context Font y se encarga de mostrar el tamaño en pixeles y la familia a la que pertenece la tipografía que analizamos, dándonos también otros datos como font-style, font-variant.

Una de las cosas que mas me gusto de esta extensión es que al tener un registro de las tipografías, te proporciona un enlace de descarga y así no tienes que ir a buscarla a otro lado, ya que ahí mismo puedes descargarla.

Link para descargar esta extensión de Firefox: Context Font.

Comprobar la correcta visibilidad de los sitios web

Alfonso Lozano - May 21, 2010 - Como Hacer, Editores Digitales, Informática e Internet

Muchos son los aspectos a tener en cuenta cuando diseñamos un sitio web ya que trabajamos con muchos elementos y enlaces que deben funcionar perfectamente en distintas plataformas y navegadores. Esto último sin duda es uno de los quebraderos de cabeza que tienen muchos diseñadores a la hora de programar sus proyectos en la red.

Una web profesional que se precie debe correr perfectamente y respetar el diseño en todos los navegadores y del mismo modo verificar que el código sea correcto. Porque lo cierto es que una página diseñada sin tener esto en cuenta no se verá de igual modo en FireFox o en Internet Explorer. Sobre todo este último es el que más problemas da ya se pasa por alto ciertos estándares en los que se basan el resto de los navegadores. Parece que con la nueva versión 9, muchos de estos conflictos están solucionados, pero siempre se ha tenido que retocar el html para el correcto funcionamiento en el famoso navegador de Microsoft. Después de las críticas formuladas por otros fabricantes e incluso por Google, parece ser que Microsoft ha decidido actualizar su nefasto navegador que ofrece gratuitamente con la adquisición de sus sistemas operativos. Pero precisamente por este motivo y por ser el sistema más vendido y utilizado en el mundo, los diseñadores estamos obligados a crear páginas web que corran bien, al menos por las dos últimas versiones de Internet Explorer.

iPad vectorizado gratis

Marbella Romero - May 16, 2010 - Descargas, Diseño en General, Herramientas de Diseño, Iconos

Desde que hace unas semanas fue lanzada a la venta la nueva tableta (iPad) de la compañía de la manzanita mejor conocida como Apple, esta ha estado causado revuelo en todos los medios de comunicación pero sobre todo en la red, que es donde más cobertura se le ha dado a la noticia y a todas y cada una de las funciones que tiene este aparato y los usos que hasta el momento se le pueden dar.

Además una de las cosas que vemos con esta tableta es que se ha posicionado rápidamente entre los desarrolladores, pues a tan solo unos días de su lanzamiento ya se estaban subiendo cientos de aplicaciones a la App Store para ser compradas por los usuarios de esta tableta.

Y es por ello que no hay dudas de que en todos los diseños web próximos tendremos que agregar agregar algún icono sobre esta tableta en su web, así como en algunas web ya existentes se están agregando.

Para que no batallen mucho, les hemos traído un set de iconos vectorizados del iPad totalmente gratuitos los cuales vienen en los tamaños de 64px, 128px y 256px.

Los archivos son PSD, PNG y archivo de iconos para MAC (ICNS).

Si deseas descargarlos puedes hacerlo desde la web del autor en el blog de Line25.

Tutorial para crear texto con efecto de madera en Photoshop

Marbella Romero - May 11, 2010 - Como Hacer, Diseño en General

Cuando eres diseñador gráfico o web sabes que una de las cosas a las que muchas veces vamos a recurrir en nuestros diseños es a recrear un efecto en alguna tipografía, logo o imagen, entre los que se encuentran los efectos de agua, fierro, fuego, glow, entre otros muchos que existen.

La realidad es que existen una infinidad de efectos que podemos realizar y con los que podemos darle un toque “extra” a un diseño, es por ello que todo buen diseñador tiene bien en claro que nunca esta de más conocer nuevos o diferentes formas de crear un efecto en Adobe Photoshop, las cuales la mayoría de las veces las podremos encontrar navegando por la red.

El día de hoy les traemos el enlace a un tutorial de un efecto que en lo personal me agrado bastante (y que intentare hacer en mi tiempo libre) ya que se ve fácil, rápido de realizar ya que no es muy laborioso y el resultado es muy divertido.

Se trata de un tutorial para crear texto con efecto de madera, el cual que cuenta con un toque diferente, ya que en la unión de cada pedazo de madera podemos ver un tornillo, lo que hace que tenga un toque más realista.

Da un clic en la imagen para ver el tutorial.

Fuente | We Graphics.

9 Tutoriales básicos de Photoshop para desarrolladores web

Marbella Romero - May 5, 2010 - Como Hacer, Diseño en General

Cuando eres desarrollador web siempre te vas a encontrar con algún pequeño detalle en alguna imagen o en algo que necesites cambiar visualmente y para ello tendrás que contactar con el diseñador web, cosa que puede retrasar tu trabajo por horas o en el peor de los casos días.

Es por ello que considero que ser desarrollador web no esta – y no debería, porque se dan los casos que parece que si – peleado con tener los conocimientos básicos de edición en Adobe Photoshop si no que al contrario, desde mi punto de vista le serian de mucha utilidad a la hora de encontrarse en una de las situaciones planteadas arriba.

No soy de las que opinan que un desarrollador puede hacer el trabajo del diseñador web ni al revés, no hay que abusar, sabemos que cada quien es especialista en su área, pero creo conocer algunas cosas básicas en Photoshop si ahorrarían mucho tiempo a un desarrollador .

Es por eso que les traemos el enlace a algunos tutoriales los cuales creo yo, son muy acertados sobre las cosas básicas de edición de imagen que debería saber un desarrollador web como cambiarle el color de fondo a un icono o aprender a mejorar la selección de un trazo con la opción de expansión y contracción, entre otras cosas.

Para ver los tutoriales puedes ir directamente al post 9 Photoshop editing tips web developers should know de Six revisions

Fuente e imagen | Six Revisions.

Ejemplos de páginas web con fondo negro

Alfonso Lozano - April 30, 2010 - Como Hacer, Diseño en General, Informática e Internet

La legibilidad es algo de vital importancia cuando diseñamos un blog o página web. Es importantísimo que toda la información que ofrece nuestro site esté perfectamente ordenada, clasificada y sea fácil de leer. Todos estos aspectos y muchos más hay que tener en cuenta siempre que empecemos a plasmar un nuevo proyecto.

Pero lo cierto es que cuando buscamos limpieza y elegancia en el diseño, solemos pensar en fondos neutros sin florituras que no distraigan la atención del lector y de esa manera destaque más el contenido, bien sea gráfico o textual. Para esto es muy recomendable escoger directamente el blanco o el negro como color de fondo para nuestras presentaciones web.

Si te estás planteando en tu nuevo proyecto utilizar una de estas dos tonalidades y te surgen serias dudas sobre cual escoger, quizás lo que te muestro a continuación de sirva de mucha ayuda. Se trata de una recopilación de 50 ejemplos muy interesantes de páginas web en el que el color negro es su denominador común. 50 excelentes realizaciones de gran elegancia y profesionalidad para poder inspirarnos en cada una de las propuestas.

En Speckyboy, puedes ver todos estos ejemplos de páginas basadas en el negro.

40 ejemplos de WordPress de estética avanzada

Alfonso Lozano - April 26, 2010 - blogs y bloggers, Como Hacer, Diseño en General, Informática e Internet

Cuando elegimos para nuestra página web o blog la plataforma WordPress, posiblemente lo hacemos por la flexibilidad de contenidos que nos ofrece y lo fácil que podemos editar e indexar el contenido del mismo con los buscadores y las distintas redes sociales.

El formato blog tal como lo hemos conocido durante estos últimos años está evolucionando a pasos agigantados y cada vez es más frecuente ver blogs con una estética avanzada y un diseño depurado. En un principio los blogs que corrían bajo la plataforma WP tan solo nos permitían configurar el sidebar en la parte izquierda de la interface y los contenidos solo podían leerse en formato vertical. Sin embargo hoy en día encontramos desde cabeceras espectaculares, métodos de lectura horizontal y galerías flah incrustadas en su contenido, algo que ha hecho posible que cada vez más usuarios realicen sus nuevos proyectos web eligiendo esta plataforma de comunicación.

Como más vale un buen ejemplo que muchas palabras, os muestro a continuación una colección de 40 webs realizadas en WordPress en las que podemos contemplar como nada tienen que envidar a muchas otras construidas en flah, con sus efectos e imágenes sorprendentes.

Una colección para la inspiración que nos será de utilidad a la hora de plantearnos nuevos proyectos para mostrar a nuestros visitantes.

Podéis ver los 40 ejemplos en Spyrestudios.

Vecindad Gráfica / Fuente de referencia.