• Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación
 
 
Curso 2020/2021 | 2º BACHILLERATO

 Tecnologías de la Información y la Comunicación | TIC-II 

icon html5
icon css3
icon css3


Artículos

#04 - Tipografías web

Algunas veces nos encontramos con un tipo de fuente que nos resulta bonita, si la utilizamos en nuestro sitio Web probablemente sólo nosotros la vemos (porque sólo está en nuestro ordenador). Es decir, la tipografía de una página web se ve tal y como es si dicha fuente está instalada en el ordenador del usuario que está visitando la página.

Objetivos

  • Aprender las distintas formas de utilizar tipografías en una página web
  • Conocer los sitios web más utilizados por los diseñadores que nos permiten descargar y/o utilizar "tipografías no estandar"
  • Manejar distintos tipos de fuentes tipográficas, obtenidas de Google Font.

Antes de realizar esta tarea es conveniente leer el artículo [ Tipografías Web ]

Observaciones referentes a diseño adaptable a dispositivos:
  1. Las etiquetas de decisión CSS que comienzan con @media... deben ser las últimas del archivo CSS
  2. Es necesario poner dentro de la etiqueta head el elemento meta siguiente, para que el navegador responda al dispositivo:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ejemplo de como podría quedar tu tarea

Ejemplo de como podría quedar tu tarea

Utiliza lo aprendido en clase para crear una página parecida a esta utilizando 4 tipos de fuentes tipográficas distintas a las del ejemplo (la palabra tipografía del ejemplo no es un tipo de letra sino que está construida con CSS puro):

tripografia

Código del ejemplo

Código del ejemplo

Ver CODE-PEN del artículo [ Tipografías Web ]


Coloca dentro de las etiquetas de cabecera head la siguiente etiqueta:

<meta name="author" content="(cc) tuNombre" />

Comprime, con 7zip, toda la carpeta de tu proyecto (tarea) y guárdala en tu tarjeta de memoria y en una nube (Drive o onDrive) con el nombre t12_tipografia.7z. Más tarde la enviarás al Aula Virtual y al VPS (Servidor Privado Virtual).

 

Etiquetas: 2ª Evaluación, CSS

  • Anterior
  • Siguiente

Teoría

Guías completas

Guías completas

  • LibrosWeb HTML
  • Vocabulario HTML
  • Guía HTML5 y HTML
  • Guía CSS 2.1 y CSS3
  • Guía JavaScript
  • HTML Reference
  • CSS Reference
Cheat Sheets

Cheat Sheets

html css js

  • HTML CheatSheet
  • CSS CheatSheet
  • JS CheatSheet

Herramientas

Para Código

Para Código

  • Sublime-Text | Ext.
  • Visual Studio Code | Ext ≡
  • Preprocesador: Prepros
  • Editor online: CodePen
Otras ...

Otras ...

  • Cliente - FTP: Filezilla
  • Capturador: PicPick
  • Visor: Sumatra-PDF
  • Acrobat Reader - PDF
  • Compresor: 7zip
  • Reproductor: VLC
  • MathJax - AsciiMath
Portables

Portables

  • Visual Studio Code [Ext]
  • Sublime Text
  • Sumatra PDF
  • Chrome Portable
  • Opera Portable
  • FireFox Portable
Código BASE

Código BASE

  • Template: base1_tareas
  • Template: base2_layout
  • Template: base3_menu
  • Imágenes: HDWallpapers
Hosting

Hosting

  • DriveToWeb [•]
  • Ejemplo

(cc) 3con14, esta obra está bajo licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación