{"id":225,"date":"2025-10-25T13:21:27","date_gmt":"2025-10-25T11:21:27","guid":{"rendered":"http:\/\/localhost:8888\/portfolio\/?page_id=225"},"modified":"2026-05-28T22:04:37","modified_gmt":"2026-05-28T20:04:37","slug":"clon-de-filmin","status":"publish","type":"page","link":"https:\/\/coraciuraneta.com\/index.php\/clon-de-filmin\/","title":{"rendered":"CLON DE FILMIN"},"content":{"rendered":"<style>\nul.wp-block-list {<br \/>\n    list-style-type: none;<br \/>\n    padding-left: 1em;<br \/>\n  }<br \/>\nul.wp-block-list li::before {<br \/>\n    content: \"- \";<br \/>\n    color: inherit;<br \/>\n  }<br \/>\n*{<br \/>\nmargin: 0.18rem;<br \/>\n}<br \/>\n<\/style>\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Este proyecto se dessarroll\u00f3 dentro del Bootcamp de Desarrollo Frontend de Factor\u00eda F5. La actividad consist\u00eda en crear un clon funcional de la pantalla principal de la plataforma Filmin utilizando el framework Svelte, aplicando una metodolog\u00eda de trabajo \u00e1gil basada en hitorias de usuario, Trello y validaciones interativas. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">El objetivo era poner en pr\u00e1ctica los conocimientos de componentizaci\u00f3n, dise\u00f1o con Figma, estructuraci\u00f3n de c\u00f3digo y flujo de trabajo \u00e1gil, simulando un entorno real de desarrollo. <\/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:\/\/filmin-iota.vercel.app\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-1024x1024.png\" alt=\"Mockup de ordenador mostrando una vista previa de web de Filmin, propuesta creada con React.\" class=\"wp-image-217 size-full\" srcset=\"https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-1024x1024.png 1024w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-300x300.png 300w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-150x150.png 150w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-768x768.png 768w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-1536x1536.png 1536w, https:\/\/coraciuraneta.com\/wp-content\/uploads\/2025\/10\/Filmin-Web-2048x2048.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-medium-font-size wp-block-paragraph\">Clon de Filmin creado con Svelte, inspirado en la interfaz original de la plataforma.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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 class=\"has-medium-font-size wp-block-paragraph\">Durante el desarrollo del proyecto se sigui\u00f3 una metodolog\u00eda interativa y organizada en diferentes etapas: <\/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\/652e3022bb944a579a9df6ba\/ATTIfd4f909df261b5dc53607c7c1171d250A0644CFD\/filmin\" data-type=\"link\" data-id=\"https:\/\/trello.com\/invite\/b\/652e3022bb944a579a9df6ba\/ATTIfd4f909df261b5dc53607c7c1171d250A0644CFD\/filmin\" target=\"_blank\" rel=\"noreferrer noopener\">Planificaci\u00f3n en Trello:<\/a><\/strong> Se cre\u00f3 un tablero con tres columnas (Vaclog, Doing, Done) donde se a\u00f1adieron todas las historias de usuario. Este sistema permiti\u00f3 priorizar tareas y mantener un flujo de trabajo claro y visual. <\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><a href=\"https:\/\/www.figma.com\/design\/KMKn5boOBfKunZ7iU9TQJM\/P11-project4-Filmin?node-id=0-1&amp;t=TVMWkNF8kVG30HXL-1\" data-type=\"link\" data-id=\"https:\/\/www.figma.com\/design\/KMKn5boOBfKunZ7iU9TQJM\/P11-project4-Filmin?node-id=0-1&amp;t=TVMWkNF8kVG30HXL-1\" target=\"_blank\" rel=\"noreferrer noopener\">Dise\u00f1o en Figma:<\/a><\/strong> Antes de implementar cada historia de usuario, se realiz\u00f3 un dise\u00f1o espec\u00edfico en Figma para definir la estructura visual y la experiencia del usuario. <\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Implementaci\u00f3n en Svelte:<\/strong> Se desarrollaron los distintos componenetes de la interfaz siguiendo las historias de usuario propuestas: \n<ul class=\"wp-block-list\">\n<li><strong>Cat\u00e1logo de pel\u00edculas: <\/strong>Vista inicial con la lista de pel\u00edculas disponibles.<\/li>\n\n\n\n<li><strong>Listas de pel\u00edculas:<\/strong> Organizaci\u00f3n del contenido en secciones tem\u00e1ticas, imitando la distribuci\u00f3n de Filmin. <\/li>\n\n\n\n<li><strong>Carrusel principal:<\/strong> Componente din\u00e1mico que destaca t\u00edtulos seleccionados.<\/li>\n\n\n\n<li><strong>Vista de detalle al hacer hover:<\/strong> Interacci\u00f3n que muestra informaci\u00f3n adicional de cada pel\u00edcula. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Validaci\u00f3n continua: <\/strong>Al completar cada historia, se revisaba su funcionamiento con el equipo formador para garantizar que cumpl\u00eda los criterios de aceptaci\u00f3n antes de avanzar a la siguiente.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Alcance y limitaciones:<\/strong> Durante el desarrollo se completaron casi todas historias de usuario previstas. Sin embargo, debido a limitaciones de tiempo, no fue posible implementar la vista de detalle al hacer hover.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">El resultado fu\u00e9 una aplicaci\u00f3n funcional y visualmente coherente, desarrollada con buenas pr\u00e1cticas de c\u00f3digo y dise\u00f1o, que reproduce la experiencia de navegaci\u00f3n de Filmin desde un enfoque t\u00e9cnico y did\u00e1ctico.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este proyecto se dessarroll\u00f3 dentro del Bootcamp de Desarrollo Frontend de Factor\u00eda F5. La actividad consist\u00eda en crear un clon funcional de la pantalla principal de la plataforma Filmin utilizando el framework Svelte, aplicando una metodolog\u00eda de trabajo \u00e1gil basada en hitorias de usuario, Trello y validaciones interativas. El objetivo era poner en pr\u00e1ctica los [&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-225","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/225","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=225"}],"version-history":[{"count":12,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/225\/revisions"}],"predecessor-version":[{"id":558,"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/pages\/225\/revisions\/558"}],"wp:attachment":[{"href":"https:\/\/coraciuraneta.com\/index.php\/wp-json\/wp\/v2\/media?parent=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}