ARMANI by Liliann Olvera

GIORGIO ARMANI

DISEÑO WEB

Página Web “Giorgio Armani” | Daniela Cinto y Liliana Olvera

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

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO MATERIA: Informática PROFESORA: Lilia Rivera PROYECTO: Practica de la Pagina Web. ALUMNOS: Sánchez Olvera Liliana Itzel Cinto Coalt Daniela GRADO: 3°

GRUPO: “A”

AREA: Ingeniería Fecha de entrega: 2 de Junio del 2015

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

INDICE

Introducción………………………………..………3 PRIMER PARCIAL Estructura página web……………………………6 SEGUNDO PARCIAL Etiquetas de formato……………………………..12 TERCER PARCIAL Etiquetas básicas…………………………………16 CUARTO PARCIAL Sitio web “Giorgio Armani”………………………..22 Ensayo del aprendizaje…………………………...32

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

INTRODUCCION Aprenderás a diseñar y maquetar tus ideas en sitios web funcionales y estilizados para uso personal o de trabajo, utilizando las herramientas más modernas y demandadas. Hoy en día, la tecnología no debe ser sólo funcional sino también de gran diseño. Las profesiones que incorporan diseño a la tecnología, son cada vez más requeridas, y muy bien pagas. Además, puedes tener flexibilidad para trabajar con clientes o empleadores desde cualquier parte del mundo. Somos muchos los que en nuestro día a día escuchamos una serie de palabras que nos resultan muy familiares por el simpe hecho de oírlas una y otra vez, pero, ¿sabemos realmente lo que son?

Una de las palabras más habituales en el ámbito de internet es el diseño web, es un término simple, a primera vista, pero bastante complejo si nos paramos a profundizar en él. Antes de contratar el diseño web, de una tienda online, por ejemplo, debemos pedir varios presupuestos, entrevistarnos con los respectivos comerciales de las agencias, estudiar, en medida de lo posible algunos conceptos básicos de este campo, si tenemos alguna duda, serán los propios comerciales los encargados de resolverla, ya que éstos usaran un lenguaje claro y conciso para que, sin tener apenas conocimientos del tema podamos hacernos una idea básica. Antes de encargar un proyecto de diseño debemos seguir las recomendaciones señalas, consultar un mínimo de 3 agencias y posteriormente entrevistarnos con los propios diseñadores para poder definir claramente que es lo que tenemos en mente.

Probablemente, la primera vez nos cueste explicar de un modo claro nuestras ideas, pero con un poco de paciencia y fuerza de voluntad conseguiremos trasladar nuestras ideas al diseñador, elegido.

Lo normal, es usar un briefin, un documento en el que se facilitan una serie de instrucciones a

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

seguir para conseguir los resultados deseados, normalmente se incluyen imágenes y ejemplos. Una vez el diseñador tenga claro su trabajo, se pondrá manos a la obra y nos pasará varios bocetos para ver cuál es el que mejor se ajusta a nuestras necesidades. No tiene por qué ser perfecto en su totalidad, bastan con que se ajuste a grandes rasgos, a partir de ahí, podemos sugerir modificaciones al diseñador para que lo termine a nuestro gusto.

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

>Zza

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

Estructura página web

Dentro de la estructura de la página web se consideran diversos aspectos tomados en cuenta desde el diseño de nuestro producto donde incluimos la psicología de los colores tomado en cuenta en nuestra página web para que desde el fondo hasta lo más mínimo concuerden con lo antes dicho en la tabla de justificado. Es necesario agregar lo siguiente para así poder justificar el porqué de los colores de nuestra página web, y su diseño en particular desde la música, fondo, imágenes, videos, etc. Esta página tomo una tendencia o temática femenina enfocada a los “perfumes y lociones” debido a la gran variedad de productos que tiene esta empresa, estructurando una nueva forma de innovar la página para lograr llamar la atención especialmente a damas. Todo lo siguiente fue agregado para poder justificar el porqué de todo lo que se modificó y agrego a la página web.

JUSTIFICACION CREACION DE CONCEPTO OBJETIVO :

COLOR

Nuestro objetivo al rediseñar este logotipo fue cambiar la perspectiva y saber lo que con base en la historia y el diseño anterior podemos ver más allá de lo que se podría hacer y crear algo insólito y nuevo, basándonos en 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 la persona para poder comprar el producto y que les llame la atención volviéndolo a rediseñar. *gris pardo inspira: -Neutralidad -Calidad -Autenticidad Versatilidad -Compromiso -Austeridad -Discreción – Modestia. Este color se usa para provocar que el usuario pudiera percibir que la fragancia es sutil, tenue y así el consumidor no llegue a hostigarse con dicho olor al igual que con la percepción de este color. *negro inspira: *Positivas: -Poder -Elegancia -Sofisticación Misterio -Fuerza -Sobriedad -Prestigio -Estilo -Modernidad

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

*Negativas: -Depresión -Muerte -Supresión -Amenaza – Miedo. Este color se escogió para darle más elegancia a las lociones y para los perfumes que están inclinados en el género masculino. El color negro es muy elegante y todas las lociones son elegantes por eso resaltamos este color , muy en específico dándole seguridad a la persona de comprarlo y haciendo que se vea elegante a sus propios criterios. *El color dorado inspira: *Positivas: -Riqueza -Brillantez Divinidad -Intuición -Lujo -Opulencia -Valía -Prestigio *Negativas: -Llamativas. El color dorado al igual lo usamos para resaltar elegancia y un poco de brillo , de poco color oro para resaltar la posición económica de la marca y al igual que resalte el brillo para darle luminaria para no aburrir al espectador.

TIPOGRAFIA

SIGNOS

Estos tres tipos de colores los hemos utilizado por elegancia y el dignificado que tiene por el cual dice un significado, es auténtico , misterioso , al igual nosotros cambiamos los colores a la elegancia como se caracteriza a personas , podría decirse mas sofisticadas. No pusimos tantos colores para no cansar la vista del expectador y lograr llegar al punto de la elegancia particular. Logrando cambiar y rediseñar el logotipo a un cambio totalmente diferente sin salirnos de las reglas. 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 al igual este tipo de tipografía se escogió para dar un poco de modernidad y resaltar el nombre a las letras del producto así que los consumidores reconozcan y recuerden este producto. 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

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

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 mas 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. El águila representa a la burguesía y la elegancia.

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.

DIVISION DE LA PAGINA WEB Para poder diseñar nuestra página web se necesitó hacer un borrador del sitio web el cual se dividió en capas, para así hacer más fácil el trabajo y distribuir correctamente los contenidos de la página, se utilizó una herramienta o (etiqueta) en particular y necesaria para nuestro proyecto, que más adelante hablaremos de las etiquetas básicas para la realización de un sitio web. A continuación se presentara el borrador de nuestra página principal y como es que se siguió auténticamente el mismo para lograr la meta del diseño de la página web.

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

IMG1. Borrador sitio web

IMG2. Sitio Web

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

El HTML no es más que una aplicación SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. A medida que nos afianzamos en el manejo de internet cada uno de nosotros pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas páginas, luego nos damos cuenta que existen buscadores los cual lo hace más interesante y por ultimo nos damos cuenta que en Internet no solamente se puede se puede ver la información sino que también se puede publicar. ¿y qué otra manera más fácil y más sencilla? Si Internet tiene acceso a todos los rincones del mundo. Para que varias personas se comuniquen es necesario que éstas hablen un mismo idioma. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML. A través de esta monografía explicaremos que es HTML, sus orígenes y el proceso de creación de una página web.

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

Etiquetas de formato

Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas etiquetas en principio no deben de ser usadas porque dejarán de existir en las nuevas versiones a partir de HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en este curso son: - Son etiquetas que han sido muy populares en el pasado y te puedes encontrar muchas páginas webs que hacen uso de ellas. - Son etiquetas reconocidas por prácticamente todos los navegadores actuales. - Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo CSS. Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo: <b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>. Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior.

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

HTML nos permite definir el formato de visualización del texto en la pantalla. Muy útil para cuando queramos resaltar o enfatizar un texto en especial. También muy usado para subrayar o escribir subíndices o superíndices. Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos Para ello utilizamos las siguientes etiquetas: 

<b>…</b> Poner texto en negrita



<FONT size=2>...</FONT> tamaño de la fuente

IMG3. FONT SIZE



<FONT color="#CO0000">...</FONT> color de la fuente

IMG4. FONT COLOR

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



<strong> y </strong>: para destacar una parte del texto. Normalmente el texto incluido entre esas etiquetas se representa en negrita.

IMG5. STRONG



<FONT FACE="Helvetica,Arial,Times"> Tipo de tetra

IMG6. FONT FACE 

<background> Fondo de la página

IMG7. BACKGROUND

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

Etiquetas básicas

El HTML no es más que el lenguaje en el que se escriben las páginas web, o más concretamente es el lenguaje con el cual se crean la mayoría de las páginas web. Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, y nuestros servidores muestran el contenido de las páginas web luego de haber leído su contenido HTML. Eguíluz dice: El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas el mundo del Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. Desde su creación el HTML es definido por muchas entidades y también por el mismo W3C, como un lenguaje universal utilizado exclusivamente para crear documentos electrónicos de cualquier tipo. HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web. Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las páginas web, desarrollar sitios con más flexibilidad y mejor construidos. Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.

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



<HTML>: indica el comienzo del documento HTML.

IMG8. HTML



<BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.

IMG9. BODY

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



<TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.

IMG10. TABLE 

<P>: el texto dentro de esta etiqueta forma un párrafo.

IMG11. P

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



<IMG>: imágenes.

IMG12. IMG 

<h1> nos dá el tipo de letra más grande.

IMG13. H1



<br> </br> El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.

IMG14. BR

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



<UL> ... </UL> Lista numerada. <LI> ... </LI> Elementos de una lista.

IMG15. Listas



IMG16. Video & audio

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

Sitio web “Giorgio Armani” OBJETIVO: El objetivo de esta práctica es conocer las herramientas y el funcionamiento de aquellas mediante ejercicios y tareas que se deberán de realizar para saber manejar de manera eficaz este programa. Nuestro propósito es lograr realizar una página web de manera eficaz con las etiquetas predeterminadas que se dieron en clase así poniendo en práctica los conocimientos aprendidos. La página tendrá una estructura coherente, con características de video, música, fondo, diseño entre otras cosas, todo esto a base del logotipo diseñado en el parcial anterior creando un conjunto , tanto la página web como el producto en vivo. HERRAMIENTAS Y PASOS: 1) PASO NO. 1 “ESQUELETO” La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc. La etiqueta <meta charset> determina como se verán ciertos caracteres, y lo más adecuado es usar utf-8. Para la primera sección el 1er. Div, contiene la cabecera de la página y está definida por un borde en medida de pixeles. Se harán tantos <div> como la persona desee para poder dividir y hacer y diseñar esqueleto de la página web según lo que él requiera o piense.

Una vez ya capturado y comprendido la estructura por favor guarda tu documento como Pagina1.html y abre con un navegador. Se ha agregado la etiqueta <text-align: center que lo que hace es centrar pero la más importante y que hace que el tamaño de nuestra sección cambie es <Font-size> que también se mide en pixeles. La etiqueta span al igual que todas las etiquetas en HTML tiene su etiqueta de apertura <span> y su respectiva etiqueta de cierre </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. El div se utilizara para todo el esqueleto de la página principal y las subpáginas que se construirán, tal es el caso del “Catalogo Armani”

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

IMG.1 ESQUELETO DE LA PAGINA WEB

IMG.2 USO DE LAS ETIQUETAS SEÑALADAS

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

Como podemos observar seguimos conservando las mismas estructuras pero ahora hemos agregado la etiqueta style="position:absolute; left: 750 width:600px; height:400px; .

Estas etiquetas nos permiten determinar el tamaño y la posición de nuestra división. Atributo position Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute. - relative indica que la posición de la capa es relativa a el lugar donde se estaba escribiendo en

página

momento

escribir

capa

con

etiqueta

- absolute indica que la posición de la capa se calcula con respecto al punto superior izquierdo de la página. Atributo top Indica la distancia en vertical donde se colocará la capa. Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto al borde superior de la página. Si el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en ese momento en la página hasta el borde superior de la capa. Atributo left Básicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en horizontal a la que estará situada la capa. Atributo height Sirve para indicar el tamaño de la capa en vertical, es decir, su altura. Atributo width Indica la anchura de la capa

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

PASO NO. 2 “DISEÑO DE LA PAGINA WEB” MARQUEE> Sirve para animar elementos dentro de la página. En concreto permite que el contenido que pongamos dentro de la etiqueta, ya sea texto, fotografías, o las dos cosas, se desplace horizontalmente por la página. La etiqueta marquee puede servirnos para hacer animaciones en páginas sencillas, sin ningún conocimiento de lenguajes de programación ni otras complicaciones semejantes. Para los que sólo conocen HTML es una herramienta perfecta si desean hacer que un elemento de la página se mueva. Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de contenido.

IMG.3 USO DE LAS ETIQUETAS SEÑALADAS

2) PASO NO. 3 “ TABLA” 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.

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

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.

IMG.4 ESTRUCTURA DE LA TABLA

3) PASO NO.4 “DISEÑO DE LA PAGINA WEB” Si no deseas un color solido entonces una imagen sustituye como se te indica en la siguiente imagen. Recuerda revisar el tipo de extensión que tiene la imagen y que esta, este dentro de la misma carpeta donde guardas tu bloc de notas y tu página web. Para agregar una imagen a nuestra página usaremos las siguientes referencias: <img src="imagenHTML.jpg"> Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el

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

mismo directorio. Si queremos colocar una imagen con HTML en una página que no está colocada dentro del mismo directorio, podemos usar una ruta absoluta:

<img src="folder/imagenHTML.jpg" La etiqueta <img> tiene varias propiedas como son: border, width, height, alt

IMG.5 IMAGENES

Sonido de fondo <bgsound> Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.

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

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre. Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

IMG.6 USO DE LAS ETIQUETAS SEÑALADAS

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y</embed> no hay que insertar nada. A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

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

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributosautostart y loop. El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false. El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

IMG.VIDEO

. 4) FORMULARIO

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

Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

5) HIPERVINCULO 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. Dependiendo de cual 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. Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por donde queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que ofrecerles un hipervínculo a nuestro correo electrónico.

IMG.HIPERVINCULO

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

Ensayo LILY

El diseño web lleva consigo diversidad de aspectos como se mostró en la primera parte de la practica ya que se toma en cuenta desde el diseño del producto (logotipo, colores, formas, símbolos) en la tabla de justificado para asi poder poner un fondo, música, video teniendo una adecuación conforme al producto sin salirnos del contexto ya que esto puede perjudicar la armonía y lo que uno quiere dar entender. Se maneja una simbología y códigos extensos (etiquetas) así llamadas en la informática, estos se manejaron de la manera más adecuada, todas estas etiquetas están en inglés y se debe saber bien su significado y su funcionamiento para usarlas en los momentos indicados. Se logró utilizar la mayoría de estas herramientas aplicándolas en nuestra página web. Desde el punto personal es una herramienta extensa que lleva consigo herramientas para lograr satisfacer lo que quiere comunicar, como fue en nuestro caso el “comercializar y hacer conocer a nuestro producto” de una manera informal llegando a todo el público sin salir ni cansar con comerciales, ya que el público se encarga de buscarnos, y nosotros estar ahí cuando se requiera. Se utilizó una temática de “Perfume de dama” ya que la marca GIORGIO ARMANI tiene una extensa variedad de productos y se quiso lograr nuestro propósito en una en particular. Se aprendió a llevar un diseño específico y acorde a lo que se quería transmitir, logrando utilizar todas las herramientas de HTML que nos proporciona aparte de las sesiones tomadas en informática. HTML como un lenguaje de programación nos ayuda a crear páginas web a nuestra propia manera, comunicando lo que queremos a nivel internacional y así interactuar de alguna manera con personas de otros lugares. Fue de alguna manera fácil pero complejo la creación de nuestra página web ya que hay que utilizar etiquetas (instrucciones) determinando la forma en la que debe aparecer en el navegador predeterminado. El diseño de la página web fue muy complejo ya que en él se tomaban diversos factores como la tabla de justificado en la cual engloba factores. El diseño de esta consiste en una planificación de cómo se desea realizarla “expectativa” de cómo es que queremos que quede nuestro sitio web para lograr llamar la atención de nuestro público que son las mujeres ya que comentábamos que fue planeado para un público fémenme. Para lograr todo esto que decimos tenemos que tener desde un buen diseño visual y creativo de todo aquello que vera nuestro público como de lo interior, como lo es el buen funcionamiento de las etiquetas para lograr una buena distribución de ellas, y colocándolas en los momentos predeterminados logrando un contacto directo entre en consumidor y el producto a ofrecer. Para lograr esto se debe usar un correcto uso de lenguaje HTML y asi lograr todo lo que queremos que tenga nuestra página web.

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

Ensayo DANY

Es indispensable hoy en día la utilización del lenguaje HTML ya que mediante el podemos interactuar y comunicarnos con otros sitios y personas de otros lugares, en nuestro caso quisimos comercializar nuestro producto de una manera muy común hoy en día “sitio web” presentando nuestras promociones, lo que la empresa quiere dar a conocer, en general el producto para lograr convencer a nuestros usuarios que se sientan identificados con la marca. Pero para lograr llevar este propósito a la realidad tuvimos que aprender a utilizar HTML y la aplicación de sus etiquetas básicas y de formato para hacer más atractivo nuestro sitio web y así lograr el propósito de ventas. El hacer una página web no es del todo difícil pero si es complicado saber cuáles herramientas utilizar en el momento adecuado y en donde o que parte hay que colocarlas, además de que un block de notas es un programa muy rudimentario sabiendo que hay diferentes programas para la creación de páginas web. También cabe mencionar que el diseño de la página se tiene que tomar en cuenta a lo que es y marca la empresa, por lo que nuestra página, no pudimos crear un diseño con el que ya se identifica la marca, así que tomamos el toque femenino de la empresa dándole un toque más natural debido a sus tendencias, que es lo que representa la belleza y delicadeza de una dama. El sitio web también debe contener elementos visuales más que escritos, pues el visitante o usuario de esta página podría aburrirse y por ende abandonarla , por lo que el diseño también va involucrado en esta.

La creación de una página web se basa más en el diseño, pues no se pondrá o colocara elementos poco atractivos en la página principal, organizando información importante de manera concreta y en los lugares adecuados. Por ejemplo en la creación de la primera página web el requerimiento era crear un sitio web estático pues el usuario solo iba a ver cierta información que nosotros pusimos; como elementos básicos, misión, visión, un índice del contenido, etc. Mostrando así información básica de la empresa. Detallando más al crear un sitio web se le agrego más organización e información breve, cambiando también la esencia de la página haciéndola más femenina pues es al público que nos dirigimos, mostrando así que la belleza de la mujer es natural. El crear esta página fue muy complejo, estresante, pero así nosotros podemos aplicarlo en la vida diaria, también aprendimos que no solo es “crear” una página web, sino que en esta se debe reflejar la esencia ya conocida de la empresa.