Diseño de una publicación digital Curso: Medios digitales Dra. Lyudmyla Yezers´ka.

Presentación del tema: "Diseño de una publicación digital Curso: Medios digitales Dra. Lyudmyla Yezers´ka."— Transcripción de la presentación:

1 Diseño de una publicación digital Curso: Medios digitales Dra. Lyudmyla Yezers´ka

2 Lenguaje HTML HTML – Hyper Text Markup Lenguage – Lenguaje de Marcas para Hipertexto Documento HTML – es un archivo de texto Los comandos (tags o marcas) se escriben en los símbolos Los interpretes HTML no toman en cuenta: – Las tabulaciones – Los saltos de línea – Los espacios en blanco Símbolo & se usa para escribir caracteres especiales (símbolos matemáticos, comerciales, acentos...)

3 Lenguaje HTML Para empezar el diseño de un site: – Tener una idea de lo que quieres hacer ¿ Que necesitas ? – Un editor de textos simple – Bloc de Notas – para escribir código HTML – Un navegador de Internet (Browser) para visualizar la Página Web. Internet Explorer Google

4 Estructura de un documento HTML Título Texto y gráficos.................... Nombre autor, organización, Fecha, etc... Cabecera Pie Cuerpo

5 Elementos compositivos de la web Elementos textuales Elementos gráficosRecursos visuales Títulos Subtítulos Encabezados Entradillas Enlaces Recursos multimedia Infografía Dibujos Galerías Fotos Vídeo Audio Frames Tablas Mapas Formularios

6 Formato de los caracteres Formatos físicos: –... Negrita –... Cursiva –... Subrayado –... Tachado –... Subíndice –... Superíndice –... Máquina escribir

7 Formato de los caracteres Formatos lógicos: –... texto con formato cita –... texto formato definición –... texto con formato código –... texto con formato teclado –... texto con formato ejemplo –... texto con formato variable –... texto con formato importante –... texto con formato énfasis – … texto preformateado

8 Características de párrafo Etiquetas más frecuentes: – Salto de párrafo – Salto de línea – Línea de separación – &nbsp Espacio en blanco extra entre palabras

9 Comandos de encabezamiento Existen 6 niveles de encabezamientos: – Nivel de encabezamiento 1 Más grande – Nivel de encabezamiento 2 – Nivel de encabezamiento 3 – Nivel de encabezamiento 4 – Nivel de encabezamiento 5 – Nivel de encabezamiento 6 Más pequeño

10 Etiqueta Size – atributo de tamaño de fuente – Directo: El tamaño de letra es 4 – Por incremento: Size= +n o size= -n Tamaño será 5 (3+2) – Tamaño base del documento (por defecto 3)..........................................................

11 Etiqueta Color – atributo de color de fuente Frase de color azul Ejemplo: Frase de color rojo Códigos hexadecimales de colores básicos: Blanco:# FFFFFFAzul:#0000FF Negro:# 000000Violeta:#9900DD Amarillo: #FFFF00Rosa:#FFDDFF Rojo:#FF0000 Verde:#00FF00

12 Etiqueta Face – atributo de tipo de fuente – Tipos de fuente Colores del documento en la etiqueta...............

13 Alineación de texto................ preformateado. Respeta espacios, saltos de línea y los retornos utilizados Separadores horizontales - cambiar ancho - alineación - espesor

14 Practicar: http://www.codecademy.com

15 Listas Ordenadas Introducción Primer capítulo <LI Segundo capítulo Resultado: 1. Introducción 2. Primer capítulo 3. Segundo capítulo Atributos: - inicio de la lista del número distinto de 1 - numeración romana Valores para TYPE: I – numer. Romana mayúsculas i – numer. Romana minúsculas A – letras mayúsculas a – letras minúsculas

16 Ejemplo: Introducción La Primera Página Escribir texto

17 Listas No-Ordenadas Introducción Primer capítulo Segundo capítulo <UL Type = “square” <UL Type = “Circle” Listas anidadas: Mamíferos Peces Sardina Bacalao Aves

18 Listas de Definición Ejemplo: Introducción Breve introducción al lenguaje La primera página Como hacer la primera página Escribir texto Empieza a dar formato al texto Resultado: Introducción Breve introducción al lenguaje La primera página Como hacer la primera página Escribir texto Empieza a dar formato al texto

19 Enlaces Estructura general: yyy – xxx – destino, “target” – URL de otra página o ruta/nombre de la página – yyy – ancla “anchor” – (texto o objeto gráfico) 1. Ir a otra página en mismo proyecto 2. Ir al Yahoo 3. Ir a la marca............................... 4. Mi E-Mail 5. Pulsa aquí para llevar manual

20 Imágenes Estructura general: 1. - archivo de imagen esta en la misma carpeta que la pág. Web. 2. - archivo de imagen esta en otra carpeta respecto la pág. Web 3. - la pág. Web esta en otra carpeta respecto al archivo de imagen

21 Atributos de Imágenes alt = “Texto” – mostrar texto de ayuda al poner mouse align = TOP / MIDDLE / BOTTOM – alinea texto border = tamaño – tamaño del borde height = tamaño - alto de la imagen en puntos o % width = tamaño – ancho de la imagen en puntos o % hspace = margen – separa imagen del texto horisontalmente vspace = margen - separa imagen del texto verticalmente

22 Ejemplos: yyy destinoancla 1. Enlace a otra página 2. Enlace imagen con otra imagen 3. Texto para enlazar con una imagen un paraíso tropical Recursos para Web: http://www.areas.net/colorvivo/home.htm

23 Atributos de tag Color de fondo de Web :....... Imagen de fondo....... Color de texto....... Color de enlaces LINK = “color” – color de vinculo VLINK = “color” – color de vínculos visitados ALINK = “color” – color de vínculos activos

24 Tablas Para insertar la Tabla: y Tabla esta compuesta por: – Filas que se definan: y – Celdas que se definan: y -celda normal – Celdas: y - celda de cabecera Titular de tabla: – Texto

25 Ejemplo Fila1 Col1 Fila1Col2 Fila2 Col1 Fila2 Col2 Fila1 Col1Fila1 Col2 Fila2 Col1Fila2 Col2

26 Atributos de la directiva border = num – ancho de borde de la tabla en puntos cellspacing = num – espacio en puntos que separa las celdas que estan dentro de la tabla cellpadding = num – espacio en puntos que separa el borde de la celda y el contenido width = num o % – anchura de la tabla height = num o % – altura de la tabla bgcolor = código de color – color de fondo de la tabla

27 Atributos de las directivas y align = LEFT / CENTER / RIGHT / JUSTIFY – alineación horizontal del contenido de la celda valign = TOP / MIDDLE / BOTTOM – alineación vertical del contenido de la celda rowspan = num – número de filas que ocupará la celda colspan = num – número de columnas que ocupará la celda width = num o % – anchura de la columna height = num o % – altura de la columna bgcolor = código de color – color de fondo de elemento de la tabla

28 Cabecera del documento html Currículo de Lyudmyla Yezerska

29 ………………………

30 Mapas Para transformar una imagen en mapa sensible, hay que hacer 3 tareas: 1. Reconocer las coordenadas interns de los sectores activos de la imágen 0,0 x1, y1 radio x1, y1 x2, y2 x1, y1 x2, y2 x3, y3 x4, y4 menu.jpg

31 Mapas 2. Confección de “mapa” de direcciones. Definición de zonas. (Al principio del documento, luego de 3. Insertar instrucción en la etiqueta de la imagen