Portafolio reportes1

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

1

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

MI PAGINA WEB

2

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO PROFESORA: ING. LILIA RIVERA GONZALEZ MATERIA: Informática ALUMNOS: Barrientos Méndez Carlos Axel Paz Carrasco Joel PROYECTO: Portafolio Digital GRADO: 3°

GRUPO: “A” AREA: Ingeniería

CICLO ESCOLAR: 2014-2015

3

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

INDICE 

Presentación



Índice



Introducción



Primer Parcial “ESTRUCTURA Y DISEÑO DE PÁGINA WEB”

•

Estructura del logotipo

•

Diseño del logotipo y pagina



Segundo Parcial “ETIQUETAS DE FORMATO”



Tercer Parcial “ ETIQUETAS BASICAS”



Cuarto Parcial “SITIO WEB”

• Formulario • Hipervínculo



ENSYOS

4

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

INTRODUCCIÓN

En breve presentaremos lo que es nuestro portafolio digital del semestre, es decir lo trabajado durante este semestre b conforme a lo que es la elaboración de nuestra página web con un logotipo absolutamente renovado por los mismos compañeros, es decir recrear lo que es una empresa darle una nueva imagen el cual cabe recalcar se requiere de mucha dedicación porque no solo es buscar, hacer y crear si no que requerimos de varios aspectos como son los colores, la historia del por qué la empresa entre otros.

En breve les presentaremos cuatro parciales en los cuales se trabajaron como venimos comentando anteriormente durante el semestre sobre lo que es la realización de nuestro producto creando su propio sitio con diferentes aspectos el cual tenga un funcionamiento extrovertido y sea de agrado de personas que quieran visitarlo.

5

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

6

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Primer Parcial “ESTRUCTURA Y DISEÑO DE PÁGINA WEB”

 ESTRUCTURA

 JUSTIFICACION CREACION DE CONCEPTO 

OBJETIVO: Nuestro objetivo al realizar este logotipo fue ver más alla de lo que se podría hacer ya que basándonos en la historia y el significado de cada instrumento que se muestra en el logotipo original, lo que queremos dar a conocer es una nueva imagen hacia el producto sin salirnos del contexto pero más moderno elegante e innovador que atraiga a las personas para comprar el producto.  COLOR  El color gris pardo inspira: -Neutralidad -Calidad -Autenticidad -Versatilidad -Compromiso -Austeridad -Discreción –Modestia. El color negro inspira: *Positivas: -Poder -Elegancia -Sofisticación -Misterio -Fuerza -Sobriedad -Prestigio -Estilo -Modernidad *Negativas: -Depresión -Muerte -Supresión -Amenaza –Miedo. El color dorado inspira: *Positivas: -Riqueza -Brillantez -Divinidad -Intuición -Lujo -Opulencia -Valía -Prestigio *Negativas: -Llamativas.  TIPOGRAFIA  Las tipografías góticas, al igual que las otras tipografías del grupo cursivas o script, se inspiran en la escritura manual, aunque además de presentar normas y reglas muy precisas en su construcción, exhiben una morfología característica, propia del estilo, producto del elemento escritor utilizado en la escritura original y su particular forma de uso. Nosotros utilizamos este tipo de letra por la elegancia que sentimos que tiene y claramente en nuestras encuestas preguntamos que a pesar de que sea gótica la querían gruesa o delgada la cual dependía del gusto también de nuestros consumidores



SIGNOS

7

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B



Los signos que trabajamos aquí fue las legras G y A las cuales representan las iniciales de Giorgio Armani y se pueden mostrar grandes y toscas por lo cual las colocamos así por el interés como de las personas que comprarían el producto como la complementación exacta con el escudo  TEXTURAS  No presenta nuestro logotipo ningún tipo de textura  FORMAS  Bueno la forma que utilizamos fue el águila la utilizamos o nos enfocamos en ella como para no salir del contexto del logotipo original pero claro haciéndola más innovadora esta imagen muestra una águila bicerala la cual es usada en banderas de países y algunos símbolos de empresas tiene variedad de simbología tras de ella representa la sabiduría y se puede mostrar que tiene dos cabezas las cuales una representa el orden y la otra el progreso.  LINEAS  Las líneas que utilizamos fueron las gruesas las cuales no cambiaron como las del logotipo original que igualmente son gruesas y representan que nuestro logo sea impactante. Bueno en nuestro logo original representa líneas rectas las cuales significan tecnología, formalidad y seriedad Pero las que hemos utilizado en nuestro logotipo son angulosas es decir son más potentes muestran un empuje y se asocian muy bien al mundo tecnológico.

Bueno como se puede observar anteriormente es lo que conocemos como la justificación de nuestro logotipo es decir mostramos lo que es su estructura del porque cada uno de los aspectos como es la letra, el color, la forma de la figura, las líneas, etc. Los cuales iremos exponiendo en el aspecto del diseño de donde proviene la idea de hacer de esta forma el logotipo ya que como comentamos que la estructura es ver a fondo nuestro logotipo original ver cada uno de los detalles ver lo que vale si lo deterioramos y que al deteriorarlo se podría mejorar o empeorar pero buscamos no solo una mejoría si no la nueva imagen y algo impresionante para lo que sea nuestros consumidores.

Cabe recalcar y hablando sobre la estructura también tomaremos en cuenta lo que es la estructura de la página la cual nos mostrara letras elegantes, un fondo tanto llamativo como de elegancia por el hecho que la empresa GIORGIO ARMANY es una empresa de prestigio como el hecho de que muestra sus productos muy propios y en si para gentes en lo personal un poco más refinadas.



DISEÑO Primero que nada o básicamente lo que nosotros les iremos mostrando en este diseño es un poco sobre de cómo es que se fue formando esta idea de lo que ahora es la nueva imagen de GIORGIO ARMANI, el cual nos enfocamos mucho en lo que es su historia y respetamos las líneas y espacios es decir en el logotipo original de GIORGIO ARMANI son 7 líneas las cuales representan cada una casa de Armani es decir las empresas o franquicias que tiene y en la nueva imagen que elaboramos agregamos uno más por el hecho de que nos quisimos agregar a el grupo como diseñadores expertos los cuales levantaríamos a esta gran empresa de prestigio.

8

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Ahora

Antes

Otro punto que cabe señalar es la águila por qué bueno como dice en la estructura es una águila bicerala que quiere decir de dos cabeza la cual es ocupada básicamente en banderas o en logotipos con fervor de no solo elegancia si no también única, bueno las letras son góticas y cursivas con lo contrario de es una gótica simple es decir no requiere de otro efecto.

El logotipo de Armani es difícil de precisar a un diseño. El imperio Armani tiene sub-productos de la marca muchos otros y líneas, y para cada uno, viene su propia versión del logotipo de Armani.

Algunos de sus sub-etiquetas incluyen: Giorgio Armani Armani Collezioni Emporio Armani AJ Armani Jeans AX Armani Exchange Armani Junior Armani Casa

9

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Armani es una de las marcas de moda más prestigiosas y sofisticadas del mundo. El logotipo de Giorgio Armani es una curva "G" completar una curva "A" en un logotipo círculo. Este logo Armani es altamente reconocible en todo el mundo entero. El logotipo de Armani Exchange es limpio y sencillo, que representa a la "A | X marca" Continuando con lo que es el diseño nos traslademos con lo que son las de cosas que nos gustan y no algo que se vea simple es detalles que existen varios los guales irán viendo de uno en uno.

Hablando sobre el diseño de lo que es nuestra página es el ver un fondo o un color elegante para el cual le de vida a lo que es el lugar ya que los diferente colores son los que apoyan como a vender como un color primario y secundario y precisamente por lo mismo es que no es una marca para cualquier persona o tal vez si para todo plástico por el cual que el diseño es lo que más importa es decir el color que se requeriría el tipo de letra que a pesar de que se vea en una parte.

Para explicar un poco más de nuestro diseño del logotipo es sobre su color dorado, negro y gris porque estos colores el pues habla de cosas seria de elegancia y que pues es estipulado mucho para lo que son gente seria.

El diseño de nuestra página está constituido por lo que es el diseño color azul el cual pues tal vez no muestre así muy bien que digamos lo que es la estructura tanta elegancia pero es llamativo es decir que también queremos que al entrar a nuestra página se vea algo entretenida algo con lo que la gente se interese y le agrade hemos de igual forma insertas videos e imágenes los culés pues no solo son acorde a lo que representamos en nuestra página que posteriormente se ira exponiendo en los siguientes reportes y parciales.

A continuación le mostraremos un poco más de lo que fue siendo nuestro reporte de practica:

PRACTICA 3.1 “ESTRUCTURA DE PAGINA WEB” OBJETIVO: Definir las secciones que tendrá la página web y que elementos la conformaran para diseñar cada elemento que contendrá, el cual nos ayudara principalmente a conocer más sobre las estructuras de una página WEB.

10

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

HERRAMIENTAS: IMG 1 del lado derecho HTML: pues básicamente esta es la herramienta fundamental con la que se trabajara lo que es para la elaboración de nuestra página web la cual iremos observando en cada práctica que el HTML es al comienzo y final de cada indicación Body: básicamente esta herramienta será utilizada más que nada para dar a conocer las órdenes que se irán acatando las cuales en un block de notas siempre se utilizara esta herramienta como lo que es básicamente también HTML

Img 1 herramientas

Div: La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc.).

Span: La etiqueta span sirve normalmente para crear subdivisiones dentro de una capa (div). Esto nos permite aplicar estilos diferentes a cada subdivisión sin necesidad de crear nuevas capas.

EJECUCION: IMG’s 2, 3, 4,5 del lado izquierdo

I.

La ejecución hacia esta práctica fue básicamente con las herramientas expuestas anteriormente es decir las herramientas HTML, div y body, las pudimos utilizar básicamente o más bien para poder realizar lo que son los bordes para poder separar los div de entre ellos como se puede mostrar en la imagen 2.

II.

Bueno en la siguiente ejecución nos va indicando nuevas herramientas como es la span es decir esta es más que nada utilizada para ir dándole una mejor forma a nuestra página claramente tenemos que ir jugando un poco con los Img2 estructura pixeles de cada una de nuestras ventanas para poder tener una página muy bien estructurada y sin ningún error como se pueden mostrar en las imágenes 3 y 4 de la parte superior.

DEMOSTRACION: IMG 5 parte inferior Bueno básicamente después de ir realizando o ir reconociendo más que nada los elementes para lo que sería la elaboración de nuestra página e ir jugando un poco con pixeles y yendo estructurado detenidamente lo que será nuestra página podemos notar en la imagen 5 de la parte superior como se ven separadas los recuadros y lo que ira en cada uno de ellos.

Img 3 ejecución

CONCLUSIÓN; bueno el aprendisaje optenido en esta ue nada irnos familiarizando de cómo es la estructura

Img4 demostración

11 Img 5 demostración

practica fue mas base para la

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

elaboracion de una pagina web es decir no solo es poner valores o indicaciones al aise va si no ver como es que vamos a queres nuestra pagina

12

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

13

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

14

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Segundo Parcial “ETIQUETAS DE FORMATO” Bueno ahora si ya hablaremos mucho más de lo que es nuestra página es decir conforme a la etiquetas de formato por el cual o nosotros pensamos que es lo que le da la vida a l página es decir requerimos de ellas para darle diferentes formatos que se irán exponiendo a continuación.

•

COLOR

Bueno la etiqueta que utilizmos para lo que es relizar esta etiqueta es lo BGCOLOR es decir esta etiqueta nos apoyara lo que es

l formateo del texto, o sea, el formato del texto, son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato que nosotros le hemos querido dar.

Anteriormente ya hemos visto en un pequeño texto introductorio como se ponía la negrita y la itálica. Pero eso era solamente introductorio. A continuación lo vamos a explicar de una forma más detallada.

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar, entre medias. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas.

Negrita Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente.

Puedes usar la que prefieras.

La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo: Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong> Este palabra la vamos a poner en negrita y esta otra también

Cursiva Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).

También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:

15

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em> Este palabra la vamos a poner en cursiva y esta otra también

Subrayado Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante: <u>Así

subrayaríamos

una

frase

importante</u>

Así subrayaríamos una frase importante

Texto con espaciado simple o TT TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>. <tt>Esta frase la vamos a escribir de forma espaciada </tt> Esta frase la vamos a escribir de forma espaciada

Palabras más grandes o más pequeñas Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>.

Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá.

Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.

Un ejemplo sería el siguiente: Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.

Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.

16

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Superíndices y subíndices Mediante el HTML también podemos escribir fórmulas matemáticas. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice.

Así nos queda un ejemplo como el siguiente: Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H ₂ O o números elevados a potencias 7³.

Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H 2 O o números elevados a potencias 73.

Texto tachado Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aquí tienes la muestra: Si la palabra no me gusta la puedo tachar <strike>así</strike>, <s>así</s> o <del>así</del>. ¡Lo mismo me da!

17

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

18

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

19

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Tercer Parcial “ETIQUETAS BASICAS” OBJETIVO; A TRAVÉS DE ESTE PARCIAL SE APRENDERÁ A COMO DISEÑAR UNA PAGINA WEB. Atreves de HTML y con ello conseguiremos familiarizarnos más de lleno con la programación, además de que reforzaremos el inglés con el uso cotidiano de este para la programación así que se tendrá que recordar o aprender ya que es de vital importancia para programar.

HERRAMIENTAS: En la primera práctica nos fue enseñado lo más fácil que es dividir una página, darle bordes como se puede observar en la imagen Atraves del siquiente lenguaje: Se puede observar como no se utliliza bordes gruesos y que cada division es pequeña En esta en cambio el cambio se puede apreciar mas ya que los bordes son mucho mas definidos y se puede notar los colores predominar sobre las divisione En esta imagen se aprendio como dar comores a diversos palabras y lofrar hacer subtitulos para con ello dar mayor atencion a la pagina.

En esta por ultimo se logra apreciarlas diviones bien establecidas .

Una ves aprendido lo siguiente se podra utilizar para hacer un esqueleto o saber como se ba a gacer una pagina ya que para realizarla primero se debe tener en mente que se quiere hacer y para ello los profesores de clase nos invitan a hacer a detalle en hojas de libreta como quisieramos que fuera nuestra pagina ya que sin ello no se sabria por donde empezar .

Asi que como consiquiente seber estos pasos nos permitira manipular una pagina HTML a nuestra manera ya que es de gran importancia.

20

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

OBJETIVO; Aplicar las etiquetas básicas para construir los contenidos de cada una de las secciones de la página web.

Con ayuda de los ejemplos y lo aprendido.

La práctica nos enseña cómo empezar a usar marque como se puede ver en el siguiente texto” La etiqueta marque puede servirnos para hacer animaciones en páginas sencillas, sin ningún conocimiento de lenguajes de programación” Y a partir de ello se en la imagen de alado son encabezados que aunque no lo parezca tienen movimiento.

Y en las siguiente imagen se le agrego color con ayuda de bgcolor que nos permite dar cualquier color que queramos sin importar que tan sólido sea, ya que la mayoría de veces se aprecian colores fueres o vivos.

Ejemplo de marque: <Marquee> <table align="center" width="100"border="1"> <tr> <td>Esta tabla se desplaza , con todo el contenido de la tabla</td> </tr> </table> </marquee>

21

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

OBJETIVO; En esta práctica vamos a organizar tablas en las cuales se podrá visualizar mejor la organización, ya que nos permite tener un buen alineamiento de diferentes contextos.

Y como podemos ver atravesó de HTML se puede realizar la tabla con la etiqueta <tablre> nos permitió abrir una tabla y <tr> empezar a organizarlas.

“El uso más común es el de las tablas para dar forma a la disposición de los textos en la página.

Esta sección de la página está diseñada en dos columnas.

Para lograr este efecto debemos usar la etiqueta <table> y dividir el texto en 2 columnas” y como dice la práctica para que sea más fácilmente más notado la tabla se usa más de una comuna.

Bueno en esta práctica también explicaremos como se usa una de las etiquetas más importantes que son las siguientes: •

Bicolor

•

Background

Estas herramientas nos permitirán darle a nuestra página una buena presentación ya que con ellas se le puede agregar colores , con bicolor se puede agregar todos los colores que se requiera siempre y cuando sean colores sólidos y uno a la vez ,y es importante resaltar que se deberán de poner en inglés o de otro modo la maquina no lo aceptara.

Y tenemos a background esta es una herramienta bastante útil ya que nos permite colocar una imagen al fondo de la página

OBJETIVO; Al realizar esta ultima practica a lo que nos ayudara es a darle apuesta página gran presentación y atractivo visual por los colores e imágenes colocadas como auditivas ya que se integraran videos música y comerciales

22

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

Igualmente se tratare confirmar todo lo aprendido en prácticas anteriores.

Esta son varias imágenes de la práctica terminada y en ella se pueden observar un título en movimiento Igualmente que se colocó párrafo de texto en lo que se puede observar que se aplicó lo aprendido en prácticas anteriores.

En esta imagen se logra apreciar una imagen del nuevo sedán que saldrá al mercado este año, igualmente se le fue agregado música para mayor satisfacción del usuario.

Y esta última imagen el cuadro o tabla solicitada con una imagen de la compañía y fábrica va como fondo.

Cuarto Parcial “SITIO WEB” 23

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

OBJETIVO: en este práctica se nos explicó en detalle como poder usar un hipervínculo pero para ello primero debemos de saber que es un hipervínculo: Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces, enlaces o links.

Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté sobre el hipervínculo.

Explicación: Dependiendo de cuál sea el destino , hacer clic en un hipervínculo puede hacer que ocurran varias cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un documento de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo o de guardar el archivo.

Bueno en breves palabras nos permite conectar a otras páginas a través de una palabra que tiene un enlace. como se puede ver en la imagen las dos palabras subrayas tienen hipervínculo.

Ahora les mostrare la extensión o la etiqueta con la cual se puede lograr esto: Dónde: <a he> Etiqueta del hipervínculo <a he=”Pagina2.html”, aquí se coloca el nombre del segundo bloc de notas, que se convierte en pagina web. <a href=”Pagina2.html”> Responsabilidad el nombre que llevara el hipervínculo. <a href=”Pagina2.html”> Responsabilidad </a> Se cierra la etiqueta del hipervínculo.

ENSAYOS 24

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

ENSAYO JOEL

Bueno lo ya antes expuesto en estos cuatro parciales fue básicamente lo que hemos venido realizando en nuestro semestre es decir que no solo irnos con una idea de lo que se trabaja en lo que es la materia de informática, bueno para entenderlo un poco mejor es realizando nuestra página web a verdad es algo que parece muy fácil pero la verdad no lo es es tener mucho ingenio y creatividad al realizarla.

En mi punto de vista personal es que si nos costó un poco de trabajo pero entretenido porque en si juegas tu con tu página web que no solo es que quede bien si no llegas a un punto en el que empiezas a jugar con las etiquetas los pixeles entre otros aspectos y cuando menos lo piensas queda muy bien lo que es tu página web La verdad agradezco lo que es haber realizado este proyecto porque nos ha enseñado a realizar algo que pues en la actualidad es muy importante como es la web las estructuras de cómo es que las van realizando de donde es que proviene todo eso, viendo ventajas y desventajas.

Una de las principales ventajas es que al realizarlas tendrás la oportunidad de tener algo hecho por ti mismo lo cual te servirá en un futuro es decir que tendrás un intermediario y/o apoyo que le de referencias a universidades o trabajos lo cual muchas de ellas son más interesado y apoyan a personas que realizan por lo menos la dedicación de lo que hace.

Para finalizar la verdad es que ame hacer esta página web me enseño no solo al realizar una página si no que aprendemos lo que son sus estructuras el tiempo la dedicación que se le compone a esta.

Lo que son los sitio web no es solo una página que tiene información es más que eso es algo el cuales el autor o la persona al realizarlo tiene la mentalidad de transmitir de comunicar algo y el mejor medio como lo comente anteriormente comentaba es importante en la actualidad lo que yo quiero es transmitir algo que les guste a página que cuando tengas que buscar algo regresen a mi página ya que pues para los que realice cada una de las aginas sería un honor y gusto para ellos

25

INSTITUTO DE INVESTIGACIÓN Y ENSEÑANZA IBEROAMERICANO A.C BACHILLERATO INCORPORADO A LA B.U.A.P. INFORMATICA AREA DE INGENIERIA SEMESTRE “B

ENSAYO AXEL

A lo largo de un semestre se nos fue dicho que haríamos una página web y que lo lograríamos a través de lo aprendido en clases ,y así fue pero para hacer una página de algo en especial primero debíamos saber de qué la íbamos hacer por eso se comenzó eligiendo una empresa y remodelar mejorar o modificar los colores puestos y justificarlos ya que también se nos fue enseñado una psicología de como los colores influyen en la forma de actuar de las personas.

Una vez modificado este producto lo pasamos a exponer al salón para que se viera los avances y lo hecho en el parcial.

Una vez con todo esto digitalizado empezamos a crear una página en HTML que no sería tan fácil ya que uno en lo personal jamás se había preguntado cómo se hacía una página web , así que la mejor forma de entenderlo fue exponiendo dos temas muy importantes páginas web estáticas y dinámicas que son la forma en las que se divide esto en la informática.

Una vez entendido y captado cuánto cuesta las diferencias y semejanzas, así que ya con una noción más de acuerdo con lo que era una página web se empezó a realizar una , se nos dio una tabla con etiquetas donde se describían claramente cómo se usan como se escriben y para qué sirven.

La verdad sobre la tabla es que era bastante útil paro para saber utilizar una tabla así por lo menos se necesita uno conocer lo más básico para comenzar a comprender.

Y así fue como se empezó esto más a fondo ya que a tabes de la primera practica se nos fue incluyendo como hacer el esqueleto de una página y a lo que me refiero con esto es a que a través de cuadros planteados en la libreta o a la imaginación con la cual pensábamos hacer una página por fin se iba a hacer, y si se empezó realizando unos tipos rectángulos empezó a tomar forma , más tarde atravesó de las etiquetas la página empezó a tener más forma.

En lo personal crear una página web o aprender a realizarlas me dejo un gran sabor de boca ya que es de gran utilidad para la programación.

Aparte de que con ello te ayuda a enfrentar retos del futuro para los cuales estaremos preparados y encaminados o con los intelectos necesarios para enfrentar.

26