Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 2
Lección 6: Diseño CSS- Agrupación de elementos en CSS
- Desafío: agrupa a los meros
- Propiedades width, height y overflow en CSS
- Desafío: el océano que se desborda
- Modelo de caja en CSS
- Desafío: el modelo bóxer
- Posición en CSS
- Desafío: coloca al planeta
- CSS en la naturaleza: Google Maps
- Elementos flotantes en CSS
- Desafío: nubes flotantes
- Usar las propiedades de diseño de CSS
- Planear tu página web
- Proyecto: invitación a un evento
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Planear tu página web
¿Cómo puedes convertir una página en blanco en la página web de tus sueños? Podrías simplemente empezar a escribir HTML y CSS, cambiar cosas en el camino, eliminar cosas que no quieras, agregar cosas que de repente se te ocurran o reacomodar partes de la página.
Sin embargo, esa no siempre es la mejor estrategia, ya que puede conducir a mucho tiempo perdido en escribir HTML y CSS que después vas a descartar. En lugar de eso, debes planear tu página web antes de construirla. Puedes averiguar el contenido, el diseño e incluso la apariencia.
Lluvia de ideas
El primer paso para planear cualquier cosa suele ser una lluvia de ideas: averiguar cualquier cosa y todo lo que podrías querer hacer. Haces la lluvia de ideas al dibujar mapas en papel, al hacer notas en un documento o al poner notas en un tablero.
Puedes hacer la lluvia de ideas tú mismo o, si quieres multiplicar el rango de ideas, reclutar a un colaborador para tener la lluvia de ideas contigo. Mientras estés en la lluvia de ideas con un colaborador, usa el enfoque "Sí, y…". No te enfoques en lo que no va a funcionar de las ideas de tu colaborador, enfócate en lo que podría funcionar y qué cosas relacionadas podrían funcionar.
Después de generar muchas ideas, vas a tener que decidir cuáles en realidad vas a querer implementar. Prioriza las que te emocionen más: trata de ponerles estrellas o ponerlas en una lista y descarta el resto o guárdalas para después.
Prototipos en papel
Un buen paso siguiente es crear un prototipo en papel: tu página web, pero en papel. Es un boceto de los componentes de tu página web, con garabatos para contenido y cajas para elementos.
A continuación está un prototipo en papel para SF quiche, una web app que va a satisfacer todas tus necesidades para encontrar quiches:
Como no toma mucho tiempo hacer un prototipo en papel, puedes iterar rápidamente y no sentirte demasiado apegado a tu diseño original. También puedes hacer diferentes prototipos a la vez y puedes hacer prototipos para múltiples páginas de tu sitio.
Después de haber hecho un prototipo, podrías querer hacer algunas pruebas de usuario. Muéstrale el prototipo a un amigo, después pregúntale qué es lo primero a lo que le haría clic, o qué es lo primero que ve. Ve si tiene algo más de retroalimentación.
Wireframes
Una vez que te sientas bastante bien con tus prototipos en papel, puedes querer convertirlos en wireframes. Un wireframe es como un prototipo, pero típicamente se dibuja digitalmente y es más preciso. Un wireframe está hecho de cajas que representan cada parte de la página, además de pequeños pedazos de texto e íconos según sean necesarios. Por ejemplo, a continuación está un wireframe de nuestra app SF quiche:
Este wireframe fue creado en una herramienta de prototipado en línea popular llamada Balsamiq. También puedes hacer wireframes con las herramientas de los programas de oficina, como Powerpoint/Keynote, o al usar aplicaciones de diseño como Photoshop, Gimp o InDesign. También puedes buscar más herramientas de creación de prototipos en línea. Cuando estés decidiendo cuál usar, ten en cuenta que muchas aplicaciones para hacer prototipos cuestan dinero.
Una vez que hayas hecho tus wireframes, puede que quieras hacer otra ronda de pruebas con los usuarios. Algunas herramientas para hacer wireframes te dejan compartir tus wireframes con otros para que las comenten. También hay herramientas como InvisionApp que te dejan crear wireframes interactivos, en donde las áreas en donde puedes hacer clic te llevan a nuevas pantallas.
¿Quieres unirte a la conversación?
- Quien me recomienda aplicaciones GRATIS de prototipado que valgan la pena? Gracias!(7 votos)
- Figma esta arrazando con todo.(4 votos)
- una muy buena herramienta para el prototipado es "balsamiq" y tiene una interfaz muy agradable y es muy simple de usar.(4 votos)
- umumsjdsjdnjsnd bebue osas :v(3 votos)
- como usar Gimp para prototipiado(3 votos)
- Es recomendable hacer bosetos para movil y para pc, o se hace la de pc y se adapta a movil en el codigo?(2 votos)
- uds enseñan a programar en HTML CSS(2 votos)
- helouda :v ,Sollo es para completar xd(1 voto)
- quien recomienda aplicaciones gratis(1 voto)
- Ingles Full en este archivo :((0 votos)
- lo puedes cambiar a español en la parte inferior de la pagina, a veces pasa eso pero solo es cosa de dejarlo como fijo(5 votos)