El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Estás navegando por el archivo de la categoría Recursos

iPhone Tester, comprueba como se verán tus sitios en un iPhone

iphonetester

Si te pica la curiosidad de saber como se verá tu sitio en un iPhone pero ni dispones de uno ni tienes ganas de descargar aplicaciones para comprobarlo prueba iPhone Tester.

iPhone Tester es un cómodo simulador web con el que visualizar tus páginas de forma muy similar a como lo hará un usuario de iPhone e incluso te permite girarlo para colocarlo en modo landscape. Eso si, para que el resultado sea más cercano al real deberás usar la última versión de Safari (disponible para Windows y OS X).

iPhone Tester: http://iphonetester.com/

Vía DosBit

Herramientas Online

4 Comentarios

UI Patterns, librería de patrones de diseño de interfaces

ui-patterns

A la hora de diseñar interfaces de usuario, sean para web o para otro tipo de aplicaciones, suele ser recomendable recurrir a convenciones que resulten familiares al usuario para facilitarle la interacción.

UI Patterns es un sitio web donde podrás consultar diferentes patrones de diseño para solucionar situaciones comunes en desarrollo de interfaces web.

La web se divide en varias secciones, una nos muestra diferentes patrones de uso común, con una explicación del caso de uso y consejos para implementarlos. Estos patrones pueden ser valorados por los usuarios. Por otro lado también cuenta con galerías de capturas de pantalla de diferentes componentes de los interfaces, para que veas como han resuelto la situación en otros sitios y te inspires para diseñar tus propios sitios. Por último también podrás acceder a galerías de los usuarios.

A pesar de que existen miles de galerías de diseños, el enfoque de UI Patterns me parece especialmente interesante, muy útil sobre todo cuando no tenemos muy claro como afrontar un problema con un diseño.

Yo hace tiempo que hacía algo parecido, guardando capturas de pantalla de los aspectos que me resultaban más interesantes de algunos sitios web ¿hacéis algo similar? ¿os resultaría útil un servicio parecido a este pero en castellano?

UI Patterns: http://ui-patterns.com

Diseño Web, Inspiración, Usabilidad y Accesibilidad

3 Comentarios

ie6fixer se encarga de la compatibilidad de tus CSS con IE6

ie6fixer

Cuando vi la noticia sobre esta aplicación tuve que revisarla varias veces porque pensaba que era una broma del April’s Fools (ya sabéis, el dia de los inocentes anglosajón).

ie6fixer es una aplicación web que ojalá pronto sea innecesaria cuya finalidad es generar los correspondientes hacks para que tus hojas de estilo sean 100% compatibles con Internet Explorer 6.

Para trabajar con la aplicación simplemente copiaremos y pegaremos el código de nuestras hojas de estilo y escogeremos si queremos crear una hoja específica para ie6 que introduciremos mediante comentarios condicionales (opción recomendada) o si lo que preferimos es introducir hacks en nuestra hoja.

ie6fixer: http://www.onderhond.com/tools/ie6fixer/

Vía anieto2k

CSS, Herramientas Online

3 Comentarios

Redmark, revisión de diseños online

redmark

Hace ya tiempo, por el 2006, os hablaba de una aplicación llamada Conceptshare que nos permitía subir un diseño a un Workspace virtual y permitir que nuestros clientes o colaboradores nos hiciesen correcciones o sugerencias sobre el mismo.

La idea de realizar las revisiones visualmente me parece muy acertada y práctica, sobre todo para los que trabajamos a distancia de nuestros clientes pero ConceptShare tiene una pega: no tiene planes gratuitos así que, para los que no amortizaramos el coste de la suscripción quedaba casi descartado.

Hoy me contacta Anton Babadjanov para presentarme el proyecto que él y su equipo están desarrollando: Redmark.

Redmark es muy similar a ConceptShare. subimos nuestro diseño, enviamos invitaciones a nuestros clientes para que revisen el diseño online y nos indiquen que deberíamos cambiar o como ven ellos que iría mejor la cosa. En el dashboard de la aplicación podremos acceder a un resumen del trabajo pendiente.

redmark2

Por el lado del cliente todo es muy sencillo, recibe un enlace, revisa el diseño y listo. No tiene por qué registrarse ni dar datos de ningún tipo. Y por el lado de cuidar nuestro bolsillo, una buena noticia, Redmark dispone de una versión gratuita que cubrirá las necesidades de quienes no tengan que tratar con demasiados clientes en cada proyecto ya que nos permite crear proyectos ilimitados e invitar a dos clientes.

Actualmente están en beta privada pero han sido tan amables de ofrecerme un código que permitirá que nos registremos 50 personas. No sabía como hacerlo público así que lo dejo aquí, daos prisa y aprovechadlo mientras funcione: M31002.. Me comentan que ya no funciona el código, si me llegasen a dar más os avisaría

Redmark: http://www.redmarkit.com

Herramientas Online, Recursos

8 Comentarios

Styleneat, hojas de estilo ordenadas y limpias

Styleneat

Mantener las hojas de estilo ordenadas, que sigan una cierta lógica, es una de esas buenas costumbres que todos deberíamos cultivar.

No obstante, cuando heredamos código de otros desarrolladores o, incluso, cuando trabajamos con prisas o sin prestar suficiente atención, podemos encontrarnos con auténticos desastres.

Styleneat es una cómoda aplicación online que promete dejar tus hojas de estilo limpitas como una patena. Para ello sólo tendrás que cargar tus estilos de una de las tres formas disponibles (pegar directamente el código, subir el fichero css o importarlo desde una dirección web).

Una vez cargado el código podrás seleccionar unas cuantas opciones para formatearlo: organizar las propiedades alfabéticamente, organizar selectores alfabéticamente (con cuidado, según pone la propia web, así que supongo que podría salir mal), importar y organizar el código de hojas de estilo enlazadas (@import) y si queremos formatear nuestras reglas de estilo en una sola línea o en varias. Por último, existe una casilla etiquetada “safe organize” que supongo prevendrá a la aplicación realizar acciones que pudieran “romper” nuestras hojas de estilo.

Styleneat

Supongo que os resultará práctico para poder presumir de tener unas hojas de estilo perfectamente ordenadas y limpias.

Styleneat: http://www.styleneat.com/

Vía Wwwhat’s new?

CSS, Herramientas Online

Comenta

Vaga, otro set de mini iconos

Iconos Vaga

Si ya tienes demasiado trillados los iconos Silk de FamFamFam pero te gusta ese estilo de pequeños iconos multicolores estás de enhorabuena.

Vaga es un set lanzado por Ed Merritt compuesto de 60 iconos semi transparentes en formato png.

Vaga: http://www.tenbytwenty.com/products/icon-sets/vaga

Vía Zona Cerebral

Imagenes, Recursos

2 Comentarios

TinyJS, practicos y pequeños scripts

tinyjs

En esto de la web, el tamaño importa y, por lo general, a más pequeño mejor.

TinyJS es un sitio web dedicado a recopilar scripts que, a pesar de tener un tamaño casi ridículo, son potentes y prácticos.

Los scripts se dividen en categorías por librería: jQuery, YUI y MooTools.

Tiny.js: http://tinyjs.com/

Vía Intenta

Javascript, Recursos, Scripts

8 Comentarios

BuddyDress, colección de themes para BuddyPress

buddydress

No hace demasiado, la gente de WordPress lanzaban su apuesta para entrar en el mundo de las redes sociales. BuddyPress es un sistema basado en WordPress Mu y, a pesar de estar ser muy joven todavía, es una opción más que interesante para desarrollar nuestras comunidades.

BuddyDress es una web dedicada a los themes para personalizar nuestro BuddyPress, no es que haya demasiados de momento pero parece que se empieza a mover la comunidad para conseguir que cualquiera, independientemente de sus conocimientos o su talento para diseñar, pueda disponer de su propia red social y ponerla bonita y vistosa.

BuddyDress: http://www.buddydress.com

Recursos

4 Comentarios

Handycons, iconos dibujados a mano

Últimamente se ha puesto bastante de moda el incorporar a nuestros diseños web elementos escritos o dibujados a mano alzada.

Si lo que buscas son iconos que parezcan dibujados en papel hoy te traigo dos sets lanzados desde Yanko at Warp Speed

Handycons:

handyicons

Descarga Handycons

Handycons 2:

handyicons 2

Descarga Handycons 2

Imagenes, Recursos

3 Comentarios

2 sets de iconos gratuitos por David Hopkins

Me llega un correo de David Hopkins comentándome que ha liberado dos sets de iconos gratuitos libres para usarse en proyectos de todo tipo bajo licencia Creative Commons de atribución.

Uno de los sets se compone de 310 iconos de 16×16

web_design_icon_pack01

Descarga

El segundo set se compone de 52 iconos de 48×48

sem_labs_icon_pack01Descarga

Gracias David por crear estos packs de iconos tan interesantes y compartirlos con nosotros.

Imagenes, Recursos

3 Comentarios

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna