Pagina web by Paula García

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

INFORMATICA III LILIA RIVERA GONZÁLEZ CYNTHIA PAULA SÁNCHEZ GARCÍA PORTAFOLIO PRACTICAS

3°B 2015-2016 1

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

Í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

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

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.

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

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

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:

Lenguaje empleado para crear la página web

BLOC DE NOTAS:

Programa en donde se realizan

todas las etiquetas

LIBRETA: Lugar para dibujar el esqueleto

LÁPIZ:

Para trazar los márgenes de la página

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

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.

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 8

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

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 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)

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

IMÁGENES

Imagen 1.1: boceto

imagen 1.3: etiqueta esqueleto

imagen 1.2: esqueleto Imagen 1.4: carpeta

Imagen 1.5: título

imagen 1.6: etiqueta de titulo 10

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

Imagen 1.7: imagen logo

imagen 1.8: etiqueta imagen logo

Imagen 1.9: ¿Quiénes somos?

Imagen 2.2: redes sociale

Imagen 2.1: etiqueta ¿qs?

imágenes 2.3: rs c/hipervinculo

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

Imagen 2.4: tabla

2.6: audio

imagen 2.5: etiqueta tabla

2.7: etiqueta audio incluida en la de quienes somos

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III

Imagen 2.8: video

Imagen 2.9: etiqueta video

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.

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. SEMESTRE B INFORMATICA III