Manual 2015 I Arquitectura De Entornos Web

Arquitectura de
Entornos Web

2

CARRERAS PROFESIONALES

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

3

ÍNDICE
Presentación

5

Red de contenidos

7

Unidad de aprendizaje 1
Fundamentos de un Proyecto Web y Elementos Gráficos

9

1.1 Tema 1

Fundamentos de un proyecto web

11

1.1.1. :

Generalidades

11

1.1.2. :

Etapas de un proyecto web

25

Elementos gráficos para la web

57

1.2.1. :

Manejode un editor de imágenes

57

1.2.2. :

Creación de banners, menús y botones

60

1.2 Tema 2

:

:

Unidad de aprendizaje 2
HTML5 Y CSS3
2.1 Tema 3

Estructura HTML y aplicación de estilos CSS

75

2.1.1. :

Entorno del programa (Editor HTML)

76

2.1.2. :

Creación de un sitio web (estructura de carpetas)

77

2.1.3. :

Estructura de un documento HTML

81

:

Estilos CSS

105

2.2.1. :

EstilosCSS

107

2.2.1.1 :

Tipos de estilos

109

2.2.1.2 :

Estilos aplicados a etiquetas y de clase

111

2.2 Tema 4

:

73

Unidad de aprendizaje 3
ESTRUCTURAS Y LAYOUT

133

3.1 Tema 5

:

Creación de bloques

135

3.1.1. :

Etiquetas de bloques

135

3.1.1.1 :

Estilos básicos del bloque

137

3.1.1.2 :

Estilos para bloques

139

3.1.1.3 :

Propiedad box-sizing

143

Creación de Menu

167

Estilosa vínculos: creación de menu

168

3.2 Tema 6 :
3.2.1 :

Unidad de aprendizaje 4
MULTIMEDIA
4.1 Tema 7

CIBERTEC

187
:

Elementos multimedia

189

CARRERAS PROFESIONALES

4

4.1.1. :

Etiquetas AUDIO y VIDEO

189

4.1.2. :

Codificar audio y video para la web

189

4.1.3. :

Convertidor de audio y video online

192

4.1.4. :

Etiqueta iframe: Mostrar video en Youtube

192

4.1.5. :

Uso de laherramienta LightBox para la gestión de imágenes

193

y video
Unidad de aprendizaje 5
TRANSICIONES Y ANIMACIONES CON CSS

213

5.1 Tema 8

Transiciones y Animaciones

215

5.1.1 :

Transiciones

215

5.1.2 :

Animaciones

221

:

Unidad de Aprendizaje 6
FORMULARIOS
6.1 Tema 9

Formularios

227

6.1.1 :

Elementos clásicos de formulario

227

6.1.2 :

Nuevos atributos para la etiqueta INPUT

2316.1.3 :

Atributos del formulario

233

Publicación de un sitio web

243

Uso de un sitio Web para el envío de datos por un

245

6.2 Tema 10

:

225

:

6.2.1 :

formulario
6.2.2 :

Publicación del proyecto web en un sitio web

CARRERAS PROFESIONALES

249

CIBERTEC

ARQUITECTURA DE ENTORNOS WEB

5

PRESENTACIÓN
La web 3.0 es la nueva evolución que han experimentado todos los navegadores
modernos,los cuales, permiten marcar el contenido de forma semántica, para así
poder ser indexado con mucha más fiabilidad y efectividad.
HTML5 es un nuevo lenguaje para el diseño de páginas web, que proporciona muchas
más etiquetas de marcado de contenido entre los que destaca los bloques de
contenidos, efectos multimedia, formularios, etc; y trabaja con lenguajes de
programación JavaScript para elaborarpáginas mas interactivas.
Arquitectura de entornos Web pertenece a la línea de tecnología y se dicta en las
carreras de tecnología de la institución. El curso brinda un conjunto de herramientas
de diseño y programación para la creación de páginas web.
El manual para este curso ha sido diseñado bajo la modalidad de unidades de
aprendizaje, las que desarrollamos durante semanas determinadas. En cadauna de
ellas, hallará los logros que se deberá alcanzar al final de la unidad; el tema tratado, el
cual será ampliamente desarrollado; y los contenidos, que debe desarrollar. Por último,
encontrará las actividades y trabajos prácticos que deberá desarrollar en cada sesión,
que le permitirán reforzar lo aprendido en la clase.
El curso es eminentemente práctico: consiste en el diseño de sitios weby
programación de páginas web utilizando HTML5 y JavaScript. La primera parte de este
manual explicamos acerca de los conceptos básicos de la Web y los fundamentos de
un proyecto web. Luego, vamos a aprender a diseñar y construir páginas web para un
sitio web aplicando las etiquetas HTML5, hojas de estilos CSS3, elementos de
multimedia y formularios. A continuación aprenderemos a diseñar y...