Manual 2014-I 01 Ofimática(T) (1357)

Ofimática

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

























OFIMÁTICA

2



























OFIMÁTICA

3

Índice Presentación Red de contenidos

5 7

Unidad de Aprendizaje 1

FUNDAMENTOS DE UN PROYECTO WEB Y ELEMENTOS GRÁFICOS 1.1 Tema 1 : Generalidades 1.1.1 : Internet 1.1.2 : Servidores web 1.1.3 : Hosting y dominios 1.1.4 : Navegadores

9 11

1.2 Tema 2 : Etapas de un proyecto web 1.2.1 : Mapa de sitio 1.2.2 : Wireframes

12

1.3 Tema 3 1.3.1 1.3.2 1.3.3 1.3.3

13

: Elementos gráficos para la web : Tipos de imagen : Resolución de la imagen : Modos de color de una imagen

Unidad de Aprendizaje 2

HTML5 y CSS 2.1 Tema 4 : 2.1.1 : 2.1.2 : 2.1.3 : 2.1.4 : 2.1.5 : 2.2 Tema 5 2.2.1 2.2.2 2.2.3 2.2.4

: : : : :

Estructura HTML5 y aplicación de estilos CSS Entorno del programa (Editor HTML) Creación de un sitio web (estructura de carpetas) Estructura de un documento HTML Etiquetas básicas Tipos de Estilos:En línea e internos Creación de bloques de contenido –Parte1 Uso de etiquetas div (capa contenedora, contenedora, texto, imágenes, etc.) Tipo de Estilos: vinculados (externos) Estilos aplicados a etiquetas y de clase Estilos para los bloques:width, bloques:width, height, background, border

40 42

47

2.3 Tema 6 : Creación de bloques de contenido –Parte2 55 2.3.1 : Etiquetas HTML5:header, nav, section, article, aside, footer 2.3.2 : Estilos para bloques:padding, bloques:padding, margin, background-image, border-radius, border-radius, float, clear 2.3.3 : Estilos a vínculos:Creación vínculos:Creación de menú 2.4 Tema 7 : Elementos multimedia (audio, video y Efecto Ligthbox 2.4.1 : Etiquetas HTML5: AUDIO y VIDEO

68



























OFIMÁTICA

2.5.4 : Envío de un formulario con el servicio MelodySoft MelodySoft

4



























OFIMÁTICA

5

Presentación Ofimática es un curso que pertenece a la línea técnica y se dicta en las carreras Computación e Informática, Administración y Sistemas, Redes y Electrónica. Brinda a los alumnos un conjunto de herramientas herramientas de software, software, como editores de textos textos para HTML5, CSS y JavaScript, para el diseño de sitios web con aplicaciones multimedia y validación de formularios f ormularios.. El manual para el curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las que se desarrollan durante semanas determinadas. En cada una de ellas, hallará los logros, que debe alcanzar al final de la unidad; el tema tratado, el cual será ampliamente desarrollado; y los contenidos, que debe desarrollar, es decir, los subtemas. Por último, encontrará las actividades que deberá desarrollar en cada sesión, que le permitirán reforzar lo aprendido en la clase. El curso es eminentemente práctico y consiste en el diseño de páginas web con etiquetas HTML5, estilos CSS y programación con JavaScript para validar formularios. En primer lugar, se inicia con una revisión de los fundamentos de un proyecto web y una variedad de herramientas para la integración de diferentes elementos de una página web. Así mismo, para el diseño, se incluye los lenguajes HTML5 y CSS. Se concluye con el lenguaje de programación JavaScript que permite insertar estructuras de programación para hacer consistente el ingreso de datos a un formulario por parte del usuario.



























OFIMÁTICA

6





























OFIMÁTICA

7

Red de contenidos

Ofimática

Unidad 2

Unidad 1

Fundamentos de un Proyecto Web

CSS

HTML5

JAVASCRIPT Generalidades

Etapas de un Proyecto

Estructura Estilos





























OFIMÁTICA

8





























OFIMÁTICA

9

UNIDAD

1 FUNDAMENTOS DE UN PROYECTO WEB Y ELEMENTOS GRÁFICOS LOGRO DE LA UNIDAD DE APRENDIZAJE Al término tér mino de la unidad, el alumno entiende el concepto de un proyecto web y diseña los elementos gráficos necesarios para un diseño web. TEMARIO

1.1 Tema 1 1.1.1 1.1.2 1.1.3 1.1.4

: : : : :

Generalidades Internet Servidores web Hosting y dominios Navegadores

1.2 Tema 2 : Etapas de un proyecto web 1.2.1 : Mapa de sitio 1.2.2 : Wireframes 1.3 Tema 3 : Elementos gráficos para la web 1.3.1 : Tipos de imagen 1.3.2 : Resolución de la imagen





























OFIMÁTICA

10





























OFIMÁTICA

11

1.1 GENERALIDADES 1.1.1. Internet Es un conjunto de computadoras, o servidores, conectados en una RED DE REDES MUNDIAL, que comparten un mismo protocolo de comunicación, y que presentan SERVICIOS a las computadoras que se conectan a esa red.

Figura 1.- Esquema de funcionamiento funcionamiento de Internet Fuente.- Tomado de http://www.backup-remoto-online.com/ep http://www.backup-remoto-online.com/epsilonindi/inde silonindi/index.php x.php

1.1.2. Servidores web Básicamente, un servidor Web es una gran computadora que guarda y transmite datos vía Internet. La principal función de un servidor Web es almacenar los archivos de un sitio y emitirlos por Internet para poder ser visitado por los usuarios.

1.1.3. Hosting y dominios El alojamiento web (en inglés web hosting ) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. Es una analogía de hospedaje o alojamiento en hoteles o habitaciones donde uno ocupa un lugar específico Un dominio es un nombre de servidor en Internet que facilita recordar de forma más































OFIMÁTICA

12

Figura 2.- Principales navegadores de Internet Fuente.- Tomado de http://www.navegadoresdeinternet.net/

1.2

ETAPAS DE UN PROYECTO WEB

Cuando se desea participar en el diseño de un sitio web de una empresa, es necesario cumplir etapas que que permitirán el desarrollo eficiente eficiente del diseño. diseño. La siguiente figura muestra dichas etapas. Sin embargo, en este manual, solo se detallarán las etapas iniciales de la elaboración del mapa de sitio y el diseño de los prototipos o wireframes de las páginas web del sitio web.































OFIMÁTICA

Figura 4.- Mapa de sitio esquematico Fuente.- Tomado de http://www.adandesign.com/neuroWeb/NeuroWeb13.html

13

Figura 5.- Mapa de sitio grafico Fuente.- Tomado de http://pecheperez.blogspot.com/ http://pecheperez.blogspot.com/

1.2.2 Wireframes En diseño web, un wireframe es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, programadores, diseñadores y clientes.































OFIMÁTICA

14

f ormato muy completo, ideal para utilizarse en redes. Png: se caracteriza por ser un formato

Gif: es un formato que almacena hasta 256 colores, por lo que es utilizado para imágenes cuyos diseños son sencillos. sencillos. Se utilizan mucho en la web por su bajo peso y por ser multiplataforma. multiplataforma.

1.3.2 Resolución de la imagen La resolución de una imagen indica cuánto detalle puede observarse en esta. El término es comúnmente utilizado en relación a imágenes de fotografía digital, pero también se utiliza para describir cuán nítida (como antónimo de granular) es una imagen de fotografía convencional (o fotografía química). Tener mayor resolución se traduce en obtener una imagen con más detalle o calidad visual. Para las imágenes digitales almacenadas como mapa de bits, la convención es describir la resolución de la imagen con dos números enteros, donde el primero es la cantidad de columnas de píxeles (cuántos píxeles tiene la imagen a lo ancho) y el segundo es la cantidad de filas de píxeles (cuántos píxeles tiene la imagen a lo alto). Es bueno señalar que si la imagen aparece como granular, se le da el nombre de pixelada o pixelosa. La convención que le sigue en popularidad es describir el número total de píxeles en la imagen (usualmente expresado como el múltiplo correspondiente a millón, mega-), que puede ser calculado multiplicando la cantidad de columnas de píxeles en una imagen por la cantidad de filas. A continuación, se presenta una ilustración sobre cómo se vería la misma imagen en diferentes resoluciones.































OFIMÁTICA

15

1.3.3 Modos de color color de de una una imagen imagen Hemos de tener en cuenta que el ojo humano percibe los colores según la longitud de onda de la luz que le llega. La luz que contiene todo el espectro de color aparece como luz blanca, mientras que la ausencia de luz es percibida por nuestro ojo como el color negro. Sin embargo, Las propiedades del color pueden ser deﬁnidas matemáticamente usando un "modo de color" de forma que éste pueda ser capturado y clasiﬁcado. Llamamos modo de color al sistema de coordenadas que nos sirve para describir los colores de forma numérica. Los principales son el RGB (rojo, verde y azul), el HLS (tono, luminosidad, saturación) y el CMYK (cian, magenta, amarillo y negro). En GIMP, sólo podemos trabajar en los modos RGB, escala de grises (256 niveles de gris) e indexado (podemos elegir el número de colores con los que vamos a trabajar hasta un máximo de 256). Los modos de color afectan al tamaño de la imagen en disco y al número de canales de color que utilizan. Si incrementamos el número de colores, aumentará el tamaño del archivo que contiene la imagen.































OFIMÁTICA

ACTIVIDADES PARA DESARROLLAR EN CLASE CREACIÓN DE UN MAPA DE SITIO 1. Ingrese a la siguiente dirección: www.lovelycharts.com 2. Aparecerá la siguiente interfaz, donde deberá hacer click en la opción: “ Web”

3. Haga click en el botón “ Try itNow” (Inténtalo ahora)

16

































OFIMÁTICA

17

5. Haga el registro correspondiente ( nombre, email y password, luego, haga click en la casilla de verificación: “I agree to theTerms of service” y, finalmente, click en el botón “Register ”. ”.

































OFIMÁTICA

7. Escriba o “pegue” el código recibido en la caja y haga click en el botón “ Let me in!” (¡Déjame entrar!):

8. Haga click en la opción: “ Sitemaps”.

18

































OFIMÁTICA

10. Use las herramientas para crear el siguiente Mapa Web:

19

































OFIMÁTICA

20

Crear un WireFrames (Prototipos) 1. Ingrese a: https://gomockingbird.com/ 2. Luego, click en el botón TRY IT NOW. NOW.

Clickaquí

































OFIMÁTICA

5. Se mostrará de la siguiente forma.

21



































OFIMÁTICA

22

2.-ColocarelNombre



































OFIMÁTICA

23



































OFIMÁTICA

24

Empezar con GIMP ¿Qué es GIMP? GIMP es el acrónimo de “GNU Image Manipulation Manipulation Program” y significa programa libre

para la manipulación de imágenes. Es una aplicación adecuada para la edición y composición de imágenes así como para el retoque fotográfico. Esta herramienta es gratuita y representa una excelente opción frente a otros programas comerciales como Adobe PhotoShop PhotoShop o Paint Shop Pro. Pro.

Instalación de GIMP



































OFIMÁTICA

25

Abrir un archivo a) Selecciona el menú ARCHIVO opción ABRIR. b) Ubica la carpeta SEMANA2 con los archivos bajados desde MOODLE. c) Seleccione el archivo archivo960_grid_12_col.xcf y, luego, presiona el botón ABRIR.



































OFIMÁTICA

26





































OFIMÁTICA

a) Ubícate en la imagen imagen del wireframe haciendo haciendo un clic clic en su miniatura.

27





































OFIMÁTICA

28





































OFIMÁTICA

29





































OFIMÁTICA

30





































OFIMÁTICA

c) Presiona el botón GUARDAR

31























































































































































































































































































































































































































































































































































































































































































































































































OFIMÁTICA

} Esquina superior derecha #estilo{ border: 1px solid #000; -moz-border-radius-toprigh -moz-border-radius-topright: t: 10px; -webkit-border-top-left-radius:10px; padding: 5px 5px 5px 15px; } Esquina inferior izquierda #estilo{ border: 1px solid #000; -moz-border-radius-bottomle -moz-border-radius-bottomleft: ft: 10px; -webkit-border-bottom-left-radius -webkit-border-bottom-left-radius:: 10px; padding: 5px 5px 5px 15px; } Esquina inferior derecha #estilo{ border: 1px solid #000; -moz-border-radius-bottomri -moz-border-radius-bottomright: ght: 10px; -webkit-border-bottom-right-rad -webkit-border-bottom-right-radius: ius: 10px; padding: 5px 5px 5px 15px; } Ambas esquinas esquinas arriba #estilo{ border: 1px solid #000; -moz-border-radius-topleft: -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius -webkit-border-top-left-radius:: 10px; -moz-border-radius-toprigh -moz-border-radius-topright: t: 10px; -webkit-border-top-right-radi -webkit-border-top-right-radius: us: 10px; padding: 5px 5px 5px 15px; } Ambas esquinas esquinas abajo #estilo{ border: 1px solid #000 -moz-border-radius-bottomle -moz-border-radius-bottomleft: ft: 10px; -webkit-border-bottom-left-radius -webkit-border-bottom-left-radius:: 10px; -moz-border-radius-bottomri -moz-border-radius-bottomright: ght: 10px; -webkit-border-bottom-right-rad -webkit-border-bottom-right-radius: ius: 10px; padding: 5px 5px 5px 15px; }

62



























OFIMÁTICA

63

2.2.6.4. Float La propiedad CSS que permite posicionar de forma flotante una caja se denomina float. Se aplica a todos los elementos y establece el tipo de posicionamiento posicionamiento flotante. Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan y fluyen alrededor de la caja flotante. El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza hacia la derecha. El valor none permite anular el posicionamiento flotante, de forma que el elemento se muestre en su posición original El posicionamiento flotante es el más difícil de comprender, pero al mismo tiempo, es el más utilizado. La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante, como se verá más adelante. Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente originalmente se encontraba. La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la derecha la caja 1:

Cuando se posiciona una caja de forma flotante, la caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante. La caja flotante se posiciona posiciona lo más a la izquierda o lo más a la derecha posible de la posición en la que se encontraba originalmente. Si en el anterior ejemplo, la caja 1 se posiciona de forma flotante hacia la izquierda, el resultado es el que muestra la siguiente imagen:



























OFIMÁTICA

64

La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de de la página y el resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2. Al mismo tiempo, la caja 1 se desplaza desplaza todo lo posible posible hacia la izquierda de la posición posición en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posición de la caja 2 y tapa todos sus contenidos. Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene en cuenta el sitio disponible. En el siguiente ejemplo, se posicionan de forma flotante hacia la izquierda las tres cajas:

En el ejemplo anterior, las cajas no se superponen entre sí porque las cajas flotantes tienen en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba posicionada lo más a la izquierda posible, la caja 2 sólo puede colocarse al lado del borde derecho de la caja 1, que es el sitio más a la izquierda posible respecto de la zona en la que se encontraba.



























OFIMÁTICA

65

Las cajas flotantes influyen en la disposición de todas las demás cajas. Los elementos en línea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja desplazada. Los elementos de bloque no les hacen sitio, pero sí que adaptan sus contenidos para que no se solapen con las cajas flotantes.

2.2.6.5. Clear La propiedad clear permite modificar el comportamiento, por defecto, del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. La regla CSS que se aplica al segundo párrafo del ejemplo de la figura es la siguiente:
...



























OFIMÁTICA

66

La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a ninguna caja posicionada de forma flotante. Si se indica el valor left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo. La especificación oficial de CSS explica este comportamiento como "un desplazamiento descendente hasta que el borde superior del elemento esté por debajo del borde inferior de cualquier elemento flotante hacia la izquierda". Si se indica el valor right, el comportamiento es análogo, salvo que en este caso se tienen en cuenta los elementos desplazados hacia la derecha. El valor both despeja el lado izquierdo y derecho del elemento, ya que desplaza el elemento de forma descendente hasta que el borde superior se encuentre por debajo del borde inferior de cualquier elemento flotante hacia la izquierda o hacia la derecha. La propiedad clear es imprescindible cuando se crean las estructuras de las páginas web complejas.

2.2.7. Estilos a vínculos: Creación Creación de menú CSS también se emplea para crear menús personalizados. Existen en las web diversas alternativas para diseñar menús con CSS. En este manual, se usará la siguiente dirección URL para crear un menú personalizado: http://cssmenumaker.com/ 1. Ingrese a la dirección http://cssmenumaker.com/ para mostrar la página principal del creador de menús css.





























OFIMÁTICA

2. Haga clic clic en el botón botón Get Started for free. 3. Seleccione un tipo de menú.

4. Haga clic en Customize / Download

5. Personalice su menú de acuerdo a su sitio web

67





























OFIMÁTICA

68

6. Haga clic en Download para descargar el código completo, es decir el el archivo index.htm con el menú insertado, el archivo styles.css y las imágenes que se necesitan para mostrar el menú personalizado.

2.3. ELEMENTOS MULTIMEDIA 2.3.1. Etiquetas HTML5 para para audio y video video HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos

Manual 2014-I 01 Ofimática(T) (1357)

Recommend Documents