{"id":527,"date":"2025-11-21T11:40:22","date_gmt":"2025-11-21T10:40:22","guid":{"rendered":"https:\/\/coraciuraneta.com\/?page_id=527"},"modified":"2025-11-21T11:43:44","modified_gmt":"2025-11-21T10:43:44","slug":"decaclon","status":"publish","type":"page","link":"https:\/\/coraciuraneta.com\/index.php\/decaclon\/","title":{"rendered":"DECACLON"},"content":{"rendered":"<style>\nul.wp-block-list {\n    list-style-type: none;\n    padding-left: 1em;\n  }\nul.wp-block-list li::before {\n    content: \"- \";\n    color: inherit;\n  }\n*{\nmargin: 0.18rem;\n}\n<\/style>\n\n<p class=\"has-medium-font-size\">Esta actividad consisti\u00f3 en desarrollr un clon funcional de la p\u00e1gina de Decathlon utilizando React, con el objetivo de familiarizarnos con la estructura de componentes, el consumo de APIs y la organizaci\u00f3n de un proyecto frontend profesional. <\/p>\n\n\n\n<p class=\"has-medium-font-size\">Antes de empezar a programar, se realiz\u00f3 un an\u00e1lisis de la web origial y se dise\u00f1o una propuesta visual en Figma. Para la obtenci\u00f3n de datos, se pod\u00eda utilizar una API p\u00fablica relacionada con productos deportivos o crear una API propia mediante json-server, en mi caso, cree un json-server.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/decaclon.vercel.app\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-1024x1024.png\" alt=\"\" class=\"wp-image-533 size-full\" srcset=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-1024x1024.png 1024w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-300x300.png 300w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-150x150.png 150w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-768x768.png 768w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-1536x1536.png 1536w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/11\/Decaclon-2048x2048.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p>Clon funcional de la p\u00e1gina de Decathlon creada con React. <\/p>\n\n\n\n<p>Haz clic en la imagen para visitar la web.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\"><strong>PROCESO CREATIVO<\/strong><\/h2>\n\n\n\n<p>Durante el desarrollo del proyecto segu\u00ed una metodolog\u00eda basada en dise\u00f1o previo, organizaci\u00f3n por historias de usuario y construcci\u00f3n por componentes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/trello.com\/invite\/b\/65366ae8675857ea195cd375\/ATTIc14fc1b1a10ff28e2a3a381a89df84b0F26B88C7\/decaclon\" data-type=\"link\" data-id=\"https:\/\/trello.com\/invite\/b\/65366ae8675857ea195cd375\/ATTIc14fc1b1a10ff28e2a3a381a89df84b0F26B88C7\/decaclon\" target=\"_blank\" rel=\"noreferrer noopener\">Planificaci\u00f3n en Trello:<\/a><\/strong> Cre\u00e9 un tablero con tres historias de usuario principales: p\u00e1gina de portada, men\u00fa y p\u00e1gina del producto.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/www.figma.com\/design\/MrBCCvaPgFCiODWKLeF9vv\/p11-proyecto5-Decaclon?node-id=0-1&amp;t=E7NPHnkYJl9lsJuS-1\" target=\"_blank\" rel=\"noreferrer noopener\">Dise\u00f1o en Figma:<\/a> <\/strong>Antes de escribir c\u00f3digo analic\u00e9 la estructura de la web original y gener\u00e9 un dise\u00f1o propio de Figma, respetando la est\u00e9tica limpia y modular de Decathlon. Defin\u00ed componentes reutilizables y el layout general. <\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Implementaci\u00f3n en React:<\/strong> Constru\u00ed la aplicaci\u00f3n de React y separando la l\u00f3gica en componentes reutilizables. A partir de las historias de usuario desarroll\u00e9 las siguientes vistas: \n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Home:<\/strong> Estructura del banner, top ventas, men\u00fa y footer.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Cat\u00e1logo:<\/strong> Muestra un slider de productos obtenidos mediante API.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Detalle de productos:<\/strong> Visualizaci\u00f3n de m\u00e1s productos al hacer clic en el apartado de deportes del men\u00fa. <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Alcance y limitaciones:<\/strong> Durante el desarrollo se complementaron todas las historias de usuario previstas menos la \u00faltima, devido a limitaciones de tiempo.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Esta actividad consisti\u00f3 en desarrollr un clon funcional de la p\u00e1gina de Decathlon utilizando React, con el objetivo de familiarizarnos con la estructura de componentes, el consumo de APIs y la organizaci\u00f3n de un proyecto frontend profesional. Antes de empezar a programar, se realiz\u00f3 un an\u00e1lisis de la web origial y se dise\u00f1o una propuesta [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-527","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":3,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/527\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/527\/revisions\/536"}],"wp:attachment":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/media?parent=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}