Tecnologías de Internet: Facultad de Ingeniería Ingeniería Multimedia Karin Marroquín

TECNOLOGÍAS
DE INTERNET
FACULTAD DE INGENIERÍA
INGENIERÍA MULTIMEDIA
KARIN MARROQUÍN
USABILIDAD
Capacidad del producto software para ser entendido, aprendido, usado y
resultar atractivo para el usuario, cuando se usa bajo determinadas
condiciones. ISO/IEC 25010
ü Tiempo de carga.
ü Fácil Acceso
ü Diseño
ü Coherencia
Tecnologías de Internet 2
EXPERIENCIA DE USUARIO
“Todo lo que el usuario ve, toca o piensa respecto de la aplicación, los flujos de
la aplicación, las características, las entradas requeridas, la forma en que se
presenta las salidas”. Platt, David. (2016).The Joy of UX: User Experience and
Interactive Design for Developers.
Confianza, Utilidad, Seguridad.
• Resolver un problema específico:

Usuarios más productivos
• Usuarios felices: Placer
Tecnologías de Internet
3
Ponerse en los
zapatos del usuario
CAPAS FRONTEND
• Crear archivos separados

• Definir clases en CSS.
ESTRUCTURA
HTML
<tagname>Contenido</tagname>
SINTÁXIS - HTML
ESTRUCTURA PÁGINA HTML
10
HTML5
DOCTYPE: LE INDICA AL NAVEGADOR LA VERSIÓN DEL

HTML.
HTML 4 Y XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5: <!DOCTYPE html>
CHARSET ENCODING:
<meta charset="UTF-8" />
11
TIPOS DE CONTENIDO - HTML
12
HTML5 MAQUETADO (LAYOUT)
Estructura
• <div>
• <header>
• <footer>
• <nav>
• <iframe>
• <area>
Semántico
• <section>
• <article>: Es utilizado en entradas de blogs y foros.
13
HTML - BROWSER OBJECT MODEL
window object: Esta en el top de la jerarquía, representa el contenido de la

ventana del browser. En un ambiente multi-frame, cada frame es también una
ventana.
document object: Documento HTML que se carga dentro del objeto window.
No es estándar y depende de los navegadores.
14
HTML - DOCUMENT OBJECT MODEL
HTML - DOCUMENT OBJECT MODEL
HTML - EVENTOS
Eventos Ejemplo
Globales Aplican a todos los elementos

Aplica al tag <body>. Ejemplo: onload, onunload, onresize,
Objetos de tipo window
onpageshow, onpagehide, etc.
Eventos disparados por acciones de teclado: onkeydown, onkeyup,
Teclado
onkeypress.
Eventos disparados por acciones del mouse: onclick, odblclick,
Mouse
onmousedown, onmouseover, onwheel, etc.
Eventos que aplican a casi todos los elementos dentro del tag
Formularios
<form>. Ejemplo: onsubmit, onselect, onfocus, onblur, oninput, etc.
Eventos disparados por elementos multimedia (<audio>, <video>,
Media <img>). Ejemplo: onabort, onended, onplay, onprogress,
onplaying, onpause, onwaiting, etc.
Eventos disaparados ante acciones de arrastre de objetos dentro
Arrastre (Drag) de la página (Drag and Drop). Ejemplo: ondrag, ondrop, onscroll,
ondragstart, ondragover,etc.
Eventos disparados por acciones del portapapeles: oncopy,
Portapapeles (clipboard)
onpaste, oncut.
Eventos de menú y para abrir o cerrar detalles de un elemento:
Otros
onshow, ontoggle.
EJERCICIO #1 - FORMULARIO
CONSTRUIR UNA PÁGINA WEB:
1. FORMULARIO PARA REGISTRO:

• NOMBRE
• DOCUMENTO
• FECHA DE NACIMIENTO
• CORREO ELECTRÓNICO
• CLAVE
• TIPO DE PRENDA (LISTA DE SELECCIÓN: CAMISA,
CAMISETA, BUZO)
• SELECTOR DE OPCIÓN ÚNICA - (TALLA XS, X, M, L)
• INDICAR UN COLOR
2. EL NOMBRE Y EL DOCUMENTO SON REQUERIDOS.
3. SE DEBE VALIDAR EL CAMPO DE CORREO ELECTRÓNICO.
18
HTML - FORMS
• Input type radio

• Input type Checkbox
• Input search y otros.
19
CAPAS FRONTEND
• Crear archivos separados

• Definir clases en CSS.
HOJAS DE ESTILOS - CSS
HTML Style:
• Cambiar tamaño, fuente y color del texto.
<tagname style="property:value;">
• Alineación de los elementos. (Centro,
Izquierda, Derecha)
property: Propiedad de la CSS • Color del fondo: background-color
value: Valor de la CSS
CSS:
• Inline: <h1 style="color:blue;">Este es un encabezado azul</h1>
• Internal: <style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
• External: <link rel="stylesheet" href="styles.css">
HOJAS DE ESTILOS – CSS3
Selectores
h1 {
color: blue;
font-family: verdana; Tipo: Aplica para todos los
font-size: 300%; elementos que tengan ese tag
}
#p01 {
color: blue; ID: Aplica solo para el elemento
} con id =01
EJERCICIO #1 - FORMULARIO
CONSTRUIR UNA PÁGINA WEB:
1. FORMULARIO PARA REGISTRO:
• NOMBRE
• DOCUMENTO
• FECHA DE NACIMIENTO
• CORREO ELECTRÓNICO
• TIPO DE PRENDA (LISTA DE SELECCIÓN:
CAMISA, CAMISETA, BUZO)
• SELECTOR DE OPCIÓN ÚNICA - (TALLA XS, X,
M, L)
• INDICAR UN COLOR
2. EL NOMBRE Y EL DOCUMENTO SON REQUERIDOS.
3. SE DEBE VALIDAR EL CAMPO DE CORREO
ELECTRÓNICO.
23
SELECTORES – CSS3
Selectores
h1[title] { Atributo: Aplica para el atributo
border: 1px solid #000000; “Title”
}
<style>
.center { Clase: Aplica solo para el los
text-align: center; elementos cuyo atributo class =
color: red; “.center”.
}
</style>
* {
Universal: Aplica para cualquier
border: 1px solid #000000;
elemento
}
SELECTORES – CSS3
SELECTORES – CSS3
COMBINATORS – CSS3
PERMITEN CONSTRUIR SELECTORES COMPUESTOS A PARTIR DE SELECTORES MÁS SIMPLES.
Combinador de hijos (Child combinator):

Permite crear selectores que referencian
elementos hijos inmediatos de elementos
específicos
Combinador de descendientes (Descendant combinator): Permite referenciar a elementos

descendientes en cualquier lugar de la jerarquía.
Ejemplo:
CSS:
h1 em { … }
HTML:
<h1>This <span class="myclass">headline is <em>very</em>
important</span></h1>
En este caso el selector hace referencia al elemento <em> que es hijo del elemento
<span>, que a su vez es hijo del elemento <h1>, el selector indicado, seleccionará
todos los elementos <em> hijos, nietos, etc. que tenga el elemento <h1>. Note que en
este caso el combinador es “Espacio en Blanco”.
COMBINADOR DE HERMANOS ADYACENTES (ADJACENT SIBLING COMBINATORS):
Adyacente Directo: Permite seleccionar un elemento que viene inmediatamente después

de otro, en el mismo nivel de jerarquía
Ejemplo:
CSS:
h3 + p { … }
HTML:
<h3>Mi encabezado</h3>
<p id=”p1”>Párrafo 1</p>
Para el ejemplo presentado, el selector referenciará al elemento <p> con id =
“p1”, el cual es el hermano inmediatamente posterior al elemento <h3>, si en la
página existieran otras estructuras similares, aplicaría para todas.
COMBINADOR DE HERMANOS ADYACENTES (ADJACENT SIBLING COMBINATORS):
Adyacente Indirecto: Permite seleccionar determinado elemento o elementos que están

en el mismo nivel de jerarquía pero no inmediatamente posterior a determinado
elemento.
Ejemplo:
CSS:
h3 ~ p { … }
HTML:
<h3>Mi encabezado</h3>
Para el ejemplo presentado, el selector referenciará a los 4 elementos <p> que son
hermanos del elemento <h3>.
CSS – COLORES
• Hexadecimal: 6 caracteres
• Hexadecimal shorthand : 3 caracteres
• RGB: Tres porcentajes que representan la intensidad de los colores
red, green y blue
• RGB—Three decimal numbers representing the intensity of red, green,
and blue on a scale of 0 to 255
• HSL— Matiz, saturación y tonalidad:
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green,
and 240 is blue.
• Saturation is a percentage value, 0% means a shade of gray, and 100%
is the full color.
• Lightness is also a percentage, 0% is black, 50% is neither light or dark,
100% is white.
• Transparency or alpha cannel: Especificar opacidad.
CSS – BOX MODEL
CSS – BORDES
selector { border: style width color; }
Siempre debe definirse border-style,

Border Style:
para que se apliquen los demás
• none,
atributos.
• dotted,
• dashed, Ejercicio 1
• solid,
• double,
• groove,
• ridge, Ejercicio 2
• inset,
• outset,
• inherit.
CSS – MARGINS, PADDINGS
Margins: Paddings: Generar espacios alrededor del

• margin-top contenido de un elemento, dentro de
• margin-right cualquier borde.
• margin-botom • padding-top
• margin-left • padding-right
• margin: auto; Centrar horizontalmente el • padding-bottom
elemento dentro de su contenedor. • padding-left
• margin-left: inherit; Hereda el valor del margen
del elemento padre.
margin: top right bottom left; Abreviado.
CSS - FLEXBOX
UNA DIMENSIÓN.
CSS - GRID
DOS DIMENSIONES.
EJERCICIOS FLEXBOX #2
CSS – FLEXBOX
Flexbox – Diseño de una estructura flexible, web responsive.
BIBLIOGRAFÍA
• http://www.forbes.com/sites/jacobmorgan/2014/05/13/simple-explanation-
internet-things-that-anyone-can-understand/#708bcce56828
• https://www.youtube.com/watch?v=_AlcRoqS65E

Tecnologías de Internet: Facultad de Ingeniería Ingeniería Multimedia Karin Marroquín

Cargado por

Copyright:

Formatos disponibles

Tecnologías de Internet: Facultad de Ingeniería Ingeniería Multimedia Karin Marroquín

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tecnologías de Internet: Facultad de Ingeniería Ingeniería Multimedia Karin Marroquín

Cargado por

Copyright:

Formatos disponibles

TECNOLOGÍAS

Confianza, Utilidad, Seguridad.

• Resolver un problema específico:

• Usuarios felices: Placer

• Crear archivos separados

DOCTYPE: LE INDICA AL NAVEGADOR LA VERSIÓN DEL

HTML 5: <!DOCTYPE html>

window object: Esta en el top de la jerarquía, representa el contenido de la

Globales Aplican a todos los elementos

1. FORMULARIO PARA REGISTRO:

2. EL NOMBRE Y EL DOCUMENTO SON REQUERIDOS.

3. SE DEBE VALIDAR EL CAMPO DE CORREO ELECTRÓNICO.

• Input type radio

• Crear archivos separados

PERMITEN CONSTRUIR SELECTORES COMPUESTOS A PARTIR DE SELECTORES MÁS SIMPLES.

Combinador de hijos (Child combinator):

Combinador de descendientes (Descendant combinator): Permite referenciar a elementos

COMBINADOR DE HERMANOS ADYACENTES (ADJACENT SIBLING COMBINATORS):

Adyacente Directo: Permite seleccionar un elemento que viene inmediatamente después

COMBINADOR DE HERMANOS ADYACENTES (ADJACENT SIBLING COMBINATORS):

Adyacente Indirecto: Permite seleccionar determinado elemento o elementos que están

selector { border: style width color; }

Siempre debe definirse border-style,

Margins: Paddings: Generar espacios alrededor del

margin: top right bottom left; Abreviado.

También podría gustarte