Embedded Files
CSS: ¿PARA QUÉ?
CSS: ¿PARA QUÉ?
La hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir la presentación y el estilo de un documento estructurado escrito en HTML y derivados. Es decir, una vez tengamos la página web programada en HTML con la información que deseamos, es el momento de "ponerla bonita" con CSS.
En esta unidad aprenderás a cambiar la fuente, el color o el tamaño de los textos y demás componentes que conforman tu página web. Es importante entender que CSS es un lenguaje diferente a HTML y, por tanto, no deben ser confundidos.
¿Cómo le indicamos al navegador que se trata de CSS?
¿Cómo le indicamos al navegador que se trata de CSS?
Para diferenciar HTML de CSS, debemos utilizar las etiquetas
<style>
</style>
De este modo, todo lo que escribamos entre ellas, será considerado CSS.
PÁGINAS REALES
PÁGINAS REALES
Seguramente, hasta ahora estarás pensando: "qué páginas más feas se pueden hacer con esto". ¡No te impacientes! Para motivarte un poco, te animo a que veas el siguiente vídeo. En él, se muestra cómo la misma página web (el mismo contenido en HTML) se puede representar de muchísimas maneras diferentes gracias a los estilos de CSS:
ACTIVIDAD 1
ACTIVIDAD 1
A lo largo de los siguientes apartados vamos a trabajar con muchas etiquetas diferentes que deberás recordar para programar tu propia página web utilizando CSS. A medida que vamos avanzando en la unidad, deberás tomar tus propios apuntes del significado de cada etiqueta.
Te recomiendo que ordenes las etiquetas por orden alfabético para que te sea más fácil localizarlas. Un ejemplo sería:
<style> </style>: Esta etiqueta es la que el navegador utiliza para saber que todo lo que englobe se trata de lenguaje CSS y, por tanto, modificará los estilos de la página.
colores de textos
colores de textos
Lo primero que tenemos que pensar es qué tipo de textos queremos estilizar, es decir, cuáles quiero cambiar. Recordemos que en HTML vimos que los textos podían clasificarse en h1, h2, h3... De manera que si, por ejemplo, quisiéramos editar los colores de los textos h2, lo haríamos así:
<style>
h2 { color: escribir aquí el color en inglés}
</style>
Sin embargo, el navegador no entiende de "rojo clarito" o "verde cesped" y, por tanto, limita los colores que podemos utilizar a los más básicos: blue, green, red, yellow... Si realmente queremos tener libertad a la hora de diseñar nuestra página web, es importante que podamos elegir exactamente el color que deseemos y, para ello, tenemos que hablar de los códigos RGB.
RGB viene de las siglas de los colores primarios en inglés: Red, Green, Blue y es la composición del color en términos de la intensidad de los colores primarios. Es decir, para definir el código de un color, tenemos que indicar cuánto hay de rojo, cuánto de verde y cuánto de azul.
A continuación teneis dos ejemplos de códigos RGB para un color rojo pálido y otro azul turquesa.
Investiga un poco más acerca de los códigos RGB en el siguiente enlace y prueba a elegir colores análogos, complementarios, para hacer sombras...
Ten en cuenta que la elección de los colores es una parte fundamental en el diseño de páginas web
Una vez elegido el color, por ejemplo rgb (53, 184, 189), podemos escribir el siguiente código para colorear el subtítulo.
<style>
h2 {color: rgb(53,184,189)}
</style>
ACTIVIDAD 2
ACTIVIDAD 2
Recupera la página HTML que diseñaste en la actividad 7 de la unidad anterior y modifica todos los textos tipo h1 y h2 para que tengan dos colores RGB que sean análogos.
color del fondo de la página
color del fondo de la página
Para cambiar algo en todo el fondo de una página, debemos "estilizar" el "body" de la página. Al igual que para estilizar los subtítulos h2 utilizábamos h2 { } , para estilizar la página entera utilizaremos:
<style>
body {}
</style>
Concretamente, para cambiar el color de fondo utilizaremos la etiqueta background-color, que en inglés significa precisamente eso: color de fondo.
<style>
body {background-color: rgb()}
</style>
De esta manera, podemos obtener resultados como este:
Como acabas de aprender, utilizamos reglas de CSS para seleccionar elementos de una página web y poder asignarle estilos a esos elementos. La manera de decirle a nuestra regla de CSS a qué elementos de HTML se aplica el estilo es con selectores. Hay muchos tipos de selectores (que veremos más adelante), pero aquí solo queremos revisar el que mostramos en la guía paso a paso: el selector de elemento.
El selector de elemento selecciona elementos de HTML de acuerdo a los nombres de etiquetas. Cada elemento de HTML (<h1>, <p>, <li>, <body>) y cualquier otro elemento de HTML puede seleccionarse en CSS al usar el nombre de etiqueta sin los paréntesis angulares (< >). Por ejemplo, puedes seleccionar todas las etiquetas <p> en tu página web con el selector de elemento p. Así se escribe la regla de CSS que cambia el color de cada párrafo de una página web:
p {color: rgb(255, 0, 0);}
ACTIVIDAD 3
ACTIVIDAD 3
¿Cuál de estas reglas selecciona todos los elementos <h2> en una página?
<h2> {color: rgb(255, 0, 0);}
h2 {color: rgb(255, 0, 0);}
#h2 {color: rgb(255, 0, 0);}
SELECTOR DE ID
SELECTOR DE ID
Hasta ahora hemos trabajado con selector de elementos, es decir, vamos a modificar el estilo de todos los elementos que tengan las mismas características; por ejemplo: todos los h1 o todos los p. Sin embargo, ¿cómo podemos hacerlo si sólo queremos modificar el estilo a un texto concreto y no a todos? Para ello necesitamos entender qué es una ID.
Las ID son "nombres" con los que se identifican elementos. Por así decirlo, es el "DNI" de cada elemento de mi página web.
Para añadir un ID sobre un elemento, por ejemplo: un párrafo, tenemos que situar el cursor a la derecha de la "p", dejar un espacio y escribir id="nombre que le queramos poner". Te recomiendo que utilices nombres bastante precisos para tener tu página más ordenada.
NOTA: No podrás añadir espacios en el nombre de tu ID.
<p id="ejemplo-id">
Una vez creada la ID del elemento que queremos modificar, tendremos que escribir #ejemplo-id { } y, dentro de los corchetes, incluiremos lo que queramos modificar: background-color o color.
NOTA: No deben existir dos ID con el mismo nombre.
ACTIVIDAD 4
ACTIVIDAD 4
Practica con el selector de ID y el selector de elementos para diseñar una página web sobre un animal que te fascine y utiliza colores de fondo y de texto para que te recuerde a el. Por ejemplo: utiliza el naranja y en negro para hablar del tigre.
SELECTOR POR CLASES
SELECTOR POR CLASES
Ya hemos dicho que NO podemos repetir el mismo id para varios elementos, así que, ¿cómo podemos aplicar el mismo estilo a varios párrafos, pero no a todos? Podemos hacerlo utilizando las "clases", que nos permiten agrupar diferentes elementos. Para ello, escribiremos class="ejemplo-clase" detrás de cada elemento que queremos modificar:
<p class="ejemplo-clase">
Una vez creada la clase, volveremos a nuestra etiqueta style y tendremos que escribir .ejemplo-clase { } y, dentro de los corchetes, incluiremos lo que queramos modificar: background-color o color. Por ejemplo:
.ejemplo-clase {color:blue}
ACTIVIDAD 5
ACTIVIDAD 5
Copia el siguiente código HTML que contiene la letra de una canción que trata de manzanas y plátanos.
Como puedes ver, ya hay clases en la mayoría de las palabras acerca de manzanas y plátanos, pero aún no hay estilos para esas clases. Agrega dos reglas de estilo, una que le ponga un color a la clase 'apples' y otra que le ponga un color a la clase 'bananas'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Apples and bananas classes</title>
<style>
</style>
</head>
<body>
<h1><strong class="apples">Apples</strong> and <strong class="bananas">Bananas</strong></h1>
<p>
I like to eat eat eat
<strong class="apples">apples</strong> and
<strong class="bananas">bananas</strong>.<br>
I like to eat eat eat
<strong class="apples">apples</strong> and
<strong class="bananas">bananas</strong>.<br>
I like to ate ate ate
<strong class="apples">ay-ples</strong> and
<strong class="bananas">bay-nay-nays</strong>.<br>
I like to ate ate ate
<strong class="apples">ay-ples</strong> and
<strong class="bananas">bay-nay-nays</strong>.<br>
I like to eet eet eet
<strong class="apples">ee-ples</strong> and
<strong class="bananas">bee-nee-nees</strong>.<br>
I like to eet eet eet
<strong class="apples">ee-ples</strong> and
<strong class="bananas">bee-nee-nees</strong>.<br>
I like to ite ite ite
<strong class="apples">i-ples</strong> and
<strong class="bananas">by-by-nys</strong>.<br>
I like to ite ite ite
<strong class="apples">i-ples</strong> and
<strong class="bananas">by-by-nys</strong>.<br>
I like to ote ote ote
<strong class="apples">oh-ples</strong> and
<strong class="bananas">bo-no-nos</strong>.<br>
I like to ote ote ote
<strong class="apples">oh-ples</strong> and
<strong class="bananas">bo-no-nos</strong>.<br>
I like to ute ute ute
<strong class="apples">uupples</strong> and
<strong class="bananas">bununus</strong>.<br>
I like to ute ute ute
<strong class="apples">uupples</strong> and
<strong class="bananas">bununus</strong>.<br>
I like to eat eat eat
<strong>apples</strong> and
<strong>bananas</strong>.<br>
</p>
</body>
</html>
cambio de la fuente de los textos
cambio de la fuente de los textos
La fuente de un texto es el tipo de letra que se utiliza para escribirlo. Observa cómo las siguientes palabras aparecen escritas con diferentes fuentes:
Ejemplo de fuente ejemplo de fuente ejemplo de fuente ejemplo de fuente
Si investigas un poco acerca de los nombres de las fuentes, verás que muchos llevan la palabra "sans" o "serif" . Cuando una fuente es de tipo "sans", suele tener un aspecto más sencillo (como la que estoy utilizando para escribir este párrafo). Sin embargo, cuando se acompaña de la palabra "serif", hace referencia a fuentes más elaboradas, que tienen "patitas" en cada una de las letras. Fíjate en las diferencias entre estas dos:
Fuentes tipo "Sans" Fuentes tipo "serif"
Como ya hemos visto, podemos aplicar los cambios a todos los párrafos o a los que tienen una ID determinada. En cualquiera de los dos casos, para modificar la fuente de los textos , utilizaremos la etiqueta:
{font-family: fuente que queramos; }
En CSS, aparecen cargadas una serie de familias de fuentes, con las que te aseguras que la página se va a leer correctamente. Estas familias son:
sans-serif fantasy cursive monospace
PRUEBA TÚ: Cambia la fuente de los párrafos de la actividad 5 a las 4 familias de fuentes descritas anteriormente y observa cómo cambian los textos.
p {
color: rgb(191, 0, 255);
font-family: sans-serif;
}
Otra opción es escribir el nombre de la fuente que queramos utilizar, aunque hay que tener en cuenta que no todas van a funcionar en todos los ordenadores, sí podemos probar con algunas típicas como las que puedes ver en el siguiente artículo.
ACTIVIDAD 6
ACTIVIDAD 6
Cambia las fuentes de la actividad 5, de manera que las palabras "apples" aparezcan con una tipología de "fantasy" y las palabras "bananas" aparezcan con la fuente "monospace". El resto del texto puede quedarse en el tipo de fuente "sans-serif".
tamaño de los textos
tamaño de los textos
Hasta ahora, nuestra única manera de controlar el tamaño de los textos en HTML era utilizando las etiquetas <h1>, <h2>... Sin embargo, en este apartado aprenderás a controlar el tamaño de los textos de tu página web de una manera mucho más precisa. Para ello, haremos uso de una nueva etiqueta:
{font-size: escribir tamaño;}
Ahora bien, ¿qué medida utilizamos para indicar el tamaño de la fuente? Podemos hacerlo de muchas maneras diferentes, pero estas son dos de las más utilizadas:
Píxeles: al igual que hacíamos con las imágenes, podemos indicar el número de píxeles que queremos que mida nuestra fuente. Por ejemplo, para escribir un cuerpo con un tamaño de letra pequeño, podemos utilizar:
body {font-size: 11px;}
"em": esta forma de indicar los tamaños de los textos, permiten definir cuánto más grande es un texto que otro. Es decir, si queremos que nuestro encabezado h2 sea el doble que el texto de "body", escribiremos:
h2 {font-size: 2em;}
De este modo, ahora tendremos unos encabezados "h2" con un tamaño dos veces superior al del "body"; es decir, de 22px.
ACTIVIDAD 7
ACTIVIDAD 7
Copia el siguiente código y añade lo necesario para que tenga un aspecto como el de la imagen. Ten en cuenta que se han utilizado las siguientes fuentes:
h1 y h2: "oswald"
chica: "arial"
saoko: "impact"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Great big font sizes</title>
<style>
.grande { }
.gigante { }
</style>
</head>
<body>
<h1>Saoko</h1>
<h2>Rosalía</h2>
<p>
<em class="gigante">Chica</em>, ¿qué dices? <br>
<em class="grande">Saoko</em>, papi, <em class="grande">Saoko</em> <br>
<em class="grande">Saoko</em>, papi, <em class="grande">Saoko</em> <br>
<br>
<em class="gigante">Chica</em>, ¿qué dices? <br>
<em class="grande">Saoko</em>, papi, <em class="grande">Saoko</em> <br>
<em class="grande">Saoko</em>, papi, <em class="grande">Saoko</em> <br>
</p>
</body>
</html>
estilo de la fuente
estilo de la fuente
Otro de los elementos que podemos configurar es el estilo de la fuente:
Para poner todo un párrafo con un tipo de letra más grueso (en negrita), utilizaremos:
{font-weight: bold;}
Para poner todo un párrafo con un tipo de letra "inclinada" (en cursiva), utilizaremos:
{font-style: italic;}
otras propiedades de texto
otras propiedades de texto
Las propiedades de texto con CSS son muchísimas, aquí tienes otras que te pueden resultar interesantes para el diseño de tu página web:
Para definir el espacio entre líneas, podemos utilizar la siguiente etiqueta y definirla en píxeles o en "em":
{line-height: 15px;}
{line-height: 1,5em;}
Para alinear un texto, podemos utilizar la siguiente etiqueta y especificar center, justified o right
{text-align: center;}
Para subrayar un texto, utilizamos:
{text-decoration: underline;}
Para quitar un subrayado a un texto (por ejemplo a un enlace de internet), utilizamos:
{text-decoration: none;}
Para poner sombra a un texto, utilizamos:
{text-shadow: 2px 2px rgb();}
Hay tantas opciones en CSS que es imposible abarcarlas todas, por eso te animo a que investigues en Internet cuando quieras editar el estilo de tu texto.
ACTIVIDAD 8
ACTIVIDAD 8
Estiliza el siguiente texto utilizando todas las etiquetas que se definen en el apartado anterior
Ser programador estaba, y sigue estando, de moda. A muchos les fascina la idea de trabajar en el sector tecnológico, cambiar de empleo a uno con mejor condiciones laborales: horario flexible, posibilidad de trabajar en remoto, salarios más altos…
Si te estás planteando empezar a programar, desecha la idea de no poder conseguirlo. Más de una vez te habrás preguntado «¿cómo puedo convertirme en programador o qué lenguaje puedo aprender para empezar a programar y acabar trabajando en Google?». Parece fácil: aprender un lenguaje sencillo y venga, a trabajar, teletrabajar y jugar al futbolín. ¡Pero no es así!
Entonces, ¿es difícil aprender a programar? ¿Y ser programador? Cuanto menos contacto se ha tenido con la programación, más fácil parece ser, pero está muy lejos de la realidad y debes considerar que aprender puede llevarte un tiempo.
¿cómo estilizar una zona concreta de mi web?
¿cómo estilizar una zona concreta de mi web?
Para estilizar sólo una zona de nuestra página web, podemos utilizar la etiqueta <div> </div>. Observa el ejemplo de la imagen inferior y analiza qué etiquetas se han utilizado para colocar un recuadro sólo en la zona del índice:
Como puedes ver, se ha añadido una ID al índice con la etiqueta <div id="indice">, y dentro de la etiqueta style le he aplicado a esa ID los cambios deseados: en este caso el recuadro azul. Esto se puede aplicar a cualquier zona de la página web y, además, podemos modificar tantos apartados como deseemos: color de fondo, fuente, colores y tamaños de letras...
Esta etiqueta será nuestra mayor aliada a partir de ahora, ya que nos servirá para editar partes concretas de nuestra página web.
CAMBIAR EL ANCHO y el alto DE UN PÁRRAFO. overflow
CAMBIAR EL ANCHO y el alto DE UN PÁRRAFO. overflow
Visualiza el siguiente vídeo y pruébalo en la página web. Recuerda apuntar las nuevas etiquetas aprendidas en la actividad 1
Comprueba lo aprendido y realiza la siguiente actividad online. Ten en cuenta que la actividad tiene tres partes, por lo que deberás darle abajo a la derecha a "siguiente" para ver el siguiente reto. (No es necesario entregarla en las actividades de Classroom).
ACTIVIDAD 9
ACTIVIDAD 9
Estiliza el siguiente texto utilizando lo aprendido en el vídeo, definiendo el ancho al 75% y el alto del párrafo a 200px.
Igualmente, tendrás que añadir unas barras laterales para leer el texto (overflow).
Esta ruta por Andalucía de 15 o 21 días te ayudará a conocer todas las maravillas del Sur de España aprovechando la libertad y la comodidad que da moverte en coche.
Durante un recorrido circular por esta comunidad conocerás ciudades llenas de buen ambiente como Cádiz, monumentos Patrimonios de la Humanidad como la Mezquita de Córdoba, la Alhambra de Granada o la Catedral de Sevilla, interminables playas para relajarte, pueblos congelados en el tiempo y un sin fin de paisajes naturales a cada cuál más bonito, todo acompañado de una deliciosa gastronomía.
La mejor época para viajar a Andalucía es en primavera y otoño, cuando evitas las temperaturas de hasta 40 grados de los meses de verano, además de tener la oportunidad de observar los paisajes en su máximo esplendor y evitar los altos precios en alojamiento en los puntos más turísticos.
MODELO DE CAJAS
MODELO DE CAJAS
Toda la información que ponemos en una página web se organiza en "cajas". Cada párrafo forma una "caja" en la que podemos cambiar el ancho, el color de fondo... Cada título es una caja o cada imagen también se organiza en una caja.
Cualquier elemento que se encuentre dentro de las etiquetas <div> </div> forma una caja que podemos estilizar.
Y esto, ¿por qué es importante?
En CSS existe una forma de modelar estas cajas, definiendo cuatro partes:
El margen (margin): es el área transparente alrededor de una caja que la separa de otros elementos (imágenes, otros párrafos...)
El borde (border): es la línea que separa el margen del relleno
El relleno (padding): es el espacio que queda entre el contenido (texto, imagen...) y el borde.
El contenido real (content): es lo que contiene la información: texto, imagen...
- CAMBIAR EL MARGEN:
Para cambiar el margen, por ejemplo a 15 pixeles, tendremos que escribir la siguiente etiqueta:
margin: 15px
Si deseamos que la caja tenga diferentes pixeles por cada lado, podemos indicarlo en inglés, de manera que:
(derecho) margin-right: 15px
(izquierdo) margin-left: 10px
(arriba) margin-top: 5px
(abajo) margin-bottom: 12px
Otra opción es indicar que queremos un margen "automático" para que el contenido aparezca centrado en el navegador. Para ello, utilizaremos la etiqueta:
margin: auto
Aquí tienes un ejemplo de cómo se vería una imagen a 400px de ancho y centrada en la pantalla:
#imagen{
width: 400px;
margin: auto;
}
ACTIVIDAD 10
ACTIVIDAD 10
Recupera la actividad 9 y añade los siguientes elementos:
Inserta una imagen de 300px de ancho al inicio de la página y haz que se vea centrada
La distancia entre el texto y la imagen será de 20px
2. CAMBIAR EL borde:
2. CAMBIAR EL borde:
Para definir un borde, tenemos que definir tres elementos:
Grosor de la línea
Estilo de la línea
Color de la línea
border: 1px solid rgb(145, 0, 0);
En primer lugar, definimos el grosor, indicando el número de pixeles que queremos para nuestra línea. Cuanto mayor sea este número, mas gruesa será la línea. En este caso, hemos utilizado una fina (1px).
Seguidamente, indicaremos el tipo de línea que deseamos:
solid: para líneas continuas
none: sin línea.
dotted: línea punteada.
dashed: línea discontinua (segmentos cortos de línea).
inset: línea con el color en bajorelieve.
outset: línea que simula el relieve.
ridge: línea con efecto de marco
Por último, indicamos el color, como ya hemos aprendido. En este caso, mediante un código RGB.
Al igual que ocurría con el margen, podemos definir bordes para la zona superior (top), inferior (bottom), lateral derecho (right) o izquierdo (left). ¿Sabrías decir cómo será el siguiente borde?
border-top: 10px dotted purple;
ACTIVIDAD 11
ACTIVIDAD 11
Recupera la actividad 10 y añade los siguientes elementos:
Inserta un borde a todos los lados de la imagen que sea de puntos, bastante ancho y de color verde de la bandera de Andalucía.
En la parte inferior del texto, inserta un borde fino de líneas discontinuas en un gris clarito.
3. el relleno
3. el relleno
Si te fijas en la imagen, verás que al definir el borde, corremos el riesgo de que el texto quede demasiado pegado a la línea, de manera que se dificulta bastante la lectura. Para corregir esto, utilizamos el relleno (padding) de CSS.
El relleno nos permite añadir un espacio entre el contenido (en este caso el texto) y los bordes.
Si, por ejemplo, queremos añadir una distancia de 15 píxeles, escribiremos:
padding: 15px;
Haz clic en el enlace y completa la siguiente actividad en línea y repasa los conceptos de margin, border y padding:
la posición de las cosas en css
la posición de las cosas en css
En CSS, por defecto, si insertamos varias imágenes, las ordenará el horizontal (colocará una al lado de otra). Sin embargo, los textos los ordena en vertical (colocando uno encima de otro).
Todo esto se puede cambiar utilizando la etiqueta
position: absolute
top: 20px;
left: 10px;
z-index: 1;
Indicando posición absoluta, tenemos total libertad para situar este elemento donde queramos. en este caso, lo hemos movido 20px arriba y 10px a la izquierda.
La etiqueta z-index nos ayuda a definir el orden en el que colocamos varios elementos que se superponen, como ocurre en la imagen de la taza de café y el texto. Es necesario indicar qué colocamos encima de qué. En este caso, primero iría la imagen (z-index: 1) y después el texto (z-index:2)
Prueba lo aprendido acerca de la posición de elementos con CSS en el siguiente enlace:
La posición en CSS también nos permite dejar elementos fijos en la pantalla, por ejemplo, el menú superior del siguiente blog de coches no se mueve si nos desplazamos hacia abajo.
Esto es posible hacerlo mediante la etiqueta
position: fixed;
Google maps utiliza el posicionamiento de CSS para su aplicación. Visualiza el siguiente vídeo para entender un poco mejor todo lo aprendido.
elementos flotantes
elementos flotantes
A la hora de diseñar una web, es común colocar imágenes al lado de textos o textos rodeando imágenes.
Podemos hacer esto en CSS mediante una de estas etiqueta:
float: right
float: left
La primera de ella colocará la imagen a la derecha del texto; mientras que la segunda lo hará a la izquierda.
Y hasta aquí llegamos con CSS. Por supuesto, hay muchísimo más por aprender y para aquellas personas más curiosas, aquí os dejo el link de Khan Academy, donde podrás seguir aprendiendo muchísimas aplicaciones sobre CSS o seguir avanzando hacia Java.
pasos a seguir para diseñar tu página web
pasos a seguir para diseñar 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.
- 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.
Como no toma mucho tiempo hacer un prototipo en papel, puedes cambiar las cosas 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.
- DISEÑO WEB
Ahora que tienes las cosas un poco más caras, te será más sencillo decidir qué información añadir y dónde añadirla.
proyecto final de trimestre
proyecto final de trimestre
Un "blog" (o "web log") es un diario en línea que una o muchas personas actualizan frecuentemente, ya sea cada día, cada semana o cada mes. Muchos programadores nuevos tienen blogs que documentan su viaje para convertirse en programadores, con actualizaciones sobre lo que han aprendido y lo que han hecho.
Hay muchos "motores" para blogs, como WordPress y Blogger, pero en este proyecto crearás tu propio blog con HTML y CSS.
Diseña tu propio blog del tema que más te interese (viajes, coches, videojuegos...) Debe tener como mínimo:
Un índice con vínculos internos hacia las publicaciones (enlaces que te lleven a la parte de la web en la que hablas del contenido de tu blog).
3 publicaciones con imágenes. Por ejemplo, una publicación sobre un viaje a Barcelona, otra sobre uno a Roma y otra sobre uno a Buenos Aires. En estas publicaciones se debe mostrar TODO lo que hemos aprendido de HTML y CSS:
Textos estilizados: utiliza negritas, cursivas, subrayados, saltos de línea, fuentes de los textos, colores...
Listas ordenadas y/o desordenadas.
Tablas de contenidos
Imágenes
Vinculos externos hacia otras páginas con más información (como webs de reservas de hoteles o de restaurantes).
Usa las propiedades de texto y la etiqueta <div> de CSS para estilar tu blog con colores, bordes, márgenes, posicionamiento de los elementos...
En resumen, utiliza tu creatividad para hacer tu blog lo más atractivo posible al público.
ENTREGA 1:
ENTREGA 1:
Entregar en papel (hecho a mano) un boceto de tu blog, indicando el contenido que se pretende mostrar, los colores, el tipo de fuente, imágenes...
ENTREGA 2:
ENTREGA 2:
Entregar en Classroom de la página web definitiva.
Page updated
Report abuse