INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Instituto de investigaciones y enseñanza iberoamericana. Informática lll. ING. Lilia Rivera Gonzales. Integrantes: Morales Galicia Ciro. Rodríguez Flores Javier 3° “D” SALUD 2014-2015.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
SEMESTRE “B” INFORMATICA
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
INDICE: PRIMER PACIAL. Diseño. SEGUNDO PARCIAL. Introducción al diseño gráfico. TERCER PARCIAL. Página web.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Introducción ¿Qué es HTML? El lenguaje HTML es un estándar reconocido en todo el mundo, y cuyas normas, son definidas por un organismo sin ánimo de lucro llamado World Wide Web Consortium, másconocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegadorde cualquier sistema operativo. El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global". Desde su creación, el lenguajeHTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas aplicaciones electrónicas como buscadores, tiendas online y bancaelectrónica. Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos losusuarios muestran las páginas web después de leer su contenido HTML. Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño, es muy fácil de aprender y escribir por parte delas personas.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Objetivo General El objetivo general de este portafolio es dar a conocercomo se utiliza el leguaje HTML, el uso que posee este lenguaje en las muchas aplicacionesweb que hoy por hoy se encuentran en el mundo cibernético.
Objetivo Especifico Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el MicrosoftFront Page o el Macromedia Dreamweaver 3. Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que esla posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. Dar a conocer algunas etiquetas basicas de HTML que son sencillas de utilizar para poder crear un sitio web de manera facil,rapida y sencilla.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Primer Parcial “Estructura de la pagina”
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Estructura de la página (Logo)
Estructura de la página (Encuesta) Objetivo: el objetivo de esta práctica es que por medio de las encuestas realizadas al público (mujeres) es saber su opinión para empezar a realizar una página de moda que a las les agrade mas Material:
Word: Word es software que permite crear documentos en un equipo 5 preguntas como:
¿Qué tipo de vestidos te gusta ¿Qué logo te gusta más? ¿Qué tipo de color escogerías para una página de ropa?
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Figura 1.Bocetos participantes
¿Qué color le pondrías al logo? Etc. ImágenesPrimero se tiene que realizar un logo en el cual pretendas dar el mensaje del producto que se pretende anunciar y por medio de este se tiene lograr captar la atención del cliente y este consuma tu producto y pueda llegar a ser un éxito. En la figura 1 se puede mostrar algunos bocetos delos logos que se pretenden elegir para la pagina
Figura 2.Logo ganador
En la figura dos se muestra el logo que fue elegido por la mayoría de la mujeres el cual le pondrían a una página web de vestidos y este es el ganador. Estructura de la página HISTORIA.
Historia de la empresa. Era una joven que se dedicaba a hacer vestidos para el público en general, pero sentía que ella podría crear algo más que solo vestidos sencillos. Un día cuando fue e entregar un vestido a u teatro vio una convocatoria para un concurso de diseño de ropa, que la ganadora se podría ir a concursar hasta París, entonces la joven se pasó días haciendo sus mejores diseños para poder entrar al concurso. Mando sus diseños y datos al concurso para que la calificaran, le dijeron que había ganado el concurso, entonces le dijeron que le iban a pagar un viaje a parís para poder irse a concursar, al llegar le entregaron sus diseños para que los modificara para el concurso. Se fue a un parque para poderlo modificar cuando de repente vino un aire que voló sus diseños, desesperada los fue siguiendo hasta que cayeron a un rio quedando totalmente destruidos, triste la joven se sentó en una banca cuando levanto la vista vio una torre muy alta que se le asemejo a la figura de una mujer ,cuando empezó a ver por dónde estaba se dio cuenta que había muchas personas vestidas muy bien ,pero sentía que algo le faltaba a la ropa de esas mujeres en ese momento inspirada por las mujeres que había por ahí más la hermosa torre que había visto se empezó a inspirar ,entonces sentada en una mesa se puso a diseñar los vestidos para el concurso. Cuándo fue a
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
concursar a todos los jueces les encantaro los diseños con esto se le considero la ganadora a esa joven. A una señora le gustaron tanto sus diseños que decidió ayudar a la joven a que creara su propia línea de ropa para mujer, lo único que la joven quería era que el logo de la marca llevara la hermosa torre que había visto y la silueta de la mujer porque fue lo que le inspiro a crear esa línea de ropa. Decidió ponerle” la meilleure mode” que significa la mejor moda, su lema fue “creando estilo, marcando tendencia”. Estructura de la página MISION Y VISION.
Empresa MISION: Nuestra misión como empresa diseñadora es crear los mejores diseños para poder complacer los gustos de la gente, basándonos en los mejores estándares de calidad, teniendo un buen servicio, limpieza y puntualidad a la hora de entregar los servicios que se nos vallan solicitados. VISION: Nuestra visión es ser la mejor empresa diseñadora de todo México, siendo los clientes nuestra principal prioridad de producción, para también llegar hacer una de las mejores empresas internacionales de diseño, teniendo pedidos de todo el mundo.
Diseño MISION: Nuestra misión es hacer que las personas que vean nuestro diseño les agrade de tal manera que quieran comprar lo que venda nuestra marca o consumir nuestro producto .Basándonos en las mejores formas de llamar la atención del cliente, también metiendo colores llamativos y una tipo grafía innovadora. VISION: Nuestra visión es que a todas las personas les guste nuestro logotipo para que consuman los productos que promocionamos, porque vamos a complacer los gustos de la gente que nos contrate.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
OBJETIVO: Nuestro objetivo es crear un diseño muy impresionante para que a todas las personas les gusten los diseños que hacemos, pidiéndonos que les creemos diseños para muchos productos que se nos sean solicitados por muchas personas que requieran uno, complaciendo sus estándares de belleza.
Conclusión: Por medio de esta práctica aprendimos que para empezar a realizar una página se debería hacer una encuesta de mercado para ver la opinión del público y a partir de ahí empezar a realizar la pagina
Estructura de la página (Div) Objetivo: el objetivo de esta práctica es aprender a realizar la estructura de una página con las etiquetas básicas de html Material:
Block de notas: Etiquetas básicas como:
<Html>: esta etiqueta siempre se utiliza al principio del block <Body>: indica que se realizara el cuerpo dentro de esta puede ir la etiqueta “<Title>,”<Bg color<”. Entre otras. <Div>: indica que realizaran las divisiones de la página <Top>: esta etiqueta indica la distancia en vertical en donde se colocara la capa e indica la distancia del borde <Left>: indica la distancia en horizontal en la que se encontrara la capa <Height> indica la altura de la capa
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
<Widht>: indica la anchura de la capa Para empezar a realizar nuestra página necesitamos abrir nuestro block de notas, posteriormente empezar a escribir la etiqueta <html . ImágenesComo se muestra en la figura 1, para comenzar a realizar la separación se necesita abrir lo necesario en block de notas Figura 1.Estructura block de notas En la figura 2, se muestra en algún navegador
Figura 2. navegador Conclusión:
Esta práctica se puede decir que es muy fácil porque solo se hacen las divisiones pertinentes.
JUSTIFICACION CREACION DE CONCEPTO
OBJETIVO :
El objetivo de nuestro logo es que por medio de este se logre captar la atención del cliente y logre dar a entender el mensaje de lo que intentamos promocionar y que el cliente le agrade este logo y se sienta tranquilo con nuestros servicios y seamos una tienda confiable y que opte por nosotros no solo por quienes somos si no también que ofrecemos y así poder llegar a el gran mercado y ser una empresa exitosa.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
COLOR
Los colores que escogimos para nuestro logo fueron: Negro: este color lo escogimos ya que es un color que representa elegancia y aparte significa infinidad en nuestro logo lo utilizamos para el fondo ya que el cliente al ver al logo le llamaría la atención y entraría a un mundo desconocido que le agradara Rojo: este rojo es el color del amor pero sin en cambio en nuestro logro pretendemos resaltar la figura de la mujer ya que lo más preciado para las mujeres es su cuerpo y se ven sensuales con ese color Blanco: este color lo utilizamos ya que representa pureza y tranquilidad pretendemos que los clientes se sientan tranquilos
TIPOGRAFIA
Caligráficas: nosotros escogimos este tipo de letra ya que representa elegancia y aparte es un tipo de letra muy difícil de hacer por lo cual lleva un poco de delicadeza para hacerla
SIGNOS
Los signos que utilizamos son: Sombrero: es un forma de representar la elegancia en una persona El espacio: pretendemos que por medio de este las personas se adentren a un mundo desconocido Silueta: por medio de esta queremos representar lo más preciado que una mujer tiene y es algo muy valioso para ella es la belleza y un cuerpo bien torneado
TEXTURAS
FORMAS
LINEAS
La textura que utilizamos es liza para que no pierda la atención del cliente y también continua para que no se pierda la atención del cliente.
La formas son curvas ya que eso hace algo constante para el cliente curioso para ellos
Las lineas las utilizamos continuamente para que logre llamar la atención del cliente
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Segundo parcial
“Etiquetas de formato”
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
ETIQUETAS DE FORMATO 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
ETIQUETAS DE FORMATO (<BODY></BODY>) OBJETIVO: EL OBJETIVO DE ESTA PRACTICA ES APRENDER A REALIZAR LA PAGINA CON LA S ETIQUETAS BASICAS DE HTML MATERIALES: •
Block de notas:
•
Etiquetas básicas como:
<Html>: esta etiqueta siempre se utiliza al principio del block </Html>: esta etiqueta sirve para cerrar el html que se abre al principio
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Primero se tiene que abrir el block de notas para empezar a realizar la estructura primero se abre el <html> y después se cierra </html> ya que si no se cierra la pagina se puede volver infinita ImágenesEn la figura uno se muestra que se tiene que abrir el <hml> para empezar a desarrollar el block de notas En la figura dos se muestra que al abrir la etiqueta HTML se tiene que cerrar
Figura 1.Se abre HTML
Figura2.Se cierra HTML
Conclusión: en esta práctica aprendí a realizar un block de notas y aprendí lo más importante es que para empezar a desarrollarlo tenemos que abrir la etiqueta HTML
ETIQUETAS DE FORMATO (<DIV></DIV>) OBJETIVO: EL OBJETIVO DE ESTA PRACTICA ES APRENDER A REALIZAR LA PAGINA CON LA S ETIQUETAS BASICAS DE HTML MATERIALES: •
Block de notas:
•
Etiquetas básicas como:
<DIV>: esta etiqueta sirve para empezar hacer las divisiones de la pagina </DIV>: esta etiqueta sirve para cerrar el DIV ya que si no se cierra no se establecen los bordes correctos de la pagina Primero se tiene que abrir el block de notas para empezar a realizar la estructura primero se abre el <html> y después se abre la etiqueta<DIV> de ahí se cierra</div> y </html> ya
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
que si no se cierra la página se puede volver infinita ImágenesEn la figura uno se muestra que se tiene que abrir el <DIV> para empezar a desarrollar el FIGURA 1.Block de notas block de notas En la figura dos se muestra que al abrir la etiqueta DIV se tiene que cerrar Figura 2. Cerrar Div Conclusión
Conclusión: En esta práctica aprendí a realizar un block de notas y aprendí lo más importante es que para empezar a desarrollarlo tenemos que abrir la etiqueta HTML y a utilizar la etiqueta Div
ETIQUETAS DE FORMATO (<BGCOLOR></BGCOLOR>) OBJETIVO: EL OBJETIVO DE ESTA PRACTICA ES APRENDER A REALIZAR LA PAGINA CON LA S ETIQUETAS BASICAS DE HTML MATERIALES: •
Block de notas:
•
Etiquetas básicas como:
<BGCOLOR>: esta etiqueta sirve para colocar el color de fondo de la pagina </BGCOLOR>: esta etiqueta sirve para cerrar el BGCOLOR ya que si no se cierra no se establece el color de la pagina Primero se tiene que abrir el block de notas para empezar a realizar la estructura primero se abre el <html> y después se abre la etiqueta<Bgcolor> no olvidemos que esta etiqueta se encuentra dentro del Body de ahí se cierra</BGCOLOR> y </HTML> ya que si no se cierra la página se puede volver infinita Imágenes-
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
En la figura uno se muestra que se tiene que abrir el <BGCOLOR> para empezar a desarrollar el block de notas Figura 1. Block de notas En la figura dos se muestra el navegador Figura 2.navegador Conclusión: En esta práctica aprendí a realizar un block de notas y aprendí lo más importante es que para empezar a desarrollarlo tenemos que abrir la etiqueta HTML y a utilizar la etiqueta BG COLOR para colocar el color de la pagina web ETIQUETAS DE FORMATO (<BACKGROUP></BACKGROUP>) Objetivo: el objetivo de esta práctica es aprender a ponerle una imagen de fondo a la página. Materiales:
Block de notas: Etiquetas básicas como:
< Backgroup >: esta etiqueta sirve para poder poner una imagen de fondo </ Backgroup >: esta etiqueta sirve para cerrar el Backgroup ya que si no se cierra no se establece la imagen de fondo de la pagina Primero se tiene que abrir el block de notas para empezar a realizar la estructura primero se abre el <html> y después se abre la etiqueta< Backgroup > no olvidemos que esta etiqueta se encuentra dentro del Body de ahí se cierra</ Backgroup > y </HTML> ya que si no se cierra la página se puede volver infinita Imágenes_ Como se muestra en la figura 1 se muestra como se pone etiquetas para ponerle la imagen de fondo a la página,
Figura 1. Block de notas
En la figura 2, se muestra en el navegador .CONCLUSION: Es esta práctica aprendí como hacer que nuestra página tenga una imagen de fondo.
Figura 2.Navegador
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
TERCER PARCIAL
ETIQUETAS BASICAS
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Etiquetas basicas de html HTML es el lenguaje por el cual construimos una página web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una página web.
* <HTML>: indica el comienzo del documento HTML. * <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página. * <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. * <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
ETIQUETAS BASICAS (MARQUEE) Objetivo: el objetivo de esta práctica es aprender a hacer que las divisiones se muevan de una manera muy atractiva. Materiales: •Block de notas: •Etiquetas básicas como: Marquee: es para hacer que el texto alguna imagen se muevan de muchas formas. La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda. ImágenesFig. 1 escritura en el block de notas
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
En la figura 1 se muestra como se ve el block de notas, se muestra como se pone etiquetas para hacer que se muevan. En la figura 2, se muestra en el navegador.
Fig.2 se muestra en el navegador.
CONCLUCION: Es esta práctica aprendí como hacer que se muevan las cosas que están en la página web.
ETIQUETAS BASICAS (TABLE) Objetivo: el objetivo de esta práctica es aprender a ponerle una tabla a la página. Materiales: •Block de notas: •Etiquetas básicas como: Table=para hacer la tabla. Tr=para hacer las columnas. Td=para hacer las filas. El elemento de Tabla HTML (<table>) representa datos en dos o más dimensiones. 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. Imágenes: Como se muestra en la figura 1 se muestra como se pone etiquetas para
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Poder crear una tabla en la página. En la figura 2, se muestra en el navegador. Fig. 1 escritura en el block de notas
Conclusión: Es esta práctica aprendí como hacer que se nuestra página tenga una tabla. Fig.2 se muestra en el navegador.
Etiquetas básicas (Embed) Objetivo: el objetivo de esta práctica es aprender a ponerle sonido a nuestra página. Materiales: •Block de notas: •Etiquetas básicas como: Embed: esta etiqueta sirve para poder meter un formato de sonido. El Elemento HTML Embed ( <embed> ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in). ImágenesComo se muestra en la figura 1 se muestra como se pone etiquetas para Ponerle sonido a la página.
Fig. 1 escritura en el block de notas
En la figura 2, se muestra en el navegador.
Fig.2 se muestra en el navegador.
CONCLUSION: Es esta práctica aprendí como hacer que se nuestra página tenga sonido nuestra pagina.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
CUARTO SECCION
“ESTRUCTURA DEL SITIO WEB”
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
ESTRUCTURA DE LA PAGINA WEB. Hipervínculos. OBJETIVO: El objetivo de esta práctica es aprender a utilizar hipervínculos para que nos lleven a otra página. MATERIALES: Un block de notas. La etiqueta básica como: etiqueta <a href> sirve para colocar el
hipervínculo.
Como se muestra en la figura 1 es como se tiene que introducir en el block de notas para que se generen los hipervínculos. Fig. 1 escritura en el block de notas
En la figura 2 se muestra Como este aparece en nuestra página web.
Fig.2 se muestra en el navegador.
Conclusión: Esta práctica nos ayudó a aprender cómo utilizar un hipervínculo.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
ESTRUCTURA DE LA PAGINA WEB. Video. OBJETIVO: El objetivo de esta practica es aprender a utilizar la etiqueta embed src MATERIALES: Un block de notas. Una etiqueta básica como: embed src que sirve para poder introducir un video. Como se muestra en la figura 1 es como se tiene que introducir en el block de notas para que se muestre un video.
Fig. 1 escritura en el block de notas
En la figura 2 se muestra Como este aparece en nuestra página web.
Fig.2 se muestra en el navegador.
Conclusión: Lo que aprendimos fue como agregar un video a la pagina.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
ESTRUCTURA DE LA PAGINA WEB. formulario. OBJETIVO: El objetivo de esta practica es aprender a utilizar la etiqueta checkbox MATERIALES: Un block de notas. Una etiqueta básica como: checkbox esta nos sirve para agregar un lista de opciones Como se muestra en la figura 1 es como se tiene que introducir en el block de notas para que se muestre una opciones.
Fig. 1 escritura en el block de notas
En la figura 2 se muestra Como este aparece en nuestra página web.
Fig.2 se muestra en el navegador.
Conclusión: Lo que aprendimos fue como agregar unas opciones.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
Quinta seccion
“Ensayo”
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
“ENSAYO” A lo largo de este semestre estuvimos viendo el lenguaje HTML como sabemos este lenguaje es un estándar reconocido en todo el mundo, y cuyas normas, son definidas por 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 con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegado de cualquier sistema operativo. Este lenguaje se utiliza para elaborar páginas web en un block de notas y un block de notas es es un editor de texto simple incluido en los sistemas operativos de Microsoft el cual se utiliza desde 1985. Su funcionalidad es muy simple. Algunas características propias son: Ajuste de línea. Posibilidad de exportar a cualquier formato de texto no formateado (muy útil como recurso de emergencia para programar) Quizás para algunas personas el uso de este tipo de programas y lenguajes es demasiado fácil sin en cambio desde mi punto de vista mu costo un poco la verdad me arto el lenguaje HTML ya que debes de tener mucho cuidado al escribir las cosas correctas ya que si no están bien escritas las cosas no salen y eso es frustrante que no te salgan y las tienes que estar repitiendo y era más frustrante y un poco molesto cuando la maestra me estaba mirando y se enojaba porque no hacíamos bien las cosas. Pero a pesar de todo eso aprendí muchas cosas que no sabía la principal es realizar una página con HTML y algunas de sus etiquetas básicas para poder poner texto, imágenes, videos, música y color de fondo. Ya que este tipo de lenguajes está presente en la vida diaria y sería muy útil para algunos profesionistas como diseñadores sin en cambio no es para otras áreas pero lo importante es que aprendí algo.
INFORMÁTICA III = PORTAFOLIO DIGITAL= SEMESTRE “B”
¡No te amargues con tu propio fracaso ni se lo cargues a otro. Acéptate ahora o seguirás justificándote como un niño. Recuerda que cualquier momento es bueno para comenzar y que ninguno es tan terrible para claudicar!