Diseño Digital 4
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Objetivos / Expectativas
Temática / Bibliografía
Comunicación / Convivencia
https://slides.com/miguelvallve/dd4/live#/
Yo
Desarrollo
Dirección
Docencia
...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083920/20431373_845777382255953_6939772652973003357_n.png)
...
Fing
Teacher
Recreación
Diseño (ORT)
Definición
La asignatura introduce al estudiante en el manejo del lenguaje HTML y CSS.
OBJETIVOS
- Comprender las diferentes características y lenguajes de las páginas web.
- Comprender la utilización y eficaz manejo de las herramientas utilizadas.
- Adecuarse a los avances tecnológicos del área por medio de la autocapacitación.
METODOLOGÍA
- Clases teórico-prácticas.
- Apoyatura de curso vía Internet.
- Lecturas guiadas.
Nota: El software a utilizar podrá ser actualizado en función
de futuros desarrollos tecnológicos.
Contenidos
- Introducción al diseño web. Internet, características y lenguaje.
- Conceptos de dominio y hosting.
- La imagen. Tratamiento de imágenes para su publicación en la Web. Los diferentes formatos de archivos.
- El lenguaje HTML5. Las bases del lenguaje HTML y su aplicación en el diseño de páginas Web.
- Tipografía e imagen. Trabajando con textos. Formatos. Inclusión de imágenes. Combinación y alineación de textos e imágenes.
- Hipervínculos. Concepto de hipervínculo. Vinculando a través de textos e imágenes. Vínculos internos y externos.
- Etiquetas HTML5 y conceptos de web semántica
- Introducción a CSS, aplicar estilos a los distintos elementos
- Tablas. Creación y uso de tablas en el diseño de páginas Web.
- Formulario. Creación de formularios interactivos en el diseño web.
- Cómo subir un sitio a la web, registro de dominio y hosting.
Bibliografía
- CSS3: the missing manual, McFarland, David Sawyer 3ra. ed.
- CSS3 for Web Designersm Cederholm, Dan 2
- Head first HTML5 programming: building web apps with JavaScript, Freeman, Eric;
- HTML5: the missing manual, MacDonald, Matthew;
- HTML5 Canvas: Native Interactivity and Animation for the Web
- Learning Web design: a beginner’s guide to HTML, CSS, JavaScript, and web graphics, Niederst Robbins, Jennifer 4ta. ed.
- Programming JavaScript applications, Elliott, Eric
BIBLIOGRAFÍA WEB
- http:/www.w3c.es/
- http://validator.w3.org/
- http://www.w3schools.com/
- https://developer.mozilla.org/es/docs/HTML/HTML5
- http://caniuse.com/
- https://stackoverflow.com/
- https://www.thinkwithgoogle.com
Comunicación
Clase
Aulas
Slack
Bedelías
Dictado de clases teórico-prácticas. Canal principal de consultas.
Instancia formal de comunicación.
Canales de participación offline, consultas y comunidad. Unirse
No le veo el sentido teniendo los primeros 3 pero... miguel.vallve@gmail.com
Otras Formalidades.
Código de conducta
Atender,
Preguntar,
Sugerir,
Criticar,
Apoyarse,
Google.
Copy/Paste,
Ansiedad,
Faltar a clases,
Redes sociales,
Celular,
Frustración.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083956/wrong_table_no_navigator_formula-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083957/mark-correct-tick-success-check-yes-circle-icon.png)
Clase 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4084274/frontend-technologies-2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HyperText Markup Language
- Todo se renderiza en HTML
- Estructura, huesos
- Conjunto de tags, metatags y atributos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4084334/zwHwH7N.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
Markup general
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4084348/html.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
<tag>...contenido...</tag>
<div > Contenedor / Divisor genérico </div >
<h1 > Título (único) en la página. </h1 >
<h2 > Subtítulo </h2 >... <h6 > Subtítulo de menor jerarquía </h6 >
<p > Párrafo </p >
<a href ="https://www.ort.edu.uy" > Texto del enlace </a >
< img src ="dd4.jpg" alt ="dd4" title ="Diseño Digital 4" width ="104" height ="142"/ >
< br />
< hr />
< em >
< strong >
< table >
< thead >
< tr >
< small >
< ul >
< ol >
< li >
< pre >
< section >
< article >
< link/ >
< meta >
< title >
< nav >
< option >
< script >
< select >
< th >
< tbody >
< td >
< tfoot >
< form >
< input >
< blockquote >
< sub >
< sup >
< header >
< footer >
< body >
< u >
< style >
< ifame >
< label >
< html > < figure >
< video >
<!-- -->
...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
<tag atributo="valor" ... >
href="https://www.ort.edu.uy" / "mailto:killtheboy@got.hbo.com"
src="dd4.jpg"
alt="dd4"
title="Diseño Digital 4"
width="104"
height="142"
itemscope itemtype="http://schema.org/Movie"
type="text"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
Picar un poco
- Analizar elementos
- Reprototipado
- Escribir Markup
- Inspeccionar elementos
Clase 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HyperText Markup Language
- Todo se renderiza en HTML
- Estructura, huesos
- Conjunto de tags, metatags y atributos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4084348/html.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
<tag>...contenido...</tag>
< br />
< hr />
< em >
< strong >
< table >
< thead >
< tr >
< small >
< ul >
< ol >
< li >
< pre >
< section >
< article >
< link/ >
< meta >
< title >
< nav >
< option >
< script >
< select >
< th >
< tbody >
< td >
< tfoot >
< form >
< input >
< blockquote >
< sub >
< sup >
< header >
< footer >
< body >
< u >
< style >
< ifame >
< label >
< html > < figure >
< video >
<!-- -->
...
<tag atributo="valor" ... >
href="https://www.ort.edu.uy"
src="dd4.jpg"
alt="dd4"
title="Diseño Digital 4"
width="104"
height="142"
type="text"
target="_blank"
style="color:green"
Cascading StyleSheets
- Posiciona, da forma y color
- Visual, piel
- Conjunto de selectores y reglas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4085073/css-rule.jpg)
Selectores
Etiquetas HTML: a, strong, p { font-size: 1em; }
Clases: .rojo { color:red; }
Identificadores: #contenedor { width:100%; }
Atributos: a[target="_blank"] { text-decoration: none; }
De interacción: a:hover {color:green;}
Estructurales: p:first-child { margin-bottom: 20px; }
Referenciales: #contendor p + img.foto { margin-left:0; }
Juego: CSS Diner
Clase 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Selectores
Etiquetas HTML: a, strong, p { font-size: 1em; }
Clases: .rojo { color:red; }
Identificadores: #contenedor { width:100%; }
Atributos: a[target="_blank"] { text-decoration: none; }
De interacción: a:hover {color:green;}
Estructurales: p:first-child { margin-bottom: 20px; }
Referenciales: #contendor p + img.foto { margin-left:0; }
Cascading StyleSheets
- Posiciona, da forma y color
- Visual, piel
- Conjunto de selectores y reglas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4085073/css-rule.jpg)
Cascading StyleSheets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4121610/tabla-css-declaraciones.png)
Prioridad?
- !important
- Especificidad > Generalidad
- Anidación
- Orden en DOM
Unidades
Absolutas
px | pixels (1px = 1/96th of 1in) |
pt | points (1pt = 1/72 of 1in) |
pc | picas (1pc = 12 pt) |
Relativas
em | Relativo al font-size del elemento |
rem | Relativo al font-size del elemento "raíz" |
vw | Relativo al ancho del viewport |
vh | Relativo al alto del viewport |
Modelo de Caja
ver box-sizing + background-clip
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4102447/isnpector.png)
Enchúlame la página
Html que hicimos la clase pasada.
1- Wireframe
2- Re-estructurar HTML
3- CSS
Requerimientos mínimos
cambio de colores de typo
color de fondo
Efectos over
Manejo de márgenes y paddings
4- Muestra General
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4122221/mv-dd4.png)
Clase 4 (feriado)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Clase 5
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4169842/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4169841/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4169839/4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4169840/3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4169838/5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4169837/6.png)
(ampliaremos)
Propiedades básicas de CSS
Layout
Bordes
Mágenes
Relleno
Alto / Ancho
Profundidad
Display
Posición
Flotación
Lecturas: w3 css intro + w3 css reference + moz css fundamentals
Herramientas: css3 maker + color adobe + colorcodes
Ejercicios: sencillos y guiados + Quiz CSS
Texto
Fuente
Tamaño
Decorado
Listas
Alineación
Columnas
Interlineado
Kerning
Decoración
Color
Fondo
Sombra
Opacidad
Filtros
Transformación
Animación
Blend modes
Clase 6
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Etiquetas HTML5
semánticas / estructurales /contextuales
section − una sección genérica de la página
main − especifica el contenido principal de la página
article − Un módulo de contenido independiente.
aside − Contenido secundario relacionado al contenido central
header − Cabezal del sitio
footer − Pie del sitio
nav − Sección destinada a poner links para navegar el sitio
figure − Envuelve contenido multimedia (foto, video, ilustración)
...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...</title> </head> <body> <header>...</header> <nav>...</nav> <section> <figure>...</figure>
</section>
<article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> </html>
Lecturas: elementos HTML + elementos semánticos HTML5
Inspeccionar: thinkwithgoogle + WF y reconocer etiquetas semánticas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209639/img_sem_elements.gif)
Imágenes digitales
formatos y tratamientos web
Pixel
Unidad de información mínima en pantalla.
Imagen
Dimensiones: pixels WxH - 400x300
Aspect-ratio: ancho/alto - 16:9
Resolución: pixels por pulgada (PPI) - 72ppi
Tamaño: dimensiones/resolución - 5.6″x4.2″
Peso: espacio en disco - 60kb
Dispositivo
Resolución*: pixels WxH - 1024x768
Densidad: pixels por pulgada (PPI) - 396ppi
Aspect-ratio: ancho/alto - 16:9
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191432/device-pixels.png)
Ilustración: Smashing Magazine
Imágenes digitales
conceptos básicos
Original
Promedio
Ilustraciones: Smashing Magazine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191431/css-pixels.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191430/css-device-pixels.png)
Imágenes digitales
dispositivos de alta definición / Pixel CSS
Pixel
Tamaño depende del dispositivo (densidad por pulgada).
Pixel CSS
Convención de desarrolladores web. Independiente del dispositivo: 160 pixels = 1 pulgada.
Dispositivo
Resolución*: pixels WxH - 1024x768
Densidad: pixels por pulgada (PPI) - 396ppi
Aspect-ratio: ancho/alto - 16:9
Pixel-ratio: Pixel / Pixel CSS - 2
Viewport: WxH / ratio
Imágenes digitales
ejemplos pixelares en retina display
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191428/html-sizing.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191427/css-device-bitmap-pixels.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191426/downsampling.png)
Downsampled en estándard
Cuando achicamos una imagen por css y la mostramos en un dispositivo estándar (pixel-ratio: 1), el dispositivo promedia los colores y presenta una versión simplificada de la imagen. La información de la imagen está intacta pero el dispositivo no permite verla toda.
Upsampled en estándar = Original en Retina
Una imagen (pixelar) duplica su cantidad de pixels en x e y. Si esta información no se encuentra en la imagen original, simplemente promedia colores para generar los pixels nuevos.
Original = Downsampled en Retina
Al mostrar esa misma imagen en un dispositivo de alta resolución (pixel-ratio:2+), puede mostrar toda la información en pantalla y no necesita promediar pixels.
Ilustraciones: Smashing Magazine
Imágenes digitales
formatos comunes para web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191762/vector-zoom.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191761/raster-zoom.png)
Pixelelares (jpg,gif,png)
Prenden y apagan pixeles de colores
Vectoriales (svg)
Se dibujan matemáticamente
BMP: Para web, mejor no.
JPG: Fotos, degradados, complejidad, color real.
GIF / PNG-8: pocos colores (256), transparencia dura (0/1). Además GIF permite animaciones simples.
PNG-24: compresión sin perdida, canal de transparencia, color real, complejidad media, no fotografías.
SVG (scalable vector graphic)
Es el único formato vectorial y por lo tanto escalable sin perdida de calidad. Se puede acceder al código fuente, modificar y animar (css/js). Recomendado para logos, iconos, ilustración sencilla.
Fuentes Iconográficas
Si bien termina siendo un set de SVGs, es recomendable utilizar fuentes iconográficas para mantener coherencia gráfica y funcional.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191831/google-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191811/google-1.png)
sin materiales
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191836/google-3.png)
Clase 7
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Imágenes digitales
repaso / ejemplos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191438/image.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209046/hamster-162x125.gif)
Formato: SVG
Animación: Javascript
Dimensiones: n/a
Peso: 13kb
Transparencia: Si
Profundidad de bit: n/a
Formato: GIF
Animación: Cuadro por cuadro
Dimensiones: 162x125
Peso: 23kb
Transparencia: No
Profundidad de bit: 8
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209297/iammi-250px.png)
Formato: PNG-8
Animación: No
Dimensiones: 250x214
Peso: 7kb
Transparencia: Si
Profundidad de bit: 8
Lecturas: formatos + imágenes adobe + retina +Profundidad de bit
Herramientas: optimizadores + icomoon + mydevice
Imágenes digitales
conceptos básicos
Formato: JPG
Animación: No
Dimensiones: 506x539
Resolución: 96ppp
Peso: 43kb
Transparencia: No
Profundidad de bit: 24
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209305/img-fb-post.jpg)
HTML5 Semántica
repaso / ejemplos
section − una sección genérica de la página.
main − especifica el contenido principal de la página
article − Un módulo de contenido independiente.
aside − Contenido secundario relacionado al contenido central de la página
header − Cabezal del sitio.
footer − Pie del sitio.
nav − Sección destinada a poner links para navegar el sitio.
figure − Envuelve contenido multimedia como ser una foto, video, ilustración.
Ejemplos: Webflow
figcaption − Pie de foto / contenido multimedia
time - Para definir una hora
details - define contenido a expandir (attr open) ejemplo
summary - texto visible de la etiqueta details
hgroup - Envuelve un grupo de títulos. Usualmente título y subtítulo.
blockquote - Especifica una cita (attr cita)
progress - genera una línea de progreso (pasos/download)
mark - "highlight" un texto dado
más - HTML5 Cheat Sheet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209815/html-sectioning-elements-00c3fd.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 Semántica
repaso / ejemplos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209789/semantic-html-ffab7c.png)
ilustraciones Internetishard.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 Semántica
repaso / ejemplos
ilustraciones Internetishard.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209829/html-article-element-82490e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 Semántica
repaso / ejemplos
ilustraciones Internetishard.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209828/html-header-element-7b4e01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 Semántica
repaso / ejemplos
ilustraciones Internetishard.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209827/html-nav-element-d1e716.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 Semántica
repaso / ejemplos
ilustraciones Internetishard.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209826/html-footer-element-0c927a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 Semántica
repaso / ejemplos
ilustraciones Internetishard.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4209825/html-aside-element-ce120b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
HTML5 <nav>
navegación entre páginas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
Lecturas y ejemplos: w3 navbars, topnav, adam-bray,
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4214323/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4214326/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4214335/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4214345/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4214354/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4214362/pasted-from-clipboard.png)
Ejercicio <nav>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083850/HTML5_Logo_512.png)
Ejercicio Netbeans
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4121652/netbeans-free-download.png)
- Tomar la img en alta desde esta miniatura >
- Estudiar Wireframe
- Escribir boceto de html en papel
- Crear proyecto: CV-{nombre}
- Crear HTML para reproducir el wireframe
- Crear archivo CSS y vincularlo al HTML
- Definir reglas para posicionar los elementos
- Visualizar en Chrome
- Utilizar etiquetas semánticas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4122208/CV-WF.jpg)
Clase 8
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4191836/google-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4240549/pasted-from-clipboard.png)
Background
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-attachment
- background-origin
- background-clip
Lecturas: w3 - background + moz dev
Ejemplo: clip, size, pos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4241004/background-clip-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4241003/background-clip-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4241002/background-clip-2.png)
Continuar: Ejercicio Netbeans
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4121652/netbeans-free-download.png)
- Tomar la img en alta desde esta miniatura >
- Estudiar Wireframe
- Escribir boceto de html en papel
- Crear proyecto: CV-{nombre}
- Crear HTML para reproducir el wireframe
- Crear archivo CSS y vincularlo al HTML
- Definir reglas para posicionar los elementos
- Visualizar en Chrome
- Utilizar etiquetas semánticas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4122208/CV-WF.jpg)
Clase 9
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
En aulas: Mockup dado en PDF e Imágenes
Conceptos que ya manejan
Texto: títulos, párrafo, links, listas, negrita, itálica, etc
Caja: margin, padding, border, width, height, display.
Imagen: figure, figcaption
Atributos: alt, title, src, href, target, class
CSS: efectos hover, color de texto y fondo, familia tipográfica (pesos y fallbacks), tamaño de texto, decoración, alto de línea, etc
Profundizar
Clase 10
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313065/html-form-elements-939709.png)
Lecturas: form, internet is hard
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313072/form-action-attribute-68258a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313097/label-element-for-attribute-313489.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313100/sending-input-variable-to-server-653369.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313230/radio-label-fieldset-legend-elements-0affe5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313230/radio-label-fieldset-legend-elements-0affe5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313231/select-dropdown-in-iphone-a9968d.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313232/chrome-invalid-email-input-3ae531.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4313187/responsive-form-mockup-963e65.png)
Clase 11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
CODE 2✔
PARCIALES - HTML5/DEMOS - NEWSLETTERS
☻
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418565/layout.png)
Parcial 2016
Deberá desarrollar versión HTML del boceto entregado como ejemplo.
Es necesario generar archivo CSS externo (usara un solo archivo css).
En total serán 2 archivos HTML, 1 CSS e imágenes necesarias para el desarrollo del sitio.
Pautas Generales
- Generación de HTML similar al de la muestra (en navegador).
- Todas las páginas deben tener definida la etiqueta TITLE.
- El menú debe ser desarrollado con listas.
- Las imagenes deben tener definido el atributo alt.
- Los textos no deben ser imágenes.
- Trabajo con seudoclases (a, a:hover)
- Debe ser posible la navegación entre las páginas.
- Desarrollo de formulario, de acuerdo a los parámetros vistos en clase (uso de etiqueta label).
- Campos obligatorios: Nombre, Email, Comentarios
Guardar en una carpeta con nombre de estudiante dentro de la carpeta donde se encuentran los materiales
Parcial 2016
Especificaciones
- Tipografía utilizada "Century Gothic", "Lucida Sans Unicode" ,sans-serif
- Colores menu fondo:#000, texto: #fff seleccionado #426B2B
- Colores menu hover borde #426B2B
- Títulos color #426B2B | #fff
- Párrafos color #000000
Tamaños tipografía
- Encabezados 60px | 24px
- Parrafos 16px
- Lista 16px
- label 16px
Contacto
- Botones enviar Color de fondo#426B2B, color #fff
- select tarifas: Salto, Canelones, Florida, Soriano, Cerro largo
- focus color #426B2B
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4338803/captura_contacto.png)
Clase 12
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385498/chart.png)
Mapa
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385497/chart__1_.png)
Estructura HTML
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385496/chart__2_.png)
Semántica HTML
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385495/chart__3_.png)
Selectores y Declaraciones CSS
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385494/chart__4_.png)
Model de Caja
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385493/chart__5_.png)
Optimización del código (CSS)
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385492/chart__6_.png)
Interfaz
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385491/chart__7_.png)
Experiencia de Usuario
Devolución de Entregas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385527/chart__9_.png)
Proyecto
Clase 13
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
Lecturas: tables, tablas, atributos para no usar más!
Tablas
table
thead
tbody
tfoot
th
th
th
td
td
td
td rowspan=2
td
td
td
colspan=2
tr
thead = encabezado de la tabla
tbody = cuerpo de la tabla
tfoot = pie de la tabla
tr = fila de la tabla (table row)
td = celda (table data)
rowspan = alcance de filas
colspan = alcance de columnas
Tablas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4387390/Tablas__1_.png)
Estilos y Tablas
vertical-align
top | middle | bottom: alinea el contenido de la celda el la vertical
white-space
nowrap | normal: controla el "espacio" entre palabras, si debe o no ir a otra línea
border-collapse
collapse | separate: une los border o los separa
border-spacing
Xpx: si el border-collapse: separate podemos definir cuánta es dicha separación
table-layout
auto | fixed: por defecto las celdas se ajustan al contenido, pero se puede establecer anchos fijos para cada celda.
Estilos y Tablas : default
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray }
thead { display: table-header-group; vertical-align: middle; border-color: inherit }
tbody { display: table-row-group; vertical-align: middle; border-color: inherit }
tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit }
table > tr { vertical-align: middle; }
col { display: table-column }
colgroup { display: table-column-group }
tr { display: table-row; vertical-align: inherit; border-color: inherit }
td, th { display: table-cell; vertical-align: inherit } th { font-weight: bold }
caption { display: table-caption; text-align: -webkit-center }
Un reset muy útil de Meyer Reset
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4385562/img.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4388030/table-nest.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4388034/Get-HTML-Table-Cell-Value.png)
Última clase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4083860/HTML5_CSS_JavaScript.png)
Materia: DD4
Universidad ORT
Docente: Miguel Vallvé
soon enough
rock it
got it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418580/wireframe-dovhyi.gif)
Planifica
Elige tus armas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418576/WEAPON-OF-CHOICE.png)
Cajas: tamaño y posición
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418683/Templates.jpg)
Contenido e interacción
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418581/vr_hazard_app_user_flow.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418715/Creative-Spark1.png)
Terminación
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418755/jazzro-low-cost-web-design-build-a-low-cost-awesome-design-and-great-functionality.png)
OBJETIVOS
- Comprender las diferentes características y lenguajes de las páginas web.
- Comprender la utilización y eficaz manejo de las herramientas utilizadas.
- Adecuarse a los avances tecnológicos del área por medio de la autocapacitación.
Contenidos
Introducción al diseño web. Internet, características y lenguaje.Conceptos de dominio y hosting.- La imagen. Tratamiento de imágenes para su publicación en la Web. Los diferentes formatos de archivos.
- El lenguaje HTML5. Las bases del lenguaje HTML y su aplicación en el diseño de páginas Web.
- Tipografía e imagen. Trabajando con textos. Formatos. Inclusión de imágenes. Combinación y alineación de textos e imágenes.
- Hipervínculos. Concepto de hipervínculo. Vinculando a través de textos e imágenes. Vínculos internos y externos.
- Etiquetas HTML5 y conceptos de web semántica
- Introducción a CSS, aplicar estilos a los distintos elementos
- Tablas. Creación y uso de tablas en el diseño de páginas Web.
- Formulario. Creación de formularios interactivos en el diseño web.
Cómo subir un sitio a la web, registro de dominio y hosting.
¿Cumplimos?
Gracias
¿qué hacemos con ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/429581/images/4418792/175x175bb.png)
Anótense al parcial con tiempo
Metan un poco de cabeza en la evaluación docente
DD4 - hasta 2017
By Miguel Vallvé
DD4 - hasta 2017
Seguimiento de clases
- 3,176