Herramienta para hackear css

Las mejores extensiones para Chrome si eres diseñador/desarrollador web.

Las extensiones de Chrome y de cualquier otro navegador son plugins que extienden la funcionalidad del navegador de alguna manera. Están basados en tecnología HTML y javascript y aprovechan funcionalidades y variables que recogen los exploradores como puede ser el propio código de la página, las imágenes o el registro de los rastreadores SEO para luego hacer cosas guays con ellos a través de una interfaz personalizada que no tiene que ver con la del navegador. En los tiempos del Explorer, el Messenger y Napster nos volvieron locos instalándonos innecesarias barras de herramientas con iconos y cosas que se movían sin parar que convertían nuestro explorador en una mezcla de burdel y circo.

Ahora las cosas han mejorado muchísimo y por eso desde Webuzz queremos dejaros un recopilatorio de las que creemos son las mejores, si lo tuyo es el diseño web, el HTML y el CSS.

Image Downloader:

 

La mejor manera de descargar en masa todas las imágenes de un determinado website. Incluso puedes acceder a esas imágenes que están metidas a través de CSS o Javascript (excepto algunos casos como iframes de Facebook). Si no encuentras la foto que te gusta, quieres descargarte todos los mapbits de un website (aunque sea las 5000 fotos del timeline de Flickr) o no encuentras ese background metido en CSS que solo Dios sabe donde queda, esta herramienta te va a ayudar mucho.
 agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_imagenes-jpg

Window Resizer:

 

Básicamente, Window Resizer hace un test de como se comporta un website en todos los formatos de pantalla disponibles, sirve para inspeccionar páginas web responsive o ver qué puede fallar en cada uno de los tantos tamaños que hay que tener en cuenta hoy en día para terminar un desarrollo. Normalmente el inspector de código de Google Chrome tiene una funcionalidad similar, pero tiene limitados los formatos automáticos de tamaños de pantalla, desde esta app puedes acceder fácilmente o customizar cualquier tamaño de pantalla que haya en el mercado sin ningún tipo de restricción.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_resolucion_pantalla

Live Page:

¿Estás absolutamente obsesionado por tener la última versión actualizada de cualquier website sin tener que borrar caché una y otra vez? Entonces Live Page te va a resultar muy útil, si estás trabajando desde local es incluso aún más útil, ya que los cambios que realices se actualizarán al instante y en directo sin que tengas que refrescar ni tocar absolutamente nada ya que este plugin una vez lo activas se encarga de ir refrescando caché solito a cada instante.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_live_cache

Snappy Snippet:

Con Snappy Snippet puedes hacer clic en cualquier elemento de un website y automáticamente absorber su código CSS y HTML para luego escupirlo en CodePen, jsFiddle or JS Bin con otro clic y utilizarlo para tus propósitos. Snappy Snippet no solo roba el código, sino que lo limpia, elimina atributos innecesarios del objeto clicado, repara y reformatea el CSS. Trabaja también con pseudo elementos css y además tiene una interfaz maravillosa.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_css_html

Fontface Ninja:

Fontace Ninja es una aplicación que te permite reconocer cualquier tipografía de un website automáticamente, pero no acaba aquí, además te permite descargarla rápidamente en tu desktop. Los desarrolladores de este plugin insisten en que no debes abusar de este servicio, por eso en el caso de ser una fuente comercial siempre incluyen la opción de compra.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_font_face_ninja

CSS-Shack:

 

Css-Shack es la mejor herramienta para hackear CSS de cualquier website y modificarlo a tu gusto para tus propósitos, a través de una interfaz extremadamente sencilla y funcional (incluso si no tienes ni idea de código). Te permite editar el css original de una página, alterar animaciones si es que hay y modificarlo en vivo en la propia página. Una vez terminada esta edición te lo descargas y lo utilizas donde quieras.
agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_font_css_hack

Google Art project:

 

Está bien, Google Art Project no tiene nada que ver con desarrollo. Cada vez que abras un tab en Chrome aparecerá una obra de arte (moderno, contemporáneo y antiguo), nombre del cuadro y autor, van cambiando día a día y además quedas muy bien frente a terceros que preguntarán el origen de la obra y por qué eres una persona tan culta.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_font_google_art_project

iMacros:

 

Muchas veces cuando estás haciendo un website tienes que realizar una acción concreta una y otra vez en el servidor para hacer tests y seguir haciendo modificaciones en el código, por ejemplo ajustar una animación tras hacer click en una sección de la página después de haber hecho un montón de scroll y normalmente acabas harto de repetirlo una y otra vez. Con iMacros puedes guardar la acción como la guardarías en Photoshop y repetirla simplemente haciendo click en la interfaz de la extensión. Además de eso puedes meter passwords si tienes esta acción guardada en iMacros, rellenar formularios automáticamente y casi cualquier cosa que se te ocurra que puedas repetir en el día a día en un explorador.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_font_google_imacros

Check my Links

Check my Links coloca un website entero en texto plano sin ningún tipo de hoja de estilo o imágenes y va revisando link por link viendo cuál esta caído y cuál no. Son fácilmente identificables porque aparecen en rojo y en verde según su disponibilidad y extremadamente útil a la hora de encontrar la posición de un link roto a simple vista y ver cuál es el estado de hipervínculos de cualquier página.

 

agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_font_google_check_my_links
Más sencillo imposible, Full Scree Capture te genera un .png con el website entero, así no tienes que ir empalmando trozos de captura de pantalla. Ideal para hacer mockups o para subir a tu portfolio websites completos que hayas hecho diseñando tan solo un par de pantallas de prueba.
agencia_publicidad_digital_madrid_miami_bogota_extension_chrome_font_google_screen_capture
Hala, a descargarlos y darles caña!
By: Jose Bao @baojose.

Si te ha gustado esto, te gustará:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *