Alejandro Fanjul | Mi Blog Personal

Tag: diseño web (página 1 de 3)

Cómo hacer un botón para cambiar de Listado a Rejilla con jQuery

A veces en las tiendas online nos interesa tener la posibilidad de poder cambiar el listado de productos entre “modo lista” y “modo rejilla” para que el usuario o comprador pueda elegir la forma de visualización que le resulte más cómoda. En los siguientes enlaces os muestro el material que he encontrado para implementarlo en javascript o jQuery: Muy bien implementado con jQuery. Además incorpora la funcionalidad de guardar las preferencias del usuario en una cookie. www.webcodo.net/switch-products-view-gridlist-without-refreshing-the-page-with-jquery-html-css/#.Ut-a0RS0q01 www.webcodo.net/grid-list-view-with-jquery-category-filter-cookie-support/#.Ut-ZtBS0q00 En este otro ejemplo también se hace uso de jQuery. El enlace de “demo” no funciona, pero en el propio código fuente se puede ver un ejemplo. vandelaydesign.com/blog/web-development/list-grid-view-switch/ Otro ejemplo muy bien implementado: www.programming-free.com/2013/12/fading-list-grid-view-switch-jquery.html En esta ocasión es una implementación del estupendo portal “tympanus.net”: tympanus.net/codrops/2013/07/01/view-mode-switch/

Flexbox – Técnica para colocar la barra lateral después del contenido

En muchas ocasiones nos interesa que las barras laterales o el menú de navegación de una web en su modo “mobile” se ordenen de una forma diferente. Mediante la técnica de “Flexbox” podemos re-ordenar los bloques o secciones de una página en un diseño responsive. Aquí os dejo un artículo muy interesante sobre la “coreografía del contenido” en una web, y un ejemplo muy visual y práctico de como llevarlo a cabo con su css asociado. (aquí otro ejemplo)

Emulador de móviles Android, iPhone con Google Chrome

Google acaba de actulizar su navegador a la versión Versión 32.0.1700.6 beta-m Aura (del canal Beta) y con ella nos ha traído un nuevo emulador para móviles como Android o iPhone. Esto quiere decir que podrás probar y testear tu página web HTML5 responsivedirectamente en el navegador y emular cualquier dispositivo, ya sea un smartphone o una tablet como el iPad.   Chrome mobile emulator Si bien es cierto que Google Chrome ya tenía un emulador para móviles, ahora tienen un apartado propio para hacer las cosas más sencillas (tal y como se ve en la imagen), y además ahora también puedes simular los eventos “touch” en la pantalla, lo cual da un realismo mucho mayor. Por último suprimen las “scroll bar” para ofrecer unas barras de scroll a semejanza de las que ofrecen los móviles actuales. A mí ya me ha servido para detectar un pequeño problema de márgenes en nuestra web de www.palbin.com. ¿Qué opinas tu sobre este nuevo emulador?

Reducir y cambiar tamaño fotos online

Hoy en día muchas formas de cambiar tamaño fotos online, en este caso no hablamos de recortar la foto, ni de reducir sus dimensiones sino de poder comprimir fotos online. Para ello os doy 2 enlaces a 2 servicios web que te permiten comprimir el tamaño de tus fotos sin apenas perder mucha calidad.

    • www.imgopt.com: Desarrollado por Yahoo, se encarga de eliminar ciertos bytes no utilizados en las imágenes para comprimir tu foto y reducir su tamaño. Esta herramienta es una “lossless” tool, lo que quiere decir que no perjudica la calidad de tu imagen en ningún momento.
  • tinypng.org: Herramienta con una interfaz muy rápida e intuitva que te permite reducir el tamaño de tus imágenes PNG reduciendo el número de colores que realmente necesita la imagen y eliminando ciertos bytes que no se utilizan. Si bien es cierto que la calidad de la imagen podría empeorar, al ojo humano es prácticamente inapreciable. Permite hacer “drag an drop” de tu ordenador a la web.
  • compressjpg.com/: A pesar de su nombre, esta herramienta te permite comprimir tanto imágenes JPG como imágenes PNG, si bien es cierto que su trabajo más efectivo lo hace sobre fotos jpg. Su interfaz es muy fácil e intuitiva de usar. Permite hacer “drag an drop” de tu ordenador a la web.
  • www.jpegmini.com/: Por último una opción bastante pontente pero menos intuitiva y fácil de usar es jpegmini, llevan mucho tiempo online y tiene una efectividad de reducción de tamaño muy buena. Se centran en JPG.

 

¿Cómo resolver el problema de la pérdida de calidad en compresiones jpg?

Cuando comprimes una imagen JPG se produce generalmente una pérdida de calidad en la imagen y aparecen lo que se llaman “artefactos jpeg”, es decir, una especie de aura con pequeñas distorsiones sobre los bordes de los objetos y letras con cierto contraste en el perfil.
Para solucionar esto, existe un software de la empresa “Topaz” que se llama DeJPEG y que te permite reducir estos “artefactos” de una manera considerable, aquí podemos ver un ejemplo:
Mejorar calidad jpeg
Os dejo un enlace de descarga gratuita: TopazDeJPEG (hay que dar abajo donde pone “liberta descarga”.

Script en JQuery para calcular el precio usando un formulario en tiempo real

Script en JQuery para calcular el precio usando un formulario en tiempo real:

http://codecanyon.net/item/jquery-price-calculator-pro/405818
http://www.tonybebber.com/costestimatr-jquery-plugin

Herramientas para monitorizar la experiencia de usuario de tu web y trackear su navegación a través del movimiento del ratón

Herramientas para monitorizar la experiencia de usuario de tu web y trackear su navegación a través del movimiento del ratón: luckyorange.com (de pago, muy buena pinta) www.clicktale.com/ (de pago, el más conocido) mouseflow.com/ (de pago, muy limpio y parece sencillo) www.dom111.co.uk/files/trackr/ (gratuito, plugin para jquery sencillo) smt.speedzinemedia.com/ (grautito, open source, realizado por Luis Leiva de la UPV de Valencia)

Plantillas html para landing pages o páginas de marketing

Aquí os dejo las plantillas html que más me gustan para landing pages y páginas web de marketing. Iré recopilando todas las que me parezcan interesantes:

Plantillas HTML para la administración y paneles de control

Plantillas HTML para la administración: Aquí os dejo las plantillas html que más me gustan para administraciones y paneles de control de sitios web. Iré recopilando todas las que me parezcan interesantes:

Developr: Preparada para dispositivos táctiles, muy buen diseño y usabilidad, aunque igual un poco cargada: www.display-inline.fr/demo/developr/

Bluenso: Basada en Twitter Bootstrap, una plantilla muy sencilla y clara, igual demasiado simple? wbpreview.com/previews/WB0DK033H/index.html

Utopia: Excelente plantilla para administración, muy minimalista y agradable de ver a la vista. utopiaadmin.themio.net/dashboard.html

Simplenso: Para mi sin duda la mejor plantilla html para una adminsitración. Basada en Twitter Bootstrap sigue las mejores prácticas para maximizar el espacio de trabajo a la vez que presenta una interfaz clara y sencilla de utilizar. wbpreview.com/previews/WB00958H8/

Gin Admin: Extraordinaria plantilla para administración con una barra lateral al más puro GooglePlus, excelente calidad y simplicidad en el diseño. wbpreview.com/previews/WB0L805L0/

Huraga: Increible diseño para una administración. Tiene una interfaz que da mucha limpieza y cercanía. No es la típica interfaz fría.

Virgin La interfaz más minimalista de todas, es increible lo agusto que se queda uno trabajando con ella, tienes espacio por todos lados. La única pega es que no tiene implementado formularios, o elementos básicos de administración. wbpreview.com/previews/WB095F5T9/

Radmin Impresionante interfaz, con un acabado en madera y blanco muy al estilo de la nueva web de Palbin. Muy intuitiva y fácil de usar. Igual la barra superior es lo que no me acaba de convencer del todo, por lo demás un 10. wbpreview.com/previews/WB09SG9DS/index.html

NeoAdminInterfaz muy muy sencillo para la administración de OpenCart. Me gusta su sencillez y claridad de secciones. labs.intersect.com.br/neoadmin/en/demo/admin/

Flat Admin Impresionante interfaz con diseños planos y multitud de opciones y configuraciones. Responsive y preparado para móviles. Apariencia muy similar aoutlook.com de microsoft. Excelente! www.eakroko.de/flat/

Admin Plus Muy buena interfaz con posibilidad de layout fijo y fluido, menús muy accesibles. demo.mosaicpro.biz/adminplus/php/

Syrena: Después de un tiempo sin actualizar el post y mirar otras plantillas, me encuentro con esta excelente plantilla para administración hecha en Bootstrap 3.0. Sus puntos fuertes son el diseño plano y responsivo, sencillo y sin mucho ruido visual. Sin duda alguna el mejor hasta el momento a la par que “simplenso”.

Stilearn Metro: Del mismo creador de Syrena, tenemos esta otra plantilla bastante interesante que imita al estilo “metro” de Windows. Quizás le falta un poco de sencillez. stilearning.com/items/preview/stilearn-metro/form-wizard.html

Olso Admin: Una alternativa que se alejan un poco de lo habitual hoy en día, con diseño muy claro y sencillo, quizás con demasiado poco contraste. responsivewebinc.com/premium/olson/olsonadmin/index.html

Ace Admin: Bastante interesante con estilo plano.

Flatty: Para mi otra de las mejores plantillas para administración, me gusta su sencillez, su estilo plano, menú muy accesible a la izquierda y poco ruido visual. www.bublinastudio.com/flattybs3/wizard.html

Interesante plugin javascript para notificaciones compatibles con Twitter Bootstrap

Interesante plugin javascript para notificaciones compatibles con Twitter Bootstrap

http://bootstrap-growl.remabledesigns.com/

http://notifyjs.com/

http://sciactive.github.io/pnotify/

Más antiguosposts

Copyright © 2017 Alejandro Fanjul | Mi Blog Personal

RSS de artículosArriba ↑