Johan Romeo Velรกzquez Soriano
Informรกtica III
15 de mayo de 2016
Índice
Introducción
Reporte
Ensayo
Introducción Mi nombre es Johan Romeo Velázquez Soriano y esto es una recopilación de lo que había hecho en el tercer parcial del Semestre B y todo el proceso que lleve en la elaboración de una página web sobre nuestra compañía que habíamos hecho anteriormente. También es una reflexión sobre todo lo que había visto dentro del Semestre B de la materia de Informática.
Objetivo: Con los temas que he visto en clase sobre cómo elaborar una página web , utilizare todo lo que necesito para elaborar mi propia página que se basara en la compañía que había hecho el semestre pasado usando también el lenguaje de HTML. Herramientas: Etiqueta Marquee (Las marquesinas son texto en movimiento), Marquesina con Color (Texto en movimiento con un color de fondo), Direction (Mueve el texto a la izquierda o derecha dependiendo si usas “left” o “right”), Font Color (Coloca color al texto), Font size (Cambia el tamaño del texto), Font face (Cambia el tipo de fuente del texto), </BR> (Sirve para “romper línea” en el texto), <HTML> </HTML> (Cada documento de HTML empieza con <HTML> y cierra con </HTML>) , frameset rows (Coloca el tamaño de la fila), frameset cols (Coloca el tamaño de la columna), <Frameset> </Frameset> (Se usa en lugar del <BODY>), frame name (Coloca el nombre del frame), frame src (Se usa para mostrar un documento), <frameset frameborder="yes o no"> (Permite elegir si quieres colocar borders a tus frames o no), <Frame NORESIZE> (Sirve para que los frames de la página web no sean redimensionada por la persona que ingresa a la página) BGCOLOR (Se utiliza para colocar el color del fondo del frame), <TABLE> (Esta etiqueta permite generar tablas), <IMG> (Sirve para poner imágenes), <Video> (Permite insertar medios de reproducción dentro de una página web), <Audio> (Permite insertar sonido/música dentro de la página web), Controls (Da la opción que el usuario inicia o para el medio de reproducción, ya sea de sonido o de video y también cambiar el volumen), <a href> (Sirve para poner un hipervínculo que llevara o demostrara al usuario otro pedazo de la página web) , target=_”blank” (Esto se usa con la etiqueta de hipervínculo para que cuando el usuario hace “click” en él, abrirá otra página en la misma ventana), Style (Esto se utiliza para modificar los elementos de HTML, como darle color de fondo, color de texto, tamaño de texto, alineamiento de texto, etc.) Desarrollo:
IMAGEN III.I: Primer diseño de esqueleto de página web Para iniciar, mi página web iba ser algo más complicado de lo que termine haciendo. Como no sabía muy bien la complejidad que me iba llevar haciendo el plan original que tenia de mi página web , pensé
en tenerlo todo en diferentes secciones para luego ver como lo podría unir todo como se ve en la IMAGEN III.I. Pero como no encontré una manera más sencilla de unir cada uno de las secciones que tenía en mente, decidí en hacerlo un poco más simple para poder completar lo que iba a venir siendo un diseño que me gustaba para la página web que tenía en mente hacer que también iba a tener el espacio suficiente para colocar todo lo que era necesario de poner en él . Como se puede ver en la IMAGEN III.II, termine reformándolo en algo que tendría el diseño que quería y que iba a tener el espacio necesario para agregar todo de una manera más o menos organizada. Con la ayuda de la maestra, me ayudo en cómo podría ubicar el título de mi página web dentro del esqueleto porque no lo estaba demostrando dentro de la IMAGEN III.II: Esqueleto de página web semi-terminado página. Ya con eso me conforme con esto y seguía con lo siguiente que tenía que hacer de la página web que era añadir el video, audio, tabla, hipervínculo, color de fondo, y marquesina. Además, las etiquetas que le dan formato al texto como el tamaño, color y tipo de fuente que iban a tener. Aquí se puede ver en la IMAGEN III.III lo que termino siendo el diseño del esqueleto que me gusto para mi página web. Lo único que había faltado es dejarle el espacio para la música, pero de todos modos tenía la opción de ponerlo con otro frame que tenía en mente, la cual era donde iba a estar la galería de juegos, porque nuestra compañía era de videojuegos, y que este no se iba a estar reproduciendo así solo, sino que el mismo usuario iba a tener la opción de empezar o pararlo. Al igual que la música, no había dejado un espacio para mi tabla, entonces cambie la Misión y Visión que en vez de solo texto iban a ser donde el hipervínculo iba a mandar el IMAGEN III.III: Demostración de página web con los frames usuario y debajo de ese frame iba a estar ubicados la tabla. Ya el ultimo frame que iba a estar en el parte inferior izquierdo le iba a poner lo que viene siendo el “formulario” para completar mi página web .
Como no me gustaba como se veían lo borders dentro de mi página web, decidí en quitarlos, como se puede ver en la IMAGEN III.IV, indicando en mi esqueleto haciendo uso de “frameset frameborder” y agregándole la indicación de que no lo quería en todos los frames que estaban en mi página web. Aunque se ve raro sin los borders, eso es solo porque la página todavía no le había introducido lo que iban a ser el título, imágenes y el video que ocupaban una gran porción de lo que es el área completa de mi página web. IMAGEN III.IV: Pagina web sin borders Aparte, los borders iban a estar de otro color e iban a estorbar lo que quería poner adentro del frame porque tendría que considerar tanto el espacio del frame y el borde que lo encierra para calcular el tamaño ya sea de la imagen o del video. La IMAGEN III.V es como quedo el esqueleto completo de mi página web. Para quitar el borde de cada frame, tenía que ubicar el “frameset frameborder” antes que empezará todos los “frameset” para que se aplicaría en todos ellos y no solo en algunos. Aparte de eso, note que los dimensiones de mis frames en la página web so podrían redimensionar por el mismo usuario. Para cambiar eso, tenía que colocar en cada uno de los “frame names” lo que viene siendo el “NORESIZE” para que ninguno de los frames de la página sea modificas por IMAGEN III.V: Esqueleto terminado de página web cualquiera persona que llega entrar a mi página web. En sí, para cada uno de las secciones que había dejado en mi esqueleto con la utilización del “frame name” les iba a tener que hacer aparte otro bloc de notas que tenía que tener la información/estructura de ese frame en específico. También con hacer sus blocs de notas, todo lo de la página tenía que estar en una misma carpeta para que lograra añadirlas al esqueleto que también cambiaria como se iba a ver la página web . En total hice como diez diferentes blocs de nota para terminar haciendo la página web . También tenía que guardar cada de ellos en HTML y que esos blocs y archivos de HTML que pertenezcan a su bloc correspondiente estén en la misma carpeta. También las imágenes, audios, y videos tenían que estar sus archivos dentro de la misma carpeta que las demás cosas para que al usar src se añadan al frame que iba a tener ese tipo de archivo en su estructura. Para la música tengo tres en la carpeta, aunque nada más utilizo una de ellas para mi página porque prefiero tener la opción de cambiar la canción si es
que me aburro de la misma canción en mi página web, pero el video solo use el uno que tengo para la página web. De plano escogí varias diferentes imágenes para llenar más a mi página web.
IMAGEN III.VI: Demostración del Título con Marquee dentro de la página web Para el título de mi página, quería que quedara fijo y centrado, pero luego quería cambiarlo a una de las marquesinas porque creo que se veía mejor. La IMAGEN III.VI es como se ve dentro la página web y también indica la dirección en que se va dirigiendo el texto. Obvio el tamaño del frame en relación del tamaño de la letra estaría diferente por el tipo de pantalla que estaría usando el usuario. Por eso mucho de lo que iba haciendo era basado en el tamaño de las pantallas que estaban en el laborator io de computadoras que tenemos en la escuela porque me imagino que ah í es donde tendremos que exponerle lo que es nuestra página y como lo fuimos haciendo. En mi laptop se ve que el tipo de letra un poco chico en comparación al frame que lo envuelve porque pues la resolución que tiene m i computadora es un poco más grande en comparación a las otras computadoras que están en la escuela. Por eso unas cuantas cosas como el video y las imágenes los deje sin modificarlos el tamaño porque ya llevaban la medida de las computadoras de los que están en el laboratorio. Aunque el fondo de negro cubre una gran mayoría del fondo de mi página y lo hace ver, pues, muy de negro, a la misma vez lo está llenando porque el video y el audio tienen como sus propios contornos que es de negro y no quería hacerle más complicaciones a mi estructura, entonces lo deje de negro para que será más conveniente para mí mismo con lo que iba a agregarle a m i página web.
IMAGEN III.VII: Estructura del Título de la página web Con la IMAGEN III.VII, se puede ver la estructura del título de la página web. El tamaño es de siete nada más porque lo estaba haciendo dentro del laboratorio, entonces estuve can las demás frames con el pensamiento de cómo se vería dentro de esas computadoras. El color blanco era el color que resaltaba
más con el entorno de negro, aunque quería poner rojo pero ese color como no saltaba al ojo y era un poco más difícil para leer mientras esta el contorno de negro. Más que nada, quería usar los colores que nuestra compañía de Game Universe tenía en su logo , pero la verdad el verde que teníamos era más difícil de entender que si el texto fuera de rojo. El blanco brilla, pero no lastima el ojo al estar leyéndolo mientras se desplaza para la derecha.
IMAGEN III.VIII: Demostración del Video dentro de la página web
Esta IMAGEN III.VIII, demuestra lo que es el video que elegí para m i página web y como se ve dentro de él. Originalmente use el EMBED para el video, pero esta etiqueta causaba que el video iniciaba solito en el momento en que entraras a la página, entonces utilice lo que es la etiqueta llamada “Video” y con otra cosa llamada “Controls” lo cual permite que el usuario modifique el nivel de sonido que el video tendrá y si quiere empezar el video ellos solos o también si lo
quieren parar en alguna parte en específico. En esta IMAGEN III.IX, se ve como es la estructura para el video en mi página web. Ahí se puede observar como utilice “controls” en él y también le había puesto un mensaje que apareciera en caso que el navegador del usuario no podría
IMAGEN III.IX: Estructura del Video de la página web
demostrar el video que tengo en mi página web. En sí, lo único que costo más tiempo era modificar el tamaño del video dentro de la página usando “width” y “height” para establecer lo largo y ancho que iba a tener en el navegador. Nada más era modificarlo poco por poco hasta llegar al tamaño que necesitaba, y ya que lo tenía, no lo modifique en mi laptop porque como ya había dicho no son las mismas medidas que de las computadoras de la escuela.
IMAGEN III.X: Demostración de Imágenes dentro de la página web
IMAGEN III.XI: Continuación de Imágenes dentro de la página web
En la IMAGEN III.X e IMAGEN III.XI, enseñan cómo se verían las imágenes que había escogido dentro de mi página web. Obvio que el espacio entre la imagen y la barra de desplazamiento es un poco grande porque el tamaño que había hecho para las imágenes era de acuerdo con la resolución /tamaño de la pantalla de las computadoras que son más chiquitas que la de mi laptop. Como habíamos decidido en hacer una compañía sobre la venta e colección de videojuegos clásicos , todas las imágenes son videojuegos que se consideran clásicos por la edad que tienen cuando eran creado, el más viejo siendo “Space Invaders” que fue hecho en 1978 y el cual elegimos su personaje más conocido que es el extraterrestre o “Invasor Espacial” verde como la forma principal de la compañía porque creemos que todos, aunque no lo habían jugado, lo conocen como todos conocen quien es Mario o Pac-Man, pero como queríamos algo aún más viejo pues este fue el que quedo para el imagen de nuestra compañ ía y creo que era la opción mejor que habíamos hecho. Además, el video expone el videojuego de “Space Invaders” siendo jugado y al final del video se demuestra el logotipo que tenemos para nuestra compañía. Las otras imágenes igual son videojuegos clásicos, pero todos vinieron después del que habíamos escogido para el logotipo de nuestra empresa.
IMAGEN III.XII: Estructura de la Galería de Imágenes y de la Música de la página web Como había sacado la música, no había dejado espacio para ponerlo porque era obligatorio tenerlo. Entonces tenía que añadirlo junto con la galería de imágenes para que tendría un lugar dentro de la página web. Para crear como una separación entre las imágenes, les agregue un borde para cada uno y aparte </BR> para romper la línea entre cada uno de ellos, incluyendo la música , pero de todos modos la música se quedó algo junto con la imagen antes de él. La IMAGEN III.XII demuestra que la etiqueta de “Audio” también tiene “Controls” que sirve de la misma manera para el video , y, al igual que el video, anteriormente estaba usando EMBED para que se reprodujera la música, pero empezaba así solita entonces lo cambie para la etiqueta de “Audio” con “Controls” para que el mismo usuario lo empezara y para que cambien el volumen de la música. Como el video, tiene el mensaje que aparecerá si es que no lo puede reproducir el navegador que está manejando el usuario quien entro a la página web .
IMAGEN III.XIII: Demostración de Música dentro de la página web La IMAGEN III.XIII es como aparece la música dentro de la página web. Como esta en el mismo frame que la galería de imágenes, la barra donde se reproduce la música es chica y el espacio entre él y la barra de desplazamiento se ve más aparente en esta imagen y aún más porque esta imagen fue tomada de la página web en mi laptop entonces se va a alargar el espacio entre las dos cosas . De todos modos, no iba a corregir el tamaño de las imágenes para m i laptop porque lo había configurado por las otras computadoras. Lo que importa es que no se reproduce así sola la música y que el mismo usuario tendría la opción de alterar el volumen de él y si lo quería empezar o ponerle pausa. No se ve en la imagen, pero el audio esta junto con la última imagen de galería que es el de “Space Invaders”.
IMAGEN III.XIV: Demostración de la Tabla dentro de la página web
Con la IMAGEN III.XIV, se puede ver como la tabla se ve dentro de mi página web. No sabía que ponerle, entonces decidí en ordenar los videojuegos que se ven en la galería de las imágenes por el año en que ellos habían expuestos por la primera vez. Pensé en tener el color del texto de la tabla en verde porque lo tenemos en nuestro logotipo, pero no se veía bien con el resto de la página entonces lo deje en blanco como el titulo para que habría más complicaciones con la uniformidad de mi página.
IMAGEN III.XV: Estructura de la Tabla de la página web Se puede observar en la IMAGEN III.XV que la estructura de la tabla es un poco más extensa que todas las otras estructuras. Esto es porque fui utilizando “Style” para modificar el texto para cada uno de las cosas que quería agregar en mi tabla. Más que nada, el encabezado de la tabla donde decía “Titulo de Videojuego” y “Año” quería que tendrían algo más resaltante para que si se verían que eran pues los encabezados de la tabla y no perderse por tener la misma apariencia que las demás cosas que conformaban la tabla. En este caso, el tamaño de la tabla no importaba tanto porque su color de fondo y
borde eran de negro entonces no se notaban tanto sus dimensiones dentro de la página web como se veía en las imágenes, entonces había menor problema con ajustar las dimensiones de la tabla.
IMAGEN III.XVI: Demostración del Hipervínculo utilizado dentro de la página principal de la página web
La IMAGEN III.XVI enseña una imagen de Stevie de un programa de televisión, pero nuestra compañía lo había adoptado para que sea el “fundador” de la compañía y aparte de ser una imagen, sirve como el hipervínculo que lleva el usuario a otra página que contiene lo que es la Misión y Visión de nuestra compañía. Tener un lugar con un tamaño algo espacio para nada más tener texto no me gustaba, entonces vez de usar texto como hipervínculo quería usar una imagen y como Stevie era el fundador mejor el que le lleva al usuario a la otra página web.
IMAGEN III.XVII: Estructura del Hipervínculo de la página web Con la IMAGEN III.XVII, se demuestra lo que viene siendo la estructura del hipervínculo que había hecho para la página web. Lo que dice “target=_”blank” “es para que cuando el usuario haga clic en el hipervínculo abra otra página en la misma ventana. Lo que ocurría es que el hipervínculo se abría en el mismo frame en la página web y no quería que eso pasara, entonces busque lo que se podría hacer con <a href> y encontré que se podría añadir un atributo que hacía que el hipervínculo abriera otra página
diferente sin cerrar la página en donde estaba el usuario. También encontré que “Style” se podría usar para modificar el texto del hipervínculo, haciendo que si el usuario colocaba su “mouse” sobre el link y si el link estaba en texto en vez de la imagen pues el texto iba aparecer de otro color. En este caso el color de estar sobre el link era rojo, si estaba en uso que apareciera en amarillo, si aún no lo ha tocado que apareciera en verde y si ya lo había visitado que estaría en azul.
IMAGEN III.XVIII: Demostración de la página de Misión & Visión que se abre con hacer clic en el hipervínculo Al abrir el hipervínculo de la imagen de Stevie, te lleva a otra página que muestra la Misión y Visión que habíamos establecido para nuestra compañía. La IMAGEN III.XVIII es como aparece la página al hacer clic en el hipervínculo. Como iba a estar un espacio grande de negro, agregué unos archivos de tipo “.gif” para que tendría más vida la página y que no sea tan aburrida con puro texto y un gran espacio de nada. La única dificultad que tenía con hacer esta página era con la alineación de las imágenes porque, aunque le había puesto “center” para que se centraran en el centro de la página no lo hacían, entonces como el texto sin modificarse sale un negro utilice varios puntos finales para que mover las imágenes al centro de su respectivo frame. También los hice para tener las imágenes hacia abajo del texto de la Misión y de la Visión.
IMAGEN III.XIX: Estructura de la Visión en la página que se abre con el Hipervínculo
La IMAGEN III.XIX demuestra la estructura de la Visión en la otra página. Se puede notar los puntos finales que había utilizado para centrar la imagen que quería utilizar para esa sección. Lo que dice <hr> es para que aparezca la línea horizontal dentro debajo en donde dice Visión y <p> era para escribir texto en forma de párrafo.
IMAGEN III.XX: Estructura de la Misión en la página que se abre con el Hipervínculo En la IMAGEN III.XX, use lo mismo que había utilizado para lo de Visión, solo que pues el texto y la imagen son diferentes. Esos serían las únicas diferencias entre las dos estructuras. También con esta imagen de tipo “.gif” tenía que agregar varios puntos finales para que apareciera en el centro de su respectivo frame sin que se viera desalineado.
IMAGEN III.XXI: Estructura de la página que se abre con el Hipervínculo Con la IMAGEN III.XXI, se puede ver la última estructura que había usado para completar mi página web. Este esqueleto era los más sencillo que podría hacer para la otra página y al igual que la página principal, no quería que se vieran los bordes ni que se pueden redimensionar los frames por el usuario en la página entonces le puse <frameset frameborder=”no”> y NORESIZE.
IMAGEN III.XXII: Demostración de la página web “completa” Ya en la IMAGEN III.XXII demuestra la página web “completa” (nunca nos subió el formato de cómo usar un formulario para la página). Las imágenes y el video no se ven proporcionados porque, como ya había dicho, esto es como se ve en la pantalla de mi laptop. Conclusión: Esta práctica que fue elaborar una página web fue muy interesante porque cuando algo te salía bien te sentías satisfecho con lo que habías hecho porque algunas porciones como la elaboración del esqueleto era difícil y frustrante porque no tenías idea en lo que estabas mal entonces te quedas corrigiendo todo o de plano lo borras y empiezas de nuevo. La verdad, era bastante fácil insertar cada cosa en la página web que elaborar el esqueleto que tenía en mente para mi página web, lo único laborioso en si fue hacerlo todo porque si tomaba mucho tiempo en guardar cada cosa en su propio bloc de notas y luego guardarlo en HTML y LUEGO guardar tu esqueleto en HTML otra vez para ver como aparecía dentro de la página. Aunque el trabajo si tomaba mucho tiempo, era muy interesante y divertido ver como todo se veía en tu propia página web. Te sentías orgulloso cuando finalmente lograste poner un frame en la esquina o cuando el video no se reproducía sola cuando entrabas a la página. Esto me sirve para cualquier momento en donde quiero hacer una página para, no sé, una compañía o si quiero empezar uno pues le puedo hacerlo yo mismo. El punto es que aprendí como hacer una página web más o menos funcional y que me gusta como salió todo, aunque nunca nos dio el formulario entonces se quedó un espacio en blanco.
Ensayo Estos últimos parciales que tenemos de clase de informática III eran interesantes, divertidos, y también laboriosos. Cada parcial tenía sus tareas que hacer donde fuimos aprendiendo una variación de temas. El primer parcial vimos lo que era la elaboración de un logotipo para una compañía ya sea si lo creamos nosotros mismos o si ya existía y que necesitábamos tomar el logo que tiene ahorita y modificarlo a otro nuevo con respecto al diseño que tiene en mente la compañía propietaria del logotipo. Sentíamos que era más fácil crear nuestra propia compañía entonces lo logramos y salió lo mejor de lo que esperábamos. Aunque si los medios publicitarios eran seguían siendo más difícil de crear porque no teníamos claro la idea en que ponerle, sirvió para que cuando nosotros mismos queremos dar al público un anuncio pues ya sabemos el proceso que tenemos debemos llevar para realizarlo. El siguiente parcial es cuando empezábamos a aprender y realizar una página web. Obvio que lo primero que teníamos que ver era el esqueleto de la página para ya poner el resto de lo que queríamos dentro de la página. El diseño original que tenía en mente hacer era mucho más complicado de lo que termine realizado, pero aun así el resultado final me gusto. Elaborar un esqueleto era más complejo de lo que me había imaginado la verdad si frustraba cuando crees que todo está bien y luego lo abres en línea y resulta que todo era mal y no entendías porque salía de esa manera. La verdad sigo sin entender muy bien la elaboración de un esqueleto pero lo menos se cómo añadir los archivos que quiero para mi página web usando el lenguaje de HTML aunque es algo tedioso porque para revisar si estás bien tienes que guardar tu bloc de notas que contiene la estructura para el frame, luego lo guardas en HTML, después guardas tu esqueleto de la página original otra vez y en forma de HTML y ya abrir el archivo de HTML del esqueleto para ver si realmente quedo como tenías en mente y si no está bien, tienes que realizar el mismo procesos después de haber corregido el error. Al final, sentí que si realmente capte el trabajo y comprensión necesario para realizar cosas dentro de la programación porque puedo ver claramente cuanto tiempo necesitas para hacer todo y también el conocimiento necesario porque si te equivocas por una cosa chiquita, tienes que regresar hasta ese punto y volver a empezar con tu trabajo. Disfruté estos últimos parciales en el aspecto de que aprendí mucho sobre
lo que viene siendo una introducci贸n a la programaci贸n y espero poder hacer algo con lo que aprend铆 en un futuro y ver que tanto puedo hacer.