{"id":124694,"date":"2019-01-02T18:00:51","date_gmt":"2019-01-02T17:00:51","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-basic-responsive-prototype\/"},"modified":"2025-02-03T16:44:31","modified_gmt":"2025-02-03T15:44:31","slug":"create-a-basic-responsive-prototype","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/crear-un-prototipo-responsivo-basico","title":{"rendered":"Crear un prototipo responsivo b\u00e1sico"},"content":{"rendered":"

En este ejercicio, crearemos un prototipo responsive b\u00e1sico utilizando elementos anclados y una altura y anchura basadas en porcentajes.
\n

    \n
  1. Crea un nuevo prototipo de Web. Arrastra dos widgets Rect\u00e1ngulo al Lienzo, colocando uno en la parte superior de la pantalla y otro en la inferior. \u00c9stos actuar\u00e1n como cabecera y pie de p\u00e1gina del prototipo. <\/li>\n
  2. Selecciona el Rect\u00e1ngulo de cabecera. En la paleta Propiedades, busca la secci\u00f3n Fondo. Sube una imagen para el fondo del Rect\u00e1ngulo y, en el desplegable, elige la opci\u00f3n \u00abPortada\u00bb. Alternativamente, puedes elegir un color para el fondo del Rect\u00e1ngulo en lugar de una imagen. \"A\u00f1adir<\/li>\n
  3. Con el Rect\u00e1ngulo a\u00fan seleccionado, y todav\u00eda en la paleta Propiedades, ve a la secci\u00f3n Tama\u00f1o. Para la anchura, cambia el desplegable \u00abpx\u00bb a \u00ab%\u00bb, y cambia la Anchura a 100. Ahora el Rect\u00e1ngulo ocupar\u00e1 siempre el 100% de la anchura de la pantalla. \"100<\/li>\n
  4. Arrastra un widget de Texto cerca de la parte superior del Rect\u00e1ngulo de cabecera. Servir\u00e1 como t\u00edtulo del prototipo de sitio web. En la paleta Propiedades, busca la secci\u00f3n Posici\u00f3n. Marca la casilla \u00abMostrar opciones de posici\u00f3n de la chincheta\u00bb.En los desplegables que aparecen, cambia el desplegable del par\u00e1metro ‘X’ a \u00abFijar al centro\u00bb. Deja fijo el par\u00e1metro \u00abY\u00bb. Ahora el texto del t\u00edtulo permanecer\u00e1 siempre en el centro de la pantalla. \"Fijar<\/li>\n
  5. Busca el Rect\u00e1ngulo del pie de p\u00e1gina y cambia su anchura a 100%.<\/li>\n
  6. Con el Rect\u00e1ngulo de pie de p\u00e1gina a\u00fan seleccionado, y todav\u00eda en la paleta Propiedades, ve a la secci\u00f3n Posici\u00f3n y cambia el par\u00e1metro ‘Y’ a \u00abFijar a la parte inferior\u00bb. Deja fijo el par\u00e1metro \u00abX\u00bb. Ahora el pie de p\u00e1gina se mostrar\u00e1 siempre en la parte inferior de la pantalla. \"Fija<\/li>\n
  7. Cerca del pie de p\u00e1gina, arrastra dos widgets de Texto y un widget de Imagen. Cambia un widget de Texto para que est\u00e9 anclado al centro y anclado a la parte inferior, con un margen de 100px. Cambia el otro widget de Texto para que tambi\u00e9n se fije en el centro y se fije en la parte inferior con un margen de 72px. Por \u00faltimo, cambia el widget de Imagen para que se fije en el centro y se fije en la parte inferior con un margen de 41px. \"Fija<\/li>\n
  8. Arrastra un widget Bot\u00f3n al Lienzo. Dale el estilo que prefieras y cambia su anchura al 40%. F\u00edjalo al centro y a la parte inferior con un margen de 260px. Ahora el Bot\u00f3n aparecer\u00e1 siempre en el centro-inferior de la pantalla, y ocupar\u00e1 siempre el 40% de la anchura de la pantalla. \"Bot\u00f3n<\/li>\n
  9. Arrastra un widget de Texto y otro de Rect\u00e1ngulo a la parte superior derecha del Lienzo. Etiqueta el Texto \u00abIniciar sesi\u00f3n\u00bb y el Rect\u00e1ngulo \u00abReg\u00edstrate\u00bb. Cambia el fondo del Rect\u00e1ngulo para que sea transparente, y cambia su borde para que sea redondeado. \"A\u00f1adir<\/li>\n
  10. Selecciona el Texto y f\u00edjalo a la derecha con un margen de 130px. Selecciona el Rect\u00e1ngulo y f\u00edjalo a la derecha con un margen de 30px. \"Bot\u00f3n<\/li>\n
  11. Arrastra un widget de Panel Din\u00e1mico al Lienzo. En la secci\u00f3n \u00abDisposici\u00f3n\u00bb de la paleta Propiedades, cambia su disposici\u00f3n a Vertical.A continuaci\u00f3n, cambia el relleno \u00abSuperior\u00bb a 40px. Ahora habr\u00e1 algo de espacio entre la parte superior del panel y su contenido. \"alineaci\u00f3n<\/li>\n
  12. Con el panel a\u00fan seleccionado, f\u00edjalo al centro, cambia su anchura al 90% y su altura al 48%.\"Panel<\/li>\n
  13. Haz doble clic en el Panel y arrastra un widget de Texto al panel. Cambia su anchura al 77%. El Texto ocupar\u00e1 ahora el 77% de la anchura del Panel, y el propio panel ocupar\u00e1 el 90% de la anchura de la pantalla. \"Dar<\/li>\n<\/ol>\n

    Haz clic en \u00abSimular\u00bb y cambia la anchura del navegador de simulaci\u00f3n. Tu prototipo ajustar\u00e1 autom\u00e1ticamente los elementos para que respondan a la anchura del navegador. <\/p>\n

    Nota:<\/strong> La configuraci\u00f3n de la simulaci\u00f3n debe ajustarse para que se expanda a la anchura del navegador. Puedes especificarlo en los ajustes de simulaci\u00f3n o en la ventana de simulaci\u00f3n. <\/div>\n

    \"Ajuste
    \nPuedes descargar nuestro ejemplo aqu\u00ed.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    En este ejercicio, crearemos un prototipo responsive b\u00e1sico utilizando elementos anclados y una altura y anchura basadas en porcentajes. Prototipos responsivos Crea un nuevo prototipo de…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8440],"tags":[],"class_list":["post-124694","post","type-post","status-publish","format-standard","hentry","category-formacion","category-prototipado-responsivo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124694"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124694"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124694\/revisions"}],"predecessor-version":[{"id":126158,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124694\/revisions\/126158"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}