{"id":2613,"date":"2013-06-08T17:54:14","date_gmt":"2013-06-08T22:24:14","guid":{"rendered":"https:\/\/skatox.com\/blog\/?p=2613"},"modified":"2023-02-28T10:30:22","modified_gmt":"2023-02-28T15:30:22","slug":"automatiza-tareas-de-desarrollo-web-con-guard","status":"publish","type":"post","link":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/","title":{"rendered":"Automatiza tareas de desarrollo web con Guard"},"content":{"rendered":"\n

Hace tiempo en una charla de Paul Irish<\/a>, v\u00ed un programa llamado Live-reload<\/a> para recargar autom\u00e1ticamente una p\u00e1gina en el navegador cada vez que realicemos un cambio en ella. Pero nunca hab\u00eda podido configurarla en Linux, luego hace unos d\u00edas en una entrevista de Addi Osmani<\/a> vi un comentario que me hizo volver a tratar de instalarla, su comentario fue: \u00abYa en el 2013 nadie deber\u00eda perder tiempo en recargar manualmente el navegador\u00bb. <\/cite><\/p>\n\n\n\n

As\u00ed que me puse instalar el programa y descubr\u00ed Guard<\/a>, una aplicaci\u00f3n hecha en Ruby para chequear las modificaciones realizadas a archivos y realizar acciones en base a ello. Esto permite por ejemplo, que al realizar alg\u00fan cambio en un archivo escrito con SASS o SCSS genere el CSS autom\u00e1ticamente, si modificas un archivo JS de desarrollo genere el archivo final ya comprimido, generar el archivo JS desde CoffeScript, entre otros. De esta manera automatiza gran cantidad de tareas que usualmente har\u00edas manualmente a trav\u00e9s de comandos del Editor\/IDE.<\/p>\n\n\n\n

Instalaci\u00f3n<\/h2>\n\n\n\n

Aunque existen instaladores para MacOS y Windows los desarrolladores prefieren instalarlo a trav\u00e9s de Ruby GEMs,<\/a> el proceso es sencillo y se aplica para todos los sistemas operativos que soporten Ruby, para ello en la consola debes ejecutar los comandos:<\/p>\n\n\n\n

gem install bundle #facilita el proceso\ngem install guard #el programa que estamos comentado\ngem install guard-livereload #extensi\u00f3n para actualizar el navegador\ngem install guard-sass #para pre-procesado de CSS<\/code><\/pre>\n\n\n\n
Configuraci\u00f3n<\/h2>\n\n\n\n
Luego te diriges a la ra\u00edz del proyecto que est\u00e1s elaborando, all\u00ed ejecutas el comando:’<\/p>\n\n\n\n
bundle init<\/code><\/pre>\n\n\n\n
Nota: Si el comando falla es porque no tienes el comando gem<\/strong> en tu variable $PATH<\/em>
Esto crear\u00e1 un archivo llamado Gemfile<\/strong> que contiene toda la informaci\u00f3n de los gems utilizados en el proyecto y las dependencias de lo mismos. Una vez creado con el comando mencionado, lo abres y agregas el siguiente contenido:<\/p>\n\n\n\n
gem 'guard'\ngem 'guard-livereload'\ngem 'guard-sass', :require => false<\/code><\/pre>\n\n\n\n
Luego debes crear un archivo con el nombre Guardfile<\/strong> en la ra\u00edz del proyecto, en \u00e9l se definir\u00e1n las reglas que deben ocurrir para realizar las acciones. El siguiente ejemplo est\u00e1 dise\u00f1ado para ser usado en un proyecto PHP con el framework Yii:<\/strong><\/p>\n\n\n\n
# M\u00f3dulo para que al modificar un archivo SASS genere el CSS ya comprimido\nguard 'sass',\n:input => 'css',\n:output => 'css',\n:style => :compressed\n\n#reglas para la recarga del navegador\nguard 'livereload' do\n\n#actualiza el navegador al ocurrir cambios en las vistas, modelos y controladores.\nwatch(%r{protected\/views\/.+\\.php})\nwatch(%r{protected\/views\/.+\/.+\\.php})\nwatch(%r{protected\/views\/.+\/.+\/.+\\.php})\nwatch(%r{protected\/models\/(.+)\/(.+)\\.php$})\nwatch(%r{protected\/controllers\/(.+)\\.php$})\n\n#Comprime los archivos de Javascript utilizando un script llamado compressJS ubicado en la carpeta js\/\nwatch(%r{js\/.+\\.original\\.js}) {`js\/compressJs`}\n\n#Una vez generado los archivos JS finales (ya comprimidos) recarga el navegador\nwatch(%r{js\/.+\\.js})\n\n#Recarga el navegador cuando se modifica un archivo CSS\nwatch(%r{css\/.+\\.css})\nend\n<\/code><\/pre>\n\n\n\n
La sintaxis es watch(%r{EXPRESION_REGULAR_DE_ARCHIVOS}) {comando a ejecutar}<\/strong>, con esto puedes jugar a detectar cambios en algunos archivos y realizar a trav\u00e9s de una secuencia de comandos, tareas respecto a ese archivo modificado. Tambi\u00e9n noten como por ejemplo al comprimir el archivo JS no se recarga el navegador, sino en otra regla cuando se modifica un archivo JS, es decir, algunas cosas deben hacerse a trav\u00e9s de la definici\u00f3n de varias reglas.<\/p>\n\n\n\n
Uso del programa<\/h2>\n\n\n\n
Para ejecutarlo debes iniciar guard<\/strong> con el comando:<\/p>\n\n\n\n
bundle exec guard<\/code><\/pre>\n\n\n\n
A partir de ahora guard<\/strong> chequear\u00e1 los cambios en los archivos y ejecutar\u00e1 las acciones configuradas. Para refrescar el navegador autom\u00e1ticamente, es necesario instalar LiveReload para Firefox o Chrome <\/a>. Una vez instalada, ve a la pesta\u00f1a donde estas visualizando el proyecto, presionas el bot\u00f3n de LiveReload y deber\u00eda conectarse sin problemas a guard<\/strong>.<\/p>\n\n\n
\n
\"Complemento<\/a>
Bot\u00f3n para conectarse con Guard LiveReload<\/figcaption><\/figure>\n<\/div>\n\n\n
Para probarlo, edita un archivo de vista  y deber\u00eda actualizarse la p\u00e1gina sin problemas. Tambi\u00e9n al editar un archivo SASS (o SCSS) deber\u00eda generar el archivo CSS y a su vez recargar la p\u00e1gina para ver la nueva apariencia, al editar los archivos de Javascript deber\u00edan comprimirse y cualquier otra acci\u00f3n que hayas configurado.<\/p>\n\n\n\n
Ahora depende de ustedes que utilicen estas herramientas todos los d\u00edas, pues mejorar\u00e1n su trabajo al automatizar ciertas tareas y enfocarse en otras mas importantes. Si alguien conoce otra utilidad para Guard, no duden en dejar un comentario.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hace tiempo en una charla de Paul Irish, v\u00ed un programa llamado Live-reload para recargar autom\u00e1ticamente una p\u00e1gina en el navegador cada vez que realicemos…<\/p>\n
Seguir leyendoAutomatiza tareas de desarrollo web con Guard<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[549,716,582],"tags":[864,862,863,866,865],"class_list":["post-2613","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-todo-lo-relacionado-al-desarrollo-de-software","category-planetas-linux","tag-automatizar","tag-desarrollo-web-2","tag-guard","tag-sass","tag-scss","entry"],"yoast_head":"\nAutomatiza tareas de desarrollo web con Guard - El blog de Skatox<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatiza tareas de desarrollo web con Guard - El blog de Skatox\" \/>\n<meta property=\"og:description\" content=\"Hace tiempo en una charla de Paul Irish, v\u00ed un programa llamado Live-reload para recargar autom\u00e1ticamente una p\u00e1gina en el navegador cada vez que realicemos…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Skatox\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-08T22:24:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-28T15:30:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png\" \/>\n<meta name=\"author\" content=\"Miguel Useche\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@skatox\" \/>\n<meta name=\"twitter:site\" content=\"@skatox\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Miguel Useche\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/\"},\"author\":{\"name\":\"Miguel Useche\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\"},\"headline\":\"Automatiza tareas de desarrollo web con Guard\",\"datePublished\":\"2013-06-08T22:24:14+00:00\",\"dateModified\":\"2023-02-28T15:30:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/\"},\"wordCount\":601,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2013\\\/06\\\/LiveReloadAddon.png\",\"keywords\":[\"automatizar\",\"desarrollo web\",\"guard\",\"sass\",\"scss\"],\"articleSection\":[\"Desarrollo web\",\"Desarrollo y Programaci\u00f3n\",\"Planetas\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/\",\"name\":\"Automatiza tareas de desarrollo web con Guard - El blog de Skatox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2013\\\/06\\\/LiveReloadAddon.png\",\"datePublished\":\"2013-06-08T22:24:14+00:00\",\"dateModified\":\"2023-02-28T15:30:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#primaryimage\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2013\\\/06\\\/LiveReloadAddon.png\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2013\\\/06\\\/LiveReloadAddon.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2013\\\/06\\\/08\\\/automatiza-tareas-de-desarrollo-web-con-guard\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatiza tareas de desarrollo web con Guard\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\",\"name\":\"El blog de Skatox\",\"description\":\"Compartiendo mis opiniones inform\u00e1ticas mas all\u00e1 de los 280 caracteres\",\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/skatox.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\",\"name\":\"El blog de Skatox\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2022\\\/03\\\/tux.png\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2022\\\/03\\\/tux.png\",\"width\":218,\"height\":218,\"caption\":\"El blog de Skatox\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ElWeblogdeSkatox\\\/\",\"https:\\\/\\\/x.com\\\/skatox\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/skatox\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/MiguelAngelUsecheCastro\",\"https:\\\/\\\/x.com\\\/skatox\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\",\"name\":\"Miguel Useche\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1776390187\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1776390187\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1776390187\",\"caption\":\"Miguel Useche\"},\"sameAs\":[\"https:\\\/\\\/skatox.com\",\"https:\\\/\\\/x.com\\\/skatox\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Automatiza tareas de desarrollo web con Guard - El blog de Skatox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/","og_locale":"es_ES","og_type":"article","og_title":"Automatiza tareas de desarrollo web con Guard - El blog de Skatox","og_description":"Hace tiempo en una charla de Paul Irish, v\u00ed un programa llamado Live-reload para recargar autom\u00e1ticamente una p\u00e1gina en el navegador cada vez que realicemos…","og_url":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/","og_site_name":"El blog de Skatox","article_publisher":"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","article_published_time":"2013-06-08T22:24:14+00:00","article_modified_time":"2023-02-28T15:30:22+00:00","og_image":[{"url":"https:\/\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png","type":"","width":"","height":""}],"author":"Miguel Useche","twitter_card":"summary_large_image","twitter_creator":"@skatox","twitter_site":"@skatox","twitter_misc":{"Escrito por":"Miguel Useche","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#article","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/"},"author":{"name":"Miguel Useche","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba"},"headline":"Automatiza tareas de desarrollo web con Guard","datePublished":"2013-06-08T22:24:14+00:00","dateModified":"2023-02-28T15:30:22+00:00","mainEntityOfPage":{"@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/"},"wordCount":601,"commentCount":1,"publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"image":{"@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#primaryimage"},"thumbnailUrl":"https:\/\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png","keywords":["automatizar","desarrollo web","guard","sass","scss"],"articleSection":["Desarrollo web","Desarrollo y Programaci\u00f3n","Planetas"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/","url":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/","name":"Automatiza tareas de desarrollo web con Guard - El blog de Skatox","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#primaryimage"},"image":{"@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#primaryimage"},"thumbnailUrl":"https:\/\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png","datePublished":"2013-06-08T22:24:14+00:00","dateModified":"2023-02-28T15:30:22+00:00","breadcrumb":{"@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#primaryimage","url":"https:\/\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png","contentUrl":"https:\/\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png"},{"@type":"BreadcrumbList","@id":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/skatox.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Automatiza tareas de desarrollo web con Guard"}]},{"@type":"WebSite","@id":"https:\/\/skatox.com\/blog\/#website","url":"https:\/\/skatox.com\/blog\/","name":"El blog de Skatox","description":"Compartiendo mis opiniones inform\u00e1ticas mas all\u00e1 de los 280 caracteres","publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/skatox.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/skatox.com\/blog\/#organization","name":"El blog de Skatox","url":"https:\/\/skatox.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/skatox.com\/blog\/images\/2022\/03\/tux.png","contentUrl":"https:\/\/skatox.com\/blog\/images\/2022\/03\/tux.png","width":218,"height":218,"caption":"El blog de Skatox"},"image":{"@id":"https:\/\/skatox.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","https:\/\/x.com\/skatox","https:\/\/www.linkedin.com\/in\/skatox\/","https:\/\/www.youtube.com\/c\/MiguelAngelUsecheCastro","https:\/\/x.com\/skatox\/"]},{"@type":"Person","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba","name":"Miguel Useche","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1776390187","url":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1776390187","contentUrl":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1776390187","caption":"Miguel Useche"},"sameAs":["https:\/\/skatox.com","https:\/\/x.com\/skatox"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3643,"url":"https:\/\/skatox.com\/blog\/2017\/12\/27\/que-es-el-desarrollo-web\/","url_meta":{"origin":2613,"position":0},"title":"\u00bfQu\u00e9 es el desarrollo web?","author":"Miguel Useche","date":"27 de diciembre de 2017","format":false,"excerpt":"Desde hace unos a\u00f1os escuchamos bastante el t\u00e9rmino de desarrollo web y probablemente se pregunten o han escuchado: \u00bfQu\u00e9 es eso? \u00bfNo es lo mismo que programaci\u00f3n? Simplificando, desarrollo web consiste en crear soluciones tecnol\u00f3gicas que se ejecutar\u00e1n dentro de un navegador (como Firefox\/Chrome\/Edge o Safari). Por este motivo es\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4290,"url":"https:\/\/skatox.com\/blog\/2020\/11\/23\/mi-charla-sobre-las-devtools-en-el-wordcamp-espana\/","url_meta":{"origin":2613,"position":1},"title":"Mi charla sobre las DevTools en el WordCamp Espa\u00f1a","author":"Miguel Useche","date":"23 de noviembre de 2020","format":false,"excerpt":"El pasado mayo tuve la oportunidad de participar en el WordCamp Espa\u00f1a. Esta WordCamp Espa\u00f1a fue la primera en espa\u00f1ol en realizarse de forma remota debido al COVID-19. Debido al cambio de formato no sab\u00eda que esperar, pero fue una grata experiencia y me encant\u00f3 el desarrollo del evento. En\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/tYIVac2udBI\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3973,"url":"https:\/\/skatox.com\/blog\/2019\/01\/07\/el-navegador-es-tu-mejor-amigo-para-el-desarrollo-con-angular\/","url_meta":{"origin":2613,"position":2},"title":"El navegador es tu mejor amigo para el desarrollo con Angular","author":"Miguel Useche","date":"7 de enero de 2019","format":false,"excerpt":"Hace unos meses tuve la oportunidad de participar en el NgColombia con la ponencia El navegador es tu mejor amigo para el desarrollo con Angular. Aunque en realidad el titulo real es Your browser is your best friend for Angular development. Pues la dict\u00e9 en ingl\u00e9s, de hecho, fue mi\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/EV-GV8h_bwU\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3181,"url":"https:\/\/skatox.com\/blog\/2015\/08\/31\/cloud-9-entorno-de-desarrollo-en-la-nube\/","url_meta":{"origin":2613,"position":3},"title":"Cloud 9 un entorno de desarrollo en la nube","author":"Miguel Useche","date":"31 de agosto de 2015","format":false,"excerpt":"Hace unas semanas debido a una fuerte gripe, me toc\u00f3 trabajar en casa para un trabajo que deb\u00eda hacer una oficina donde ten\u00eda mi computadora con todo el entorno de desarrollo configurado. Sin embargo en la organizaci\u00f3n ten\u00edan configurado el servicio Cloud9 para poder trabajar remotamente. Cloud9 es un completo\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"Entorno de desarrollo de Cloud9","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/08\/Cloud9-600x277.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/08\/Cloud9-600x277.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/08\/Cloud9-600x277.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4362,"url":"https:\/\/skatox.com\/blog\/2021\/08\/07\/estudiar-desarrollo-de-aplicaciones-web\/","url_meta":{"origin":2613,"position":4},"title":"Estudiar desarrollo de aplicaciones web","author":"Miguel Useche","date":"7 de agosto de 2021","format":false,"excerpt":"El desarrollo de aplicaciones web consiste en crear programas y software que son ejecutados dentro de un navegador web como Firefox, Chrome o Edge. Estos programas se instalan en un servidor que sirve p\u00e1ginas web dependiendo de las acciones del usuario. Las tecnolog\u00edas utilizadas para hacer estas aplicaciones son: HTML,\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2021\/08\/info_small.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5318,"url":"https:\/\/skatox.com\/blog\/2025\/11\/28\/como-corregi-una-vulnerabilidad-en-mi-plugin-js-archive-list-tras-un-reporte-de-wordfence\/","url_meta":{"origin":2613,"position":5},"title":"C\u00f3mo correg\u00ed una vulnerabilidad en mi plugin JS Archive List tras un reporte de WordFence","author":"Miguel Useche","date":"28 de noviembre de 2025","format":false,"excerpt":"JS Archive List es un plugin que cre\u00e9 hace m\u00e1s de una d\u00e9cada para mostrar archivos de entradas de WordPress en un formato m\u00e1s limpio y din\u00e1mico usando JavaScript (inicialmente era con JQuery). Pues hace unas semanas recib\u00ed un correo de un grupo de hackers y del equipo de Wordfence\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif","width":350,"height":200,"srcset":"https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 1x, https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 1.5x, https:\/\/skatox.com\/blog\/images\/2025\/11\/image-1.avif 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/2613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/comments?post=2613"}],"version-history":[{"count":0,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/2613\/revisions"}],"wp:attachment":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/media?parent=2613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/categories?post=2613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/tags?post=2613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}