{"id":185,"date":"2015-10-30T16:07:22","date_gmt":"2015-10-30T21:07:22","guid":{"rendered":"https:\/\/wjharil.com\/blog\/?p=185"},"modified":"2015-10-30T16:11:09","modified_gmt":"2015-10-30T21:11:09","slug":"7-herramientas-desarrolladores-web","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/7-herramientas-desarrolladores-web\/","title":{"rendered":"7 Herramientas online para desarrolladores web"},"content":{"rendered":"

Los que nos dedicamos al desarrollo web<\/strong>, hacemos uso de herramientas de escritorio<\/em> para escribir el c\u00f3digo. Hay claros ejemplos como Sublime Text<\/strong><\/a>, Visual Studio Code, Notepad++, Brackets y un sin fin m\u00e1s (block de notas tambi\u00e9n \ud83d\ude1b ).<\/p>\n

Pero, las herramientas online<\/strong> \u00a1no se quedan atr\u00e1s!. Est\u00e1n \u00absacando pechito\u00bb por lo que, a mi parecer, es el futuro de las aplicaciones: lo online<\/em>. Te comentar\u00e9 sobre 7 herramientas que se encuentran en la nube<\/strong> y que nos pueden ofrecer mucha ayuda mientras estemos desarrollando algun proyecto\/aplicaci\u00f3n web<\/strong>.<\/p>\n

Herramientas en la nube para desarrolladores web<\/h2>\n

Sin m\u00e1s vueltitas que darle, les dejo la lista \ud83d\ude00<\/p>\n

JSBeautifier<\/h3>\n

\"JS-Beautifier_1\"<\/a><\/p>\n

\u00c9sta herramienta la uso a diario, es un gran alivio de cabeza ya que nos permite estructurar adecuadamente un c\u00f3digo javascript<\/strong> (css tambi\u00e9n) que ha sido ofuscado para entenderlo mejor. Sin duda, el primero de mi peque\u00f1a lista.<\/p>\n

Visitar JsBeautifier<\/a><\/p>\n

CodeBeautifier<\/h3>\n

Por otro lado, tambi\u00e9n tenemos a CodeBeautifier<\/strong> que nos ayuda a optmizar y comprimir nuestros archivos CSS<\/strong> a la hora de terminar nuestro proyecto y ganar puntos en cuanto a SEO.
\nVisitar codebeautifier<\/a><\/p>\n

Comprimir JavaScript<\/h3>\n

Hace poco, habl\u00e1bamos sobre comprimir (ofuscar) el c\u00f3digo html<\/strong><\/a>. Ahora, gracias a \u00e9sta herramienta desarrollada por DaftLogic, podemos comprimir el c\u00f3digo javascript para optimizar<\/strong>. Al igual que CodeBeautifier<\/em>, nos ayuda a ganar unos puntos en cuanto a seo.<\/p>\n

Visitar<\/a><\/p>\n

ShoeLace para estructurar en Bootstrap<\/h3>\n

\"shoelace\"<\/a><\/p>\n

Muchos de los desarrolladores\/maquetadores web usamos framework frontend<\/strong> para agilizar el proceso de estructura de una web ya que nos ayuda a tener una versi\u00f3n para cada dispositivo. En este caso, tenemos a ShoeLace<\/strong>: una interesante herramienta que nos permite estructurar nuestro c\u00f3digo BootStrap sin tener que escribirlo<\/strong>. Con un par de clicks y \u00abdrags\u00bb, puede que tengas el 40% de tu plantilla hecha! (en lo personal, es un gran aliado a la hora de maquetar).<\/p>\n

Visitar Shoelace<\/a><\/p>\n

Compressor.io para optimizar im\u00e1genes<\/h3>\n

\"compresor-de-imagenes\"<\/a><\/p>\n

La carga de imagenes de un sitio web, es demasiado importante por el motivo de que afecta directamente al SEO<\/strong> (s\u00ed, una web con muchas im\u00e1genes y que est\u00e9n sin optimizar<\/strong>, es un dolor de cabeza). Para ello, tenemos a Compressor.io<\/strong> que nos permite optimizar cada imagen sin perder calidad de las mismas.<\/p>\n

Visitar Compressor.io<\/a><\/p>\n

Flatuicolors<\/h3>\n

En s\u00ed no s\u00e9 si considerarla como herramienta o como un snnipet<\/del>, ya que nos ofrece una paleta de los colores Flat UI<\/strong> (experiencia de usuario) en el formato de c\u00f3digo que necesitemos. Ojo, que los colores son agradables (por algo son UI).<\/p>\n

Visitar Flatuicolors<\/a><\/p>\n

JsFiddle<\/h3>\n

\"jsfiddle\"<\/a><\/p>\n

Oh!, llegamos a \u00e9ste hermosa herramienta online. S\u00ed, la amo por el hecho de que nos facilita mucho probar c\u00f3digos javascript directamente en su plataforma (online)<\/strong> y, lo mejor, compartir para que otros desarrolladores \u00abmetan mano\u00bb y te ayuden a obtener una ayuda. Se ve muy usado en la comunidad de StackOverflow<\/strong> (un poquito m\u00e1s abajo, te comento que es por si no lo sabes).<\/p>\n

Visitar<\/a><\/p>\n

La comunidad StackOverflow<\/h3>\n

Tranquilo viejo, ya s\u00e9 que no es una herramienta<\/em>. \u00c9sta plataforma, est\u00e1 conformada por muchos pero muchos desarrolladores que intercambian dudas y ofrecen respuestas. Te lo explico f\u00e1cil: \u00bftu c\u00f3digo no funcion\u00f3? muchas personas m\u00e1s quiz\u00e1 han pasado por el mismo problema que te pasa y para ello, puedes buscar la soluci\u00f3n en StackOverflow<\/strong>! Sin duda, una comunidad que te ser\u00e1 de gran ayuda en tus proyectos. Resalto, que todo est\u00e1 en ingl\u00e9s, pero tenemos al traductor de Google :).<\/p>\n

Esta ha sido mi lista (y un plus) sobre herramientas online para desarrollo web<\/strong>. Si conoces alguna (ojo, que tambi\u00e9n est\u00e1n los CDN de jQuery<\/strong>, Bootstrap<\/strong> y entre otros frameworks frontend<\/strong>) d\u00e9jame tu comentario y as\u00ed compartes con otros amantes de la web :D.<\/p>\n","protected":false},"excerpt":{"rendered":"

Los que nos dedicamos al desarrollo web, hacemos uso de herramientas de escritorio para escribir
Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":["bootstrap","herramientas"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2015\/10\/desarrollo-web.jpg","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/185"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":3,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions\/193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}