{"id":3116,"date":"2015-02-09T08:30:31","date_gmt":"2015-02-09T13:00:31","guid":{"rendered":"https:\/\/skatox.com\/blog\/?p=3116"},"modified":"2016-04-24T09:33:01","modified_gmt":"2016-04-24T14:03:01","slug":"optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp","status":"publish","type":"post","link":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/","title":{"rendered":"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp"},"content":{"rendered":"

Uno de los retos de los desarrolladores web al momento de crear p\u00e1ginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tama\u00f1o sea lo menor posible para que la carga sea r\u00e1pida. Pues un sitio web r\u00e1pido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena p\u00e1gina y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro c\u00f3digo del lado del cliente,\u00a0 optimizar las im\u00e1genes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un s\u00f3lo archivo (para cada tecnolog\u00eda) para reducir el n\u00famero de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.<\/p>\n

Gulp<\/h3>\n

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script<\/em> que automatice cada etapa, pero hoy en d\u00eda existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este art\u00edculo hablar\u00e9 sobre Gulp<\/a>, una herramienta para automatizar tareas que hace lo mismo que GruntJS<\/a> pero es mas f\u00e1cil de usar y entender.<\/p>\n

\u00bfC\u00f3mo empezar?<\/h4>\n

Para instalarlo, lo hacemos a trav\u00e9s Node Package Manager<\/em> de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:
\nnpm install -g gulp<\/code><\/p>\n

Luego en la ra\u00edz del proyecto creamos un archivo gulpfile.js<\/strong> donde especificaremos las tareas a realizar:
\n
\nvar gulp = require('gulp');
\ngulp.task('default', function() {
\n});
\n<\/code><\/p>\n

A\u00f1adir una tarea<\/h4>\n

Una tarea es un conjunto de procesos, por ejemplo, optimizar el c\u00f3digo JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librer\u00edas de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp<\/a> (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.<\/p>\n

Gulp posee una importante caracter\u00edstica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutar\u00e1 muy r\u00e1pido.<\/p>\n

Para verlo en acci\u00f3n, haremos una tarea para reducir el tama\u00f1o de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify<\/em> con NPM:
\nnpm install --save-dev gulp-uglify
\n<\/code><\/p>\n

Luego se deben hacer dos cosas en el archivo gulpfile.js<\/strong>, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la funci\u00f3n que se encargar\u00e1 de (en este caso) reducir el tama\u00f1o del c\u00f3digo javascript. Para ello debemos hacer lo siguiente:<\/p>\n


\nvar uglify = require('gulp-uglify');<\/code>
\n
\ngulp.task('comprimir', function() {
\ngulp.src('lib\/*.js')
\n.pipe(uglify())
\n.pipe(gulp.dest('dist'))
\n});
\n<\/code><\/p>\n

Como podr\u00e1s observar, hemos creado una tarea llamada comprimir<\/strong> , que recibe un conjunto de archivos (los archivos JS ubicados dentro de \/lib), crea una tuber\u00eda y ejecuta uglify que se encargar\u00e1 de comprimir cada uno de los archivos, finalmente entrega el resultado a la tuber\u00eda que se enviar\u00e1 a la ruta de destino (esta se puede definir a donde uno desee). As\u00ed sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versi\u00f3n para depurar (cuya fuente no este comprimida), una versi\u00f3n para producci\u00f3n, una versi\u00f3n de producci\u00f3n para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:<\/p>\n

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);<\/code><\/p>\n

Ejecutar las tareas<\/h4>\n

Finalmente puedes ejecutar el comando gulp<\/strong> en la ra\u00edz de tu proyecto y empezar\u00e1 a realizar todas las tareas de forma autom\u00e1tica. En caso de que quieras ejecutar solo una tarea, puedes pasar por par\u00e1metro el nombre de la tarea:<\/p>\n

gulp produccion<\/code><\/p>\n

Con esto generas la versi\u00f3n de producci\u00f3n, o\u00a0 por ejemplo, si tienes una tarea llamada less<\/strong> para generar los archivos CSS desde LESS, simplemente ejecuta:
\ngulp less<\/code><\/p>\n

Tareas recomendadas<\/h4>\n

Para optimizar un sitio web, generalmente utilizo imagemin<\/a>, jshint<\/a>, clean-css<\/a>, notify, imagemin-pngquant<\/a>, uglify<\/a>, usemin<\/a>. Con estas puedo comprimir im\u00e1genes, mejorar el c\u00f3digo javascript, concatenar archivos, reducir el tama\u00f1o, entre otros. Aunque te recomiendo leer un art\u00edculo de Addy Osmani<\/a> sobre optimizaci\u00f3n de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.<\/p>\n

Finalmente, como te dar\u00e1s cuenta con Gulp puedes crear sitios web mas \u00f3ptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp<\/a> y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.<\/p>\n","protected":false},"excerpt":{"rendered":"

Uno de los retos de los desarrolladores web al momento de crear p\u00e1ginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente…<\/p>\n

Seguir leyendoOptimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_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":"Optimiza el #HTML, #CSS, #JS e im\u00e1genes de tu sitio web con Gulp","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},"jetpack_post_was_ever_published":false},"categories":[549,716,892,582],"tags":[915,914,222,916,277],"class_list":["post-3116","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-todo-lo-relacionado-al-desarrollo-de-software","category-javascript-todo-lo-relacionado-al-desarrollo-de-software","category-planetas-linux","tag-grunt","tag-gulp","tag-optimizacion-web","tag-tareas","tag-web","entry"],"yoast_head":"\nOptimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp - 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\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp - El blog de Skatox\" \/>\n<meta property=\"og:description\" content=\"Uno de los retos de los desarrolladores web al momento de crear p\u00e1ginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/\" \/>\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=\"2015-02-09T13:00:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-24T14:03:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/skatox.com\/blog\/images\/2015\/12\/skatux.png\" \/>\n\t<meta property=\"og:image:width\" content=\"625\" \/>\n\t<meta property=\"og:image:height\" content=\"603\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/\"},\"author\":{\"name\":\"Miguel Useche\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\"},\"headline\":\"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp\",\"datePublished\":\"2015-02-09T13:00:31+00:00\",\"dateModified\":\"2016-04-24T14:03:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/\"},\"wordCount\":863,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"keywords\":[\"grunt\",\"gulp\",\"optimizacion web\",\"tareas\",\"web\"],\"articleSection\":[\"Desarrollo web\",\"Desarrollo y Programaci\u00f3n\",\"Javascript\",\"Planetas\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/\",\"name\":\"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp - El blog de Skatox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\"},\"datePublished\":\"2015-02-09T13:00:31+00:00\",\"dateModified\":\"2016-04-24T14:03:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2015\\\/02\\\/09\\\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp\"}]},{\"@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=1780019652\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1780019652\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1780019652\",\"caption\":\"Miguel Useche\"},\"sameAs\":[\"https:\\\/\\\/skatox.com\",\"https:\\\/\\\/x.com\\\/skatox\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp - 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\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/","og_locale":"es_ES","og_type":"article","og_title":"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp - El blog de Skatox","og_description":"Uno de los retos de los desarrolladores web al momento de crear p\u00e1ginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente…","og_url":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/","og_site_name":"El blog de Skatox","article_publisher":"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","article_published_time":"2015-02-09T13:00:31+00:00","article_modified_time":"2016-04-24T14:03:01+00:00","og_image":[{"width":625,"height":603,"url":"https:\/\/skatox.com\/blog\/images\/2015\/12\/skatux.png","type":"image\/png"}],"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\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/#article","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/"},"author":{"name":"Miguel Useche","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba"},"headline":"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp","datePublished":"2015-02-09T13:00:31+00:00","dateModified":"2016-04-24T14:03:01+00:00","mainEntityOfPage":{"@id":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/"},"wordCount":863,"commentCount":0,"publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"keywords":["grunt","gulp","optimizacion web","tareas","web"],"articleSection":["Desarrollo web","Desarrollo y Programaci\u00f3n","Javascript","Planetas"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/","url":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/","name":"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp - El blog de Skatox","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/#website"},"datePublished":"2015-02-09T13:00:31+00:00","dateModified":"2016-04-24T14:03:01+00:00","breadcrumb":{"@id":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/skatox.com\/blog\/2015\/02\/09\/optimiza-el-html-css-js-imagenes-de-tu-sitio-web-con-gulp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/skatox.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimiza el HTML, CSS, JS e im\u00e1genes de tu sitio web con Gulp"}]},{"@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=1780019652","url":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1780019652","contentUrl":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1780019652","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":2299,"url":"https:\/\/skatox.com\/blog\/2012\/04\/23\/html5-%e2%98%85-boilerplate-una-plantilla-para-crear-nuestras-paginas\/","url_meta":{"origin":3116,"position":0},"title":"HTML5 \u2605 Boilerplate una plantilla para crear nuestras p\u00e1ginas","author":"Miguel Useche","date":"23 de abril de 2012","format":false,"excerpt":"Esta tecnolog\u00eda la descubr\u00ed leyendo el blog de Paul Irish, al principio no la entend\u00ed y pensaba que era un framework para desarrollar p\u00e1ginas web pero luego de ver varios tutoriales comprend\u00ed que realmente es una plantilla en HTML5 que incluye (en mi opini\u00f3n) las mejores herramientas de detecci\u00f3n de\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\/WkLO-q2wC80\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1928,"url":"https:\/\/skatox.com\/blog\/2010\/05\/27\/mis-extensiones-recomendadas-desarrollo-web-firefox\/","url_meta":{"origin":3116,"position":1},"title":"Extensiones de Firefox recomendadas para el desarrollo web","author":"Miguel Useche","date":"27 de mayo de 2010","format":false,"excerpt":"Soy usuario de Firefox desde sus inicios y cuando empec\u00e9 a trabajar como desarrollador web en Caniatech, descubr\u00ed una gran cantidad de extensiones (la mayor\u00eda gracias a su lista de complementos favoritos) que permiten transformar este navegador en una maravillosa herramienta indispensable para cuando se est\u00e1 creando p\u00e1ginas\/sistemas web (si\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\/2010\/05\/Firebug-500x372.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2613,"url":"https:\/\/skatox.com\/blog\/2013\/06\/08\/automatiza-tareas-de-desarrollo-web-con-guard\/","url_meta":{"origin":3116,"position":2},"title":"Automatiza tareas de desarrollo web con Guard","author":"Miguel Useche","date":"8 de junio de 2013","format":false,"excerpt":"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 un cambio en ella. Pero nunca hab\u00eda podido configurarla en Linux, luego hace unos d\u00edas en una entrevista de Addi Osmani vi un comentario que\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":"Complemento de LiveReload","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2013\/06\/LiveReloadAddon.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3643,"url":"https:\/\/skatox.com\/blog\/2017\/12\/27\/que-es-el-desarrollo-web\/","url_meta":{"origin":3116,"position":3},"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":3328,"url":"https:\/\/skatox.com\/blog\/2016\/01\/25\/pruebas-visualizacion-una-pagina-desde-distintos-dispositivos\/","url_meta":{"origin":3116,"position":4},"title":"Pruebas de visualizaci\u00f3n de una p\u00e1gina desde distintos dispositivos","author":"Miguel Useche","date":"25 de enero de 2016","format":false,"excerpt":"Uno de los mayores problemas para los desarrolladores web es la diferente interpretaci\u00f3n de los est\u00e1ndares web por parte de los navegadores, ocasionando que un sitio web se vea de forma distinta en diferentes navegadores. Ademas, con el surgimiento de dispositivos m\u00f3viles en los \u00faltimos a\u00f1os,\u00a0 ahora tambi\u00e9n se deben\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\/PoVMaD6B3d8\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3304,"url":"https:\/\/skatox.com\/blog\/2016\/01\/11\/experiencia-2do-qr-da\/","url_meta":{"origin":3116,"position":5},"title":"Mi experiencia en el 2do QR-DA","author":"Miguel Useche","date":"11 de enero de 2016","format":false,"excerpt":"El pasado 28 de noviembre, se realiz\u00f3 la segunda edici\u00f3n de QR-DA en la ciudad de Palo Gordo, T\u00e1chira. Este evento consiste en un hackaton o una reuni\u00f3n de inform\u00e1ticos, para realizar un aplicativo de labor social, liberarlo y que sea utilizado por muchas personas. 2da Edici\u00f3n La segunda edici\u00f3n\u2026","rel":"","context":"En \u00abEventos Inform\u00e1ticos\u00bb","block_context":{"text":"Eventos Inform\u00e1ticos","link":"https:\/\/skatox.com\/blog\/category\/actividades-locales\/"},"img":{"alt_text":"Fase de planificaci\u00f3n","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/12\/IMG_20151128_121200617_HDR-150x150.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/12\/IMG_20151128_121200617_HDR-150x150.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/12\/IMG_20151128_121200617_HDR-150x150.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/12\/IMG_20151128_121200617_HDR-150x150.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2015\/12\/IMG_20151128_121200617_HDR-150x150.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/3116","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=3116"}],"version-history":[{"count":0,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/3116\/revisions"}],"wp:attachment":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/media?parent=3116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/categories?post=3116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/tags?post=3116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}