PORTAFOLIO INFORMÁTICA
2
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
3
4
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
5
6
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
7
INFORMATICA III LILIA RIVERA GONZÁLEZ CYNTHIA PAULA SÁNCHEZ GARCÍA PORTAFOLIO PRACTICAS
3°B
8
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
2015-2016
SEMESTRE B
INFORMÁTI 9
ÍNDICE PORTADA DE PARCIAL……………………………………………………………….....4 INTRODUCCIÓN………………………………………………………….………………….5 OBJETIVO ….…………………………………………………………………………………6 HERRAMIENTAS……………….…………………………………………………………….7 PROCEDIMIENTO…………………………………………………………………………8-9 IMÁGENES………………………………………………………………………..10-11-12-13 CONCLUSIÓN………………………………………………………………………………..14 PÁGINA WEB…………………………………………………………………………………15
10
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
BLOQUE EXPRESIÓNIII GRÁFICA
PARCIAL III 11
PÁGINA WEB EN HTML INTRODUCCIÓN
En este portafolio se presentará el proceso paso a paso de la realización de una página web durante este semestre B, en el cual primero tuvimos que elegir un producto y presentarlo con la imagen cambiada, después de esto, con todas las etiquetas que a continuación serán mencionadas se fue elaborando poco a poco la página.
12
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
OBJETIVO Aprender a realizar una página web, pero no desde las páginas en las que fácil puedes introducir tu información y solas se crean, sino tú mismo crear desde el esqueleto hasta lo que es el insertar videos, hipervínculos, música y galería de imágenes (en este caso no se insertó la galería), título, tablas, etc. y a través de esta promocionar un nuevo producto
13
HERRAMIENTAS •
COMPUTADORA: Equipo indispensable en la vida cotidiana de hoy en día que también se conoce por el nombre de computador u ordenador, es una máquina electrónica que permite procesar y acumular datos.
•
BARRA DE COLORES:
Nos muestra todos los colores
junto con sus nombres
•
HTML:
•
BLOC DE NOTAS:
Lenguaje empleado para crear la página web
Programa en donde se realizan todas
las etiquetas
•
LIBRETA: Lugar para dibujar el esqueleto
14
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
•
LÁPIZ:
Para trazar los márgenes de la página
PROCESO POR PASOS PASO 1: BOCETO En la libreta se dibujó un boceto en clase de cómo iba a ser el esqueleto de la página web, el cual fue supervisado y aprobado por la maestra. Aquí es el único caso en el que se ocupa el lápiz y la libreta (imagen 1.1)
PASO 2: ESQUELETO Ya en el laboratorio de cómputo, se abrió el programa que se llama “bloc de notas” o “notepad” y ahí se empezó a crear el esqueleto con las etiquetas correspondientes (imagen 1.2 y 1.3)
PASO 3: TÍTULO Ya que teníamos el esqueleto ahora se insertó un título, pero antes tuvimos que crear una carpeta especial para la página, en donde vamos a meter todos nuestros archivos (imagen 1.4) por ahora solo se va a meter la imagen que le insertamos al título y ahora si, en el bloc se va a poner la etiqueta correspondiente para el título y la etiqueta que se va a usar para poner la imagen (imagen 1.5 y 1.6) y es necesario guardarla con el nombre que le pusimos al frame en nuestro esqueleto, que en este casi es título.
15
PASO 4: IMÁGENES Ahora es necesario descargar imágenes de internet para poder meterlas en nuestra página web, en mi caso las edité y les puse mi logo y estas se guardan en la carpeta que tenemos asignada para nuestra página web y se inserta la etiqueta necesaria y para que las imágenes se puedan ver en tu página se deben guardar de acuerdo al formato que esta guardado, ya sea .png, .jpg, .gift, etc. (imágenes 1.7, 1.8, 1.9, 2.1)
PASO 5: REDES SOCIALES Aquí se insertaron hipervínculos para que nos dirigiera a las redes sociales de la marca, pero también se le insertaron imágenes, para diferenciar que red social es junto con su respectiva etiqueta (imágenes 2.2 y 2.3).
PASO 6: TABLA Aquí tuve que recurrir a buscar la información nutrimental del agua de niños desde la página oficial de la marca, después de esto apliqué la etiqueta correspondiente junto con el color que quería (imagen 2.4 y 2.5).
PASO 7: AUDIO En esta parte primero se debe de descargar la canción que quieras ponerle a tu página, después de esto, se usa la etiqueta necesaria para insertar el audio, la más recomendable es EMBED, ya que esta abre con el internet que sea, solo que, como es audio se le debe de poner .mp3 después del titulo de la canción (imagen 2.6 y 2.7)
PASO 8: VIDEO Se tiene que crear un video relacionado con nuestra página, ya sea en movie maker o en donde nosotros quiéramos, después se guarda en la carpeta asignada a nuestra página web y se abre el bloc de notas, se aplica la misma etiqueta que en audio (EMBED) solo que en vez de ponerle .mp3 se le pone .mp4, ya que asi es solamente como 16
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
te va a abrir tu video en la pagina, obviamente antes del .mp4 se escribe el nombre de tu video (imagen 2.8 y 2.9)
IMÁGENES
Imagen 1.1: boceto
imagen 1.3: etiqueta esqueleto
imagen 1.2: esqueleto Imagen 1.4: carpeta
17
Imagen 1.5: título
Imagen 1.7: imagen logo
Imagen 1.9: ¿Quiénes somos?
imagen 1.6: etiqueta de titulo
imagen 1.8: etiqueta imagen logo
Imagen 2.1: etiqueta ¿qs?
18
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
Imagen 2.2: redes sociale
Imagen 2.4: tabla
2.6: audio
imágenes 2.3: rs c/hipervinculo
imagen 2.5: etiqueta tabla
2.7: etiqueta audio incluida en la de quienes somos
19
Imagen 2.8: video
Imagen 2.9: etiqueta video
20
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
CONCLUSIÓN Esta página web me costó mucho trabajo hacerla, ya que no le entendía como poner cada una de las etiquetas y todo, como acomodar las imágenes para que no salieran encimadas, pero sobre todo, lo que más me costó trabajo fue hacer el esqueleto, ya que no me salían las divisiones como yo quería, pero gracias a la maestra que me ayudó a hacerla pude terminar con el esqueleto, de ahí en fuera ya lo demás fue un poco mas fácil, a excepción de los hipervínculos, que fue lo que más trabajo me costó después de lo del esqueleto, no sabía cómo ponerlos y cómo hacer para que me dirigiera a la página que quería, pero al final ya pude hacerlo y ahora sé cómo hacer una página web, también lo que me costó trabajo fue el video y la música, pero después de todo pude terminarla.
21
PÁGINA WEB
22
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III
23