Pag by Lidia Miranda

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Esa es una práctica dedicada al proceso que se realizó para crear una página web, trabajo que fue realizado durante el 3 parcial del semestre b, demostrando que utilizamos las herramientas dadas durante clases y así mismo prácticas en el laboratorio de computación de la materia de Informática III Una página web es el documento que forma parte de un sitio web y que suele contar con hipervínculos o links para facilitar la navegación entre los contenidos. Están desarrolladas con lenguajes de marcado como el HTML como se mostrara en mi página web, que pueden ser interpretados por los navegadores. De esta forma, las páginas pueden presentar información en distintos formatos (texto, imágenes, sonidos, videos, animaciones), estar asociadas a datos de estilo o contar con aplicaciones interactivas. Para dar a conocer algún producto, acción y más al público en general El producto que estoy manejando en mi página web es un trabajo realizado en mi segundo parcial del mismo semestre donde modificamos la marca del producto “VANS”. Como se dijo anteriormente se podrán encontrar imágenes, videos realizados por nosotros como alumnos, audio entre más.

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Dar a conocer paso a paso en que consiste la creación de una página web realizada por cada uno de nosotros c0mo alumnos, dando a conocer una nueva marca del producto en este caso “VANS” Así como demostrar los conocimientos adquiridos durante clase.

 BLOC DE NOTAS : (en inglés notepad) es un editor de texto simple incluido en los sistemas operativos de Microsoft desde 1985. Su funcionalidad es muy simple. Algunas características propias son: Todos los elementos y el contenido de un documento HTML están encerrados dentro de las marcas <HTML></HTML> cuya función es servir de apertura y cierre al archivo. Las marcas <HTML></HTML> indican al navegador que el documento está marcado en HTML, si bien los navegadores más recientes (Netscape 3 y 4, MsIe 3,4 y 5) consiguen interpretar igualmente las marcas sucesivas. Dicho esto, existen en cualquier caso dos razones para introducir siempre la marca <HTML></HTML> dentro del documento:  HEAD : Los elementos <HEAD></HEAD> se colocan inmediatamente después de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información que necesita el navegador, el servidor de web y los motores de búsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script  <TITLE> : El elemento <TITLE></TITLE> es el más utilizado dentro de la marca <HEAD>, dado que sirve para dar título a la página. El título suele ser visualizado por los navegadores en la cabecera de página. La que figura a continuación es la imagen del TITLE de HTMLpoint (el texto es: HTMLpoint - el sitio italiano sobre el Web publishing): PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

 <BODY> El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento. Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página.  WIDTH: especifica la anchura del contenido SWF en píxeles o el porcentaje de la ventana del navegador.  HEIGHT: especifica la altura del contenido SWF en píxeles o el porcentaje de la ventana del navegador.  TABLE : La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página:  TD: La etiqueta <td> define una celda que contiene datos dentro de una tabla. El texto de esta celda se representa en tamaño regular y alineado a la izquierda.  CENTER :Esta etiqueta de utiliza para centrar un texto.  FORM : La etiqueta <form> se utiliza para crear un formulario que le permita al usuario ingresar datos. Los datos del formulario serán enviados a un archivo procesador de datos que se encuentra en el servidor. Esta etiqueta actúa como contenedor decontroles

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

El primer paso al realizar mi página web fue poder entender cuáles sin las funciones de cada herramienta que en la parte superior se mostraron así con ello ayudarme y entender cuál es su objetivo. A Continuación muestro una página que me ayudó a comprender cada una de las etiquetas que utilice http://www.virtualnauta.com/ Lo primero fue realizar el cuerpo de mi página que es el siguiente. Mi maestra nos sugirió que guardáramos todos los archivos que fueran en nuestra página en una sola carpeta para que todo fuera más fácil así que se creó una carpeta. Guardamos el bloc de notas y volvimos a guardar pero ahora con las siglas HTML Así nos abriría en navegador

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Lo que realice después fue darle título a mi página web que fue el siguiente “VANS NUEVO LOGO” Además de que también cambiamos el color de fondo en este caso yo utilice una imagen que le diera un fondo de azul turquesa y resulto como a continuación se puede observar como cambio el fondo de la página con la etiqueta

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

TEXTO E IMAGEN Posteriormete fue momento de insertar mi imagen y mi texto En mi primera página quiero que vaya el logo nuevo y la historia del producto así como unos detalles más que se verán más adelante esto quiere decir que todas la etiquetas están dentro de BODY y lo que ocupe fue lo siguiente

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

<center><IMG SRC="VANS.JPG"></center> Después inserte el texto con la etiqueta <P><p>Todo texto que se encuentra entre estas etiquetas es un párrafo.</p>

Diseñe los hipervínculos que quiero mostrar en mi pagina los cuales fueron Inicio: Que se encontraría el logo, la hidytoria, música, y unos datos mas Contacto, este es otro hipervínculo donde se mostrara la información de como poder contactar a la tienda o autoservicios como teléfono, sucursales, direcciones entre más. Valores: Este hipervínculo es muy importante ya que en él se encuentran los valores que son símbolos muy importantes que definen al producto, además de ser prioritario Galería: En este hipervínculo se encuentra la galería donde se podrá mostrar cantidad de imágenes y descripciones que ha página ofrece además de videos acerca del producto Más acerca de nosotros: Este es un hipervínculo que muestra cómo fue diseñado el producto y porque serie de pasos se fue solicitando para innovar y cambiar al logo actual Para realizar la opción de los hipervínculos realice una tabla donde pudiera dividir a cada uno de ellos, además de que me pareció importante ponerlos al inicio ya que es la página inicial de donde destaca todo

PAGINA WEB

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Después de ello realice una segunda tabla donde se puede ver en las siguientes imágenes están vacías pero al igual que la de los hipervínculos eta tabla fue diseñada para ser el inicio ya que ahí se encontrara la historia y un sitio extra La etiqueta fue la siguiente PAGINA WEB

1 0

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

PAGINA WEB

1 1

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Automáticamente se cambió la información al espacio de la tabla además de que sola se adecuo

Se realizó un cambio más que fue el donde fue muy sencillo ya que cuando ya tienes el cuerpo lo único que insertas son etiquetas muy sencillas que hacen cambios grandes en tu página web, para cambiar el fondo utilice <center><tabla border="1" width="90%" bgcolor="EDF8F8" BGCOLOR esta ayuda a seleccionar el color que quieras pero tienes que escribirlo en inglés, si no quieres colores básicos también puedes poner la clave de cada uno de los colores y automáticamente se ve

PAGINA WEB

1 2

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

El siguiente paso es uno de lo que me agrado más ya que lo que hice fue que un pequeño sitio de twitter se observara en mi página web , con el objetivo del estar al tanto de las notificaciones de VANS ya que me pareció una estupenda idea poder realizar este enlace lo que realice fue lo siguiente Ocupe la etiqueta <Td> Esta etiqueta es uno de las tablas que se puede observa dividida Después la página de twitter no mantiene en la opción de poder realizar un enlace que este en la página sin tener que entrar a la cuenta pero siempre y cuando haya internet, tú mismo puedes modificar el color y de que quieres que hable el enlace en mi caso de las novedades de VANS. Twitter te ofrece la etiqueta ya realizada que fue <a clases="twittertimeline" href="https://twitter.com/hashtag/vansstyle" data-widgetid="732033334537162753">Tweets sobre #vansstyle</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http': 'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+" ://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}( document,"script","twitter-wjs");</script> Lo único que tenemos que hacer fue insertarla en el td y cerrarlo así aparecerá en ese recuadro como se muestra a continuación

PAGINA WEB

1 3

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Uno de los últimos detalles que realice fue el de generar un reproductor de música este nos aparece en el lugar donde quieras insertarlo, yo lo inserte en la parte superior y me pareció el lugar indicado la etiqueta fue EMBED que es una etiqueta de audio la cual hace reproducir la canción que quieras seleccionar Mi etiqueta fue la siguiente y en la página web se mostró al igual de la siguiente manera

PAGINA WEB

1 4

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Embed

Al acabar de hacer mi página web, realice pequeños detalles como lo fueron el tamaño de la letra, color, estilo. Estos me resultaron muy fáciles y sencillos ya que lo que se hizo fue seleccionar etiquetas e insertarlas al inicio del texto que querías modificar y al mismo tiempo cerrar la etiqueta Las etiquetas que utilice fueron Para cambiar el etilo de letra fue el siguiente

PAGINA WEB

1 5

INSTITUTO DE INVESTIGACION Y ENSEร ANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

Para cambiar el color fue el siguiente

Mi pรกgina finalmente quedo de la siguiente manera

PAGINA WEB

1 6

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

ENSAYO Este proyecto fue complejo, es difícil de entender al principio y además de ello es difícil si no pones en practico lo enseñado, ya que la practica hace que razones y puedas desarrollar o jugar con lo que aprendiste, me aprecio un tema muy interesante no solo eso sino un tema que nos sirvió mucho y que necesita de tiempo para poder realizar un buen trabajo. Me agrado poder inferir en él y además de ello buscar más opciones o sacarme de dudas para poder invertir un poco más allá de lo que nos enseñó la maestra en clase , me parece que es muy interesante y no solo ello , me parece que nos servirá de mucho ya que estamos en momento donde las redes sociales nos dominan tanto con pros y contras pero que menos que utilizarlo para pros como el realizar una página donde puedas hacer ventas, compartir productos o incluso apoyar a una causa , así como esos u más motivos ya hay miles de páginas y siempre se empieza por algo. Sin duda alguna una página Web, es un complemento de mucha importancia para toda empresa que piensa en el progreso y que busca extenderse utilizando como medio principal esta potente herramienta que va en crecimiento cada día más, como lo es Internet. En definitiva una página Web, es como tener una sucursal u oficina de nuestra empresa abierta al público en general las 24 horas y 365 días al año ofreciendo información importante a clientes potenciales que buscan lo que ofrecemos sin importar en qué lugar del mundo se encuentren, ya que su empresa será mundialmente conocida.

PAGINA WEB

1 7

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. BACHILLERATO INCORPORADO A LA B.U.A.P. CLAVE 8109 LIDIA TELLEZ MIRANDA PAGINA WEB

PAGINA WEB

1 8