En la pasada clase del viernes (Sección 4), Roberto Smart preguntó sobre buenos sitios donde poder ver CSS aplicado a la tipografía.
Ahora gracias a 3.7 Designs (www.3point7designs.com) les dejo un par de links bastante interesantes.
25+ Sites that use typography as the only design element: Muestra de los mejores 25 sitios que usan la tipografía como único elemento de diseño o elemento principal dentro del sitio. Buena guía para inspirarse y ver buen uso tipográfico en la web.
10 Examples of beutiful CSS typography and how they did it: Aquí hay 10 buenos ejemplos de uso tipográfico, pero lo más interesante de todo es que nos muestran el código CSS para saber como está hecho. Excelente guía para quienes aún están complicados con la tarea de ayudantía.
Esta semana se viene la primera nota de este proceso. Para este miércoles/jueves deberán entregar lo mismo de la semana pasada, pero con las correcciones aplicadas.
Por favor pongan especial cuidado en la investigación, la redacción de los textos, ortografía, rótulos, modulación de los párrafos y el “diseño” de las páginas. Es importante que incluso cuando un sitio sólo contiene texto sea agradable a la lectura. Para esto recomiendo mirar sitios como CSS Beauty o CSS ZenGarden y fijarse específicamente en cómo están diseñados los textos.
Adicionalmente, deberán traer un boceto/maqueta/mock-up en formato jpg o png de cómo quieren que se vea finalmente su mini-sitio. En colores y a tamaño (72 dpi). Esto no es con nota, es sólo para corrección. Ojo que mientras más complejo el layout, más se van a complicar, así que los que todavía tengan dificultades háganlo sencillito. Aquí cada uno propone su nivel de dificultad.
Ah, y no se aceptan entregas atrasadas. Si alguien tiene que faltar, me lo manda al mail dentro del horario de clases. Dudas por acá o al mail. ¡Nos vemos!
El siguiente paso en la creación del mini-sitio es el siguiente (bueno ya, no es uno, son varios):
Separar la investigación en las páginas que constituirán el mini-sitio
Agregar etiquetas body y cabecera (head) a cada una de las páginas
Guardar los cinco (o más) archivos resultantes con la extensión .html
Crear un archivo de hoja de estilos (css) y vincularlo a los documentos html
Asignar estilos a las etiquetas utilizadas en los documentos html
NO USAR ELEMENTOS CONTENEDORES (sin divs por el momento)
Pueden agregar imágenes al contenido
Además, deberán completar la investigación y añadir etiquetas (que era la tarea para esta semana, muchos se equivocaron, otros no la hicieron, así que esto debe estar terminado la próxima clase).
Para facilitarles la tarea, les hice este pdf y lo subí a mi sitio mejor, así lo descargan al toque. En la segunda página aparecen las etiquetas body y cabecera que tienen que agregar, así como la forma correcta de vincular una hoja de estilos a los documentos. Después hay una pequeña guía simplificada y amigable sobre css para los que tengan miedo (y para los que no también). Esto no quiere decir que deban utilizar todos los atributos que se detallan ni tampoco que no puedan usar otros que conozcan, es sólo una guía.
Cualquier pregunta, háganla aquí mismo, así nos ayudamos entre todos. Saludos!!
Ah!!! Y sí, es para la próxima semana. Todo en una carpetita.
Encuesta de Consumidores Digitales Chilenos, una iniciativa de AyerViernes con el apoyo de Política Stereo y IAB Chile, para analizar las prácticas y tendencias de los usuarios en internet.
A la luz de los estudios realizados por la gran mayoría en relación a la experiencia de usuario frente a las compras online en tiendas de retail chilenas, creo que pueden aportar bastante en esta encuesta.
El link: http://www.surveymonkey.com/s.aspx?sm=6Qt5c00rOMddzZNMJ7cIHA_3d_3d
Les dejo una muestra de cómo debería verse el texto de su investigación sobre el objeto de diseño que seleccionaron (ojo que no es necesario que las etiquetas sean azules, lo hice así sólo para destacarlas). En la segunda página aparecen las etiquetas que pueden utilizar, como ven no son tantas y se deben acordar de la mayoría. Ojalá les sirva y nos vemos la próxima semana. Cualquier duda, ya saben.
Como lo conversamos en clases, éste será el formato de entrega de las láminas personales de ahora en adelante. Cualquier duda, comentario o aporte se puede plantear aquí mismo.
