Desarrollo Web<\/title>\r\n <style>\r\n h4 {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n #filter-container {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n select {\r\n padding: 8px 12px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n min-width: 200px;\r\n }\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 10px;\r\n }\r\n .card {\r\n background: white;\r\n max-width: 400px;\r\n max-height: 400px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0px;\r\n transition: all 0.2s ease-in-out;\r\n }\r\n .card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n .card img {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n }\r\n .card-content {\r\n padding: 15px;\r\n }\r\n .card h5 {\r\n margin: 0 0 10px;\r\n }\r\n .card p {\r\n color: #555;\r\n font-size: 0.95em;\r\n }\r\n .card a {\r\n margin-top: auto;\r\n color: #0073aa;\r\n text-decoration: none;\r\n font-weight: bold;\r\n }\r\n .card a:hover {\r\n text-decoration: underline;\r\n }\r\n @media (max-width: 600px) {\r\n #filter-container {\r\n margin-bottom: 20px;\r\n }\r\n select {\r\n width: 100%;\r\n max-width: 100%;\r\n font-size: 18px;\r\n padding: 10px;\r\n background-color: white;\r\n color: #3d3d3d;\r\n }\r\n .grid {\r\n grid-template-columns: 1fr !important;\r\n gap: 15px;\r\n }\r\n .card img {\r\n height: auto;\r\n }\r\n .card-content {\r\n padding: 10px;\r\n }\r\n .card p {\r\n font-size: 0.9em;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <h4>Nuestros Websites \ud83d\ude80<\/h4>\r\n\r\n <div id=\"filter-container\">\r\n <select id=\"tagFilter\">\r\n <option value=\"all\">Todos los rubros<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div id=\"websites\" class=\"grid\"><\/div>\r\n\r\n <script>\r\n const baseURL = 'https:\/\/codewise.com.ar';\r\n let allPosts = [];\r\n\r\n const select = document.getElementById('tagFilter');\r\n\r\n function renderPosts(posts) {\r\n const container = document.getElementById('websites');\r\n container.innerHTML = '';\r\n\r\n if (posts.length === 0) {\r\n container.innerHTML = '<p>No hay proyectos para esta etiqueta.<\/p>';\r\n return;\r\n }\r\n\r\n posts.forEach(post => {\r\n const title = post.title.rendered;\r\n const excerpt = post.excerpt.rendered.replace(\/<[^>]+>\/g, '');\r\n const siteUrl = post.url_sitio || post.link;\r\n const image = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/via.placeholder.com\/300x180?text=Sin+imagen';\r\n\r\n const card = document.createElement('div');\r\n card.className = 'card';\r\n card.innerHTML = `\r\n <img decoding=\"async\" src=\"${image}\" alt=\"${title}\">\r\n <div class=\"card-content\">\r\n <h5>${title}<\/h5>\r\n <p>${excerpt}<\/p>\r\n <a href=\"${siteUrl}\" target=\"_blank\" rel=\"noopener\">Ver proyecto<\/a>\r\n <\/div>\r\n `;\r\n container.appendChild(card);\r\n });\r\n }\r\n\r\n function filterPostsByTag(tagId) {\r\n if (tagId === 'all') {\r\n renderPosts(allPosts);\r\n } else {\r\n const filtered = allPosts.filter(post => post.tags.includes(parseInt(tagId)));\r\n renderPosts(filtered);\r\n }\r\n }\r\n\r\n select.addEventListener('change', () => {\r\n filterPostsByTag(select.value);\r\n });\r\n\r\n \/\/ Obtener categor\u00eda \"desarrollo-web\"\r\n fetch(`${baseURL}\/wp-json\/wp\/v2\/categories?slug=desarrollo-web`)\r\n .then(res => res.json())\r\n .then(categories => {\r\n if (categories.length === 0) {\r\n document.getElementById('websites').innerHTML = '<p>No se encontr\u00f3 la categor\u00eda \"Desarrollo Web\".<\/p>';\r\n return;\r\n }\r\n\r\n const categoryId = categories[0].id;\r\n\r\n fetch(`${baseURL}\/wp-json\/wp\/v2\/posts?categories=${categoryId}&_embed&per_page=100`)\r\n .then(res => res.json())\r\n .then(posts => {\r\n \/\/ Ordenar por fecha: m\u00e1s recientes primero\r\n allPosts = posts.sort((a, b) => new Date(b.date) - new Date(a.date));\r\n\r\n const tagIds = [...new Set(posts.flatMap(p => p.tags))].filter(id => id);\r\n\r\n if (tagIds.length === 0) {\r\n renderPosts(allPosts);\r\n return;\r\n }\r\n\r\n fetch(`${baseURL}\/wp-json\/wp\/v2\/tags?include=${tagIds.join(',')}`)\r\n .then(res => res.json())\r\n .then(tags => {\r\n tags.forEach(tag => {\r\n const option = document.createElement('option');\r\n option.value = tag.id;\r\n option.textContent = tag.name;\r\n select.appendChild(option);\r\n });\r\n\r\n renderPosts(allPosts);\r\n });\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Desarrollo Web Nuestros Websites \ud83d\ude80 Todos los rubros<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-932","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":145,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/932\/revisions"}],"predecessor-version":[{"id":1254,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/932\/revisions\/1254"}],"wp:attachment":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Desarrollo Web<\/title>\r\n <style>\r\n h4 {\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n #filter-container {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n select {\r\n padding: 8px 12px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n border: 1px solid #ccc;\r\n cursor: pointer;\r\n min-width: 200px;\r\n }\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 10px;\r\n }\r\n .card {\r\n background: white;\r\n max-width: 400px;\r\n max-height: 400px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0px;\r\n transition: all 0.2s ease-in-out;\r\n }\r\n .card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\r\n }\r\n .card img {\r\n width: 100%;\r\n height: auto;\r\n object-fit: contain;\r\n }\r\n .card-content {\r\n padding: 15px;\r\n }\r\n .card h5 {\r\n margin: 0 0 10px;\r\n }\r\n .card p {\r\n color: #555;\r\n font-size: 0.95em;\r\n }\r\n .card a {\r\n margin-top: auto;\r\n color: #0073aa;\r\n text-decoration: none;\r\n font-weight: bold;\r\n }\r\n .card a:hover {\r\n text-decoration: underline;\r\n }\r\n @media (max-width: 600px) {\r\n #filter-container {\r\n margin-bottom: 20px;\r\n }\r\n select {\r\n width: 100%;\r\n max-width: 100%;\r\n font-size: 18px;\r\n padding: 10px;\r\n background-color: white;\r\n color: #3d3d3d;\r\n }\r\n .grid {\r\n grid-template-columns: 1fr !important;\r\n gap: 15px;\r\n }\r\n .card img {\r\n height: auto;\r\n }\r\n .card-content {\r\n padding: 10px;\r\n }\r\n .card p {\r\n font-size: 0.9em;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <h4>Nuestros Websites \ud83d\ude80<\/h4>\r\n\r\n <div id=\"filter-container\">\r\n <select id=\"tagFilter\">\r\n <option value=\"all\">Todos los rubros<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div id=\"websites\" class=\"grid\"><\/div>\r\n\r\n <script>\r\n const baseURL = 'https:\/\/codewise.com.ar';\r\n let allPosts = [];\r\n\r\n const select = document.getElementById('tagFilter');\r\n\r\n function renderPosts(posts) {\r\n const container = document.getElementById('websites');\r\n container.innerHTML = '';\r\n\r\n if (posts.length === 0) {\r\n container.innerHTML = '<p>No hay proyectos para esta etiqueta.<\/p>';\r\n return;\r\n }\r\n\r\n posts.forEach(post => {\r\n const title = post.title.rendered;\r\n const excerpt = post.excerpt.rendered.replace(\/<[^>]+>\/g, '');\r\n const siteUrl = post.url_sitio || post.link;\r\n const image = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || 'https:\/\/via.placeholder.com\/300x180?text=Sin+imagen';\r\n\r\n const card = document.createElement('div');\r\n card.className = 'card';\r\n card.innerHTML = `\r\n <img decoding=\"async\" src=\"${image}\" alt=\"${title}\">\r\n <div class=\"card-content\">\r\n <h5>${title}<\/h5>\r\n <p>${excerpt}<\/p>\r\n <a href=\"${siteUrl}\" target=\"_blank\" rel=\"noopener\">Ver proyecto<\/a>\r\n <\/div>\r\n `;\r\n container.appendChild(card);\r\n });\r\n }\r\n\r\n function filterPostsByTag(tagId) {\r\n if (tagId === 'all') {\r\n renderPosts(allPosts);\r\n } else {\r\n const filtered = allPosts.filter(post => post.tags.includes(parseInt(tagId)));\r\n renderPosts(filtered);\r\n }\r\n }\r\n\r\n select.addEventListener('change', () => {\r\n filterPostsByTag(select.value);\r\n });\r\n\r\n \/\/ Obtener categor\u00eda \"desarrollo-web\"\r\n fetch(`${baseURL}\/wp-json\/wp\/v2\/categories?slug=desarrollo-web`)\r\n .then(res => res.json())\r\n .then(categories => {\r\n if (categories.length === 0) {\r\n document.getElementById('websites').innerHTML = '<p>No se encontr\u00f3 la categor\u00eda \"Desarrollo Web\".<\/p>';\r\n return;\r\n }\r\n\r\n const categoryId = categories[0].id;\r\n\r\n fetch(`${baseURL}\/wp-json\/wp\/v2\/posts?categories=${categoryId}&_embed&per_page=100`)\r\n .then(res => res.json())\r\n .then(posts => {\r\n \/\/ Ordenar por fecha: m\u00e1s recientes primero\r\n allPosts = posts.sort((a, b) => new Date(b.date) - new Date(a.date));\r\n\r\n const tagIds = [...new Set(posts.flatMap(p => p.tags))].filter(id => id);\r\n\r\n if (tagIds.length === 0) {\r\n renderPosts(allPosts);\r\n return;\r\n }\r\n\r\n fetch(`${baseURL}\/wp-json\/wp\/v2\/tags?include=${tagIds.join(',')}`)\r\n .then(res => res.json())\r\n .then(tags => {\r\n tags.forEach(tag => {\r\n const option = document.createElement('option');\r\n option.value = tag.id;\r\n option.textContent = tag.name;\r\n select.appendChild(option);\r\n });\r\n\r\n renderPosts(allPosts);\r\n });\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Desarrollo Web Nuestros Websites \ud83d\ude80 Todos los rubros<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-932","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":145,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/932\/revisions"}],"predecessor-version":[{"id":1254,"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/932\/revisions\/1254"}],"wp:attachment":[{"href":"https:\/\/codewise.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}