INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. ALUMNA: BETSAIDA SAYDE SEGURA ARRONIZ MATERIA: INFORMATICA III PROFESORA: LILIA RIVERA GONZALEZ 3 “B”
ÁREA: SOCIALES
PORTAFOLIO DE EVIDENCIAS
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
SEMESTRE “B”
INFORMATICA III BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
2
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
INTRODUCCIÓN: En este semestre “b” realizamos una página web en HTML, por lo que a continuación de muestras los reportes de cómo se fue realizando la misma. Esto con el objetivo de demostrar los conocimientos adquiridos durante todo el semestre, en donde se describen las herramientas que se utilizaron para la realización de la página web, de manera generar se menciona el procedimiento a seguir, esto seguido de una serie de imágenes que nos dan el ejemplo y/o muestra de cómo debe quedar la página web. En cada práctica se pone a prueba cada uno de los conocimientos adquiridos a lo largo de las clases.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
3
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
INDICE: Portada de parcial………………………………………………. 5 Esqueleto de mi página web…………………………………….6 Título y música de mi página web………………………………8 Imágenes y video de mi página web……………………..…11 Tabla de mi página web……………………………………......14 Hipervínculo de mi página web………………………………17
Conclusión………..……………………………….....................20
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
4
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
PARCIAL 3 “PAGINA WEB EN HTML”
BLOQUE III EXPRESIÓN GRAFICA BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
5
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
ESQUELETO DE MI PÁGINA WEB OBJETIVO: Aprender a elaborar el esqueleto o estructura de la página web, con ayuda de HTML, además de una clase previa en el salón con teoría sobre la misma.
HERRAMIENTAS: Computadora Bloc de notas (deberemos crear ahí la estructura de los frames) Bloq mayús (nos ayudara a colocar el nombre de los frames que utilizaremos) Teclado de signos <,>,/ (nos ayudara a abrir y cerrar las frames) Etiquetas de HTML (nos ayudaran a dar la indicación de que se desea hacer en la página web)
Para realizar esta primera parte de la página web lo primero que hice fue abrir una hoja de bloc de notas en este debería de colocar un HTML (como lo muestra la imagen 1) seguido de un frameset que indicaría el tamaño de mi primera columna en mi página. Después de esto pondría un segundo frameset con la indicación de que medidas llevaría la fila, para continuar abriría un frame name con el nombre de la primera división y así sucesivamente hasta obtener las divisiones que tenía en mente. Por ultimo debería de cerrar los diferentes frameset que hubiera abierto y mi HTML para cerrarlo debería de
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
6
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
poner “</HTML> (como lo muestra la imagen 2), para guardarlo tenía que dar en la opción de guardar como y guardar como .txt y además como .html, esto para poder abrirlo en internet.
Imag. 1 bloc de notas de esqueleto
Imag.2 Esqueleto
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
7
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imagen 1: Esta imagen nos muestra los diferentes frames y etiquetas de HTML que utilice para realizar el esqueleto de mi página web. Imagen 2: La imagen nos muestra el resultado final del esqueleto de mi página web.
CONCLUSIÓN: Esta primera parte de la elaboración de mi página web fue muy complicada ya que la práctica que la profesora nos dio la realice solo copiando tal cual los blocs de notas y así no puede comprender muy bien, pero después de ver que ninguno de mis compañeros ni yo habíamos entendido a hacer el esqueleto, la profesora nos ayudó y fue así como finalmente puede desarrollar mi esqueleto pero de una manera más sencilla a lo que tenía en mente.
TITULO Y MÚSICA DE MI PÁGINA WEB OBJETIVO: Aprender a colocar el título de mi página web en la sección deseada, además de colocar en ella una canción que me permitirá dar mayor interés a esta.
HERRAMIENTAS: Computadora
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
8
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Bloc de notas (deberemos crear ahí la estructura de los frames) Bloq mayús (nos ayudara a colocar el nombre de los frames que utilizaremos) Teclado de signos <,>,/ (nos ayudara a abrir y cerrar las frames) Etiquetas de HTML (nos ayudaran a dar la indicación de que se desea hacer en la página web) Etiqueta Embed (nos ayudara a colocar el audio en el titulo)
Lo primero que hice para colocar el título en mi página web fue abrir un HTML seguido de esto tuve que abrir un BODY BACKGROUND para que pudiera colocar una imagen de fondo en donde estaría ubicado mi título, a continuación tendría que abrir marquee esto para poder colocar el texto del título,
pondremos un “Font face” que
indicaría en que fuente y tamaño quisiera mi título. Para poder agregar la música deberíamos cerrar Font, body y marquee; abrir una embed para colocar el nombre de la canción que deseo colocar en mi página web, colocar un autostart para que la canción se reprodujera de manera automática cunado abriera mi página web, por ultimo cerrar HTML.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
9
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imag. 3 bloc de notas de título.
Imag. 4 Título de página web. Imagen 3: Esta imagen nos muestra los diferentes frames y etiquetas de HTML que utilice para realizar el título de mi página web, en ovalo amarillo nos muestra la etiqueta que se utilizó para colocar la imagen de fondo y en el ovalo rojo se muestra la etiqueta que se utilizó para colocar la música de fondo de mi página.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
10
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imagen 4: En esta podemos observar como se ve el título de mi página web, con un fondo de imagen de las diferentes botellas o productos que nos ofrece Bonafont la empresa a la que decidí cambiarle la etiqueta.
CONCLUSIÓN: La segunda parte de mi página web fue muy fácil de realizar, es muy corta y como anteriormente había realizado la etiqueta de título en una práctica en clase no me pareció nada complicado lo único nuevo seria el colocar el audio a mi título pero no fue nada difícil ya que la etiqueta es muy fácil y corta. Me gustó mucho esta parte de mi página.
IMÁGENES Y VIDEO DE MI PÁGINA WEB OBJETIVO: Aprender a colocar una serie de imágenes en la sección de galería, además de colocar un video para hacer propaganda del producto.
HERRAMIENTAS: Computadora
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
11
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Bloc de notas (deberemos crear ahí la estructura de los frames) Bloq mayús (nos ayudara a colocar el nombre de los frames que utilizaremos) Teclado de signos <,>,/ (nos ayudara a abrir y cerrar las frames) Etiquetas de HTML (nos ayudaran a dar la indicación de que se desea hacer en la página web) Etiqueta Embed (nos ayudara a colocar el video en la galería) Etiqueta IMG (nos ayudara a colocar las imágenes en la galería) Lo primero que hice en esta tercera parte fue abrir HTML seguido de un BODY, para continuar coloque la etiqueta de EMBED para colocar primero el video ya que quería que la imágenes fueran de manera seguida; para darle un formato al video utilice autostart con false para que el video se reproduzca solo si la persona lo desea ver, le di un tamaño adecuado al espacio que tenía destinado para él. Para continuar con mi galería lo que hice fue abrir la etiqueta de IMG para colocar el nombre de la imagen que deseaba ver y le daría formato de alto y ancho con Width y Height además de align para alinear la imagen. Esto lo hice una serie de veces para colocar varias imágenes lo único que cambie fue el nombre de las imágenes.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
12
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imag. 5 Bloc de notas de la galería.
Imag. 6 Galería. Imagen 5: Esta imagen nos muestra los diferentes frames y etiquetas de HTML que utilice para realizar primero el video de mi galería así como lo muestra en el ovalo de color rosa, y para seguir se muestra un ovalo de color verde que nos enseña la etiqueta que utilice para colocar las imágenes de mi página web.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
13
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imagen 6: La otra imagen nos muestra como se ve parte de la galería de mi página web, lo primero que se observa es el video y seguido de este se encuentran las diferentes imágenes.
CONCLUSIÓN: En la tercera parte de mi página web lo que hice fue colocar el video y las imágenes que estarían en mi sección de galería, para lo cual utilice dos etiquetas diferentes, el colocar el video fue la parte más sencilla de esta sección ya que para las imágenes tenía que tener más cuidado de que el nombre de estas no fuera demasiado grande porque que si no el bloc no lo podía leer, además que el tamaño tenía que ser el perfecto porque si no tampoco lo podía mostrar la sección y eso fue lo que no me agrado de esta parte.
TABLA DE MI PÁGINA WEB OBJETIVO: Aprender a colocar una tabla en mi página web con ayuda de HTML, además de darle un formato a la misma con color, bordes, entre otras cosas.
HERRAMIENTAS: Computadora BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
14
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Bloc de notas (deberemos crear ahí la estructura de los frames) Bloq mayús (nos ayudara a colocar el nombre de los frames que utilizaremos) Teclado de signos <,>,/ (nos ayudara a abrir y cerrar las frames) Etiquetas de HTML (nos ayudaran a dar la indicación de que se desea hacer en la página web) Etiqueta Table (para generar la tabla)
Para esta parte lo primero que hice fue al igual que en las demás abrir HTML y demás seguido de esto utilice la etiqueta de table que me ayudaría a colocar la tabla, para continuar abrí la TR que le daría color a la tabla, después abrir un TD para agregar las columnas en donde colocaría el texto, pero para cada columna y fila tenía que abrir y cerrar un tr y un td, además de dar formato a cada parte de la gráfica.
Imag. 7 Bloc de notas de tabla. BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
15
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imag. 8 Tabla de mi página web.
Imagen 7: Esta imagen nos muestra como utilice las etiquetas necesarias para crear una tabla. Imagen 8: La otra imagen nos muestra el resultado de a tabla que realice, está la hice del contenido de las botellas de agua levite.
CONCLUSIÓN: En la cuarta parte de la página web lo que hice fue una tabla, esta fue muy tediosa de hacer, no tan complicada pero si tenía que poner muchísima atención para que saliera perfectamente bien la tabla porque por algo que me faltara cerrar me cambiaba el orden de la tabla, algo muy feo de hacer.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
16
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
HIPERVÍNCULO DE MI PÁGINA WEB OBJETIVO: Aprender a colocar diferentes hipervínculos en mi página web de tal manera que pueda abrir otras ventanas en mi página y poder observar más información.
HERRAMIENTAS: Computadora Bloc de notas (deberemos crear ahí la estructura de los frames) Bloq mayús (nos ayudara a colocar el nombre de los frames que utilizaremos) Teclado de signos <,>,/ (nos ayudara a abrir y cerrar las frames) Etiquetas de HTML (nos ayudaran a dar la indicación de que se desea hacer en la página web) Para esta última parte de mi página lo primero que hice fue colocar las etiquetas HTML, BODY BACKGROUND, seguido de H1 para abrir la franja donde aparecería el título de la sección, seguido de esta abrir la etiqueta de HR, OL y ya para el hipervínculo como tal LI que me ayudaría a abrir el hipervínculo de otro bloc de notas
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
17
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
distinto. Para mi bloc de notas que contenía la información que aparecía en el hipervínculo lo hice primero abriendo HTML, BODY BACKGROUND, HR, CENTER, H1, FONT, P, y escribí todo el texto que utilizaría. Cerré Font, p, center, br, body y html. Y guarde en archivo con el nombre que coloque en el bloc anterior para que lo abriera perfectamente bien.
Imag. 9 Bloc de notas de hipervínculo.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
18
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
Imag. 10 Nombre de los hipervínculo.
Imag. 11 hipervínculo.
Imagen 9: Esta imagen nos muestra como quedo el bloc de notas del hipervínculo que tendría me página web. Imagen 10: La otra imagen nos muestra la serie de hipervínculos posibles para abrir en mi página web. Imagen 11: La última imagen nos muestra como se ve uno de los hipervínculos de mi página web.
CONCLUSIÓN: Para la última parte de mi página web realice una serie de pasos que no fueron complicados pero si muy tediosos, y en este caso en específico mi compañera fue quien me ayudo a colocarlos ya que esto no lo vimos en clase.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
19
INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C. MATERIA: INFORMATICA III REPORTE DE PRÁCTICA
CONCLUSIÓN: La realización de esta página web fue un poco difícil para mí, demasiado tediosa, y considero que para ser mi primera página y considerando que no soy muy buena en la informática me siento orgullosa de mi trabajo, agradezco el apoyo de la profesora Lilia Rivera quien durante el curso estuvo ayudándome con la teoría de los diferentes temas, considero que sería mejor concentrarse en la práctica que en la teoría y brindar mayor ayuda en esa parte que es la que más se nos dificulta, ya que en el laboratorio no se nos brinda la ayuda necesaria y por ello nos es más difícil realizar las practicas. En lo personal no considero algo muy importante el saber cómo hacer una página web porque mi carrera no lo ocupa, porque es muy difícil hacer páginas web. A continuación le muestro una imagen de como quedo finalmente mi página web y espero sea de su agrado.
BETSAIDA SAYDE SEGURA ARRONIZ
3 “B”
20