Instituto
de
Investigación
y
Iberoamericano A.C.
PORTAFOLIO SEMESTRE B
Prof. Lilia Rivera Gonzales
Iturbide Pedraza Ma. Guadalupe 3° “C” Fecha de entrega: 15-mayo-2016 CICLO ESCOLAR 2015-2016
1
Enseñanza
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
INDICE Introducción……………………………………………..3 Objetivo…………………………………………………..4 Logotipo…………………………………………………. 5 Esqueleto………………………………………………… 9 Titulo…………………………………………………….. 10 Color de fondo………………………………………... 11 Música…………………………………………………...12 Video…………………………………………………….13 Historia…………………………………………………...14 Imágenes……………………………………………….15 Tabla de contactos……………………………………16 Hipervínculo…………………………………………….17 Página web terminada……………………………….18 Ensayo………………………………………………….. 19
2
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
INTRODUCCIÓN La página web se define como un documento electrónico el cual contiene información textual, visual y/o sonora que se encuentra alojado en un servidor y puede ser accesible mediante el uso de navegadores. La creación y desarrollo de una página web se realiza bajo un lenguaje de programación capaz de ser interpretados por los navegadores, lenguajes como el HTM , PHP, ASP, JSP o RUBY. Una página Web es la unidad básica del World Wide Web, o simplemente Web, como se le llama comúnmente. Una página de Internet o página Web es un documento electrónico adaptado particularmente para el Web, que contiene información específica de un tema en particular y que es almacenado en algún sistema de cómputo que se encuentre conectado a la red mundial de información denominada Internet, de tal forma que este documento pueda ser consultado por cualesquier persona que se conecte a esta red mundial de comunicaciones y que cuente con los permisos apropiados para hacerlo. Una página Web tiene la característica peculiar de que el texto se combina con imágenes para hacer que el documento sea dinámico y permita que se puedan ejecutar diferentes acciones, una tras otra, a través de la selección de texto remarcado o de las imágenes, acción que nos puede conducir a otra sección dentro del documento, abrir otra página Web, iniciar un mensaje de correo electrónico o transportarnos a otro Sitio Web totalmente distinto a través de sus hipervínculos. Estos documentos pueden ser elaborados por los gobiernos, instituciones educativas, instituciones públicas o privadas, empresas o cualquier otro tipo de asociación, y por las propias personas en lo individual.
3
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
Objetivo El objetivo de este portafolio es para dar a conocer la página web que se realizó por el alumno y la ayuda del asesor, exponiendo que habilidades se obtuvieron con este proyecto de acuerdo al sistema de competencias.
HERRAMIENTAS frameset
autoestart
frameset cols
height
frameset rows
table
frameset frameboder
border
frameset border color
img src
url
value
frame name “música”
size
frame name no resize
marlenght
block de notas
checked
marquee down up basound loop width
4
LOGOTIPO
5
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
Para empezar con la creación de la página web primero se necesitó diseñar un nuevo logotipo de alguna marca que tomamos, en este caso se tomó la marca chokis de la empresa Gamesa donde tomamos la historia, los valores, objetivos, visión y misión de esta.
HISTORIA DE LA EMPRESA
VALORES, OBEJTIVOS, VISIÓN
En este trabajo se utilizó el editor “Corel Draw” donde como primer paso tuvimos que diseñar tres logotipos nuevos y de ellos llevar una tabla de justificación creación de concepto que se componía por objetivo, color, tipografía, signos, texturas, formas y líneas.
JUSTIFICACIÓN CREACIÓN DISEÑO DE CAMBIO DE LOGOTIPO
6
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
Al tener los tres diseños tuvimos que crear 50 encuestas que constaban de 5 pregunta para que los consumidores votaran por el mejor.
ENCUESTA
Al crear nuestras gráficas se obtuvo como resultado que el tercer diseño sería el ganador
y al
seleccionar uno tuvimos que
empezar con nuestra tabla de justificación. Donde como objetivo se obtuvo “Cambiar la imagen publicitaria de las galletas chokis diseñando un nuevo concepto que represente a la empresa mexicana sobresaliendo sus valores en el país” sus colores fueron café (muestra eficacia), chocolate (despertar el apetito) negro (dar un toque serio) blanco, rojo y verde (bandera mexicana). La tipografía se respetó de acuerdo al logo original, los signos fueron unas chispas de chocolate, la textura fue visual (Percibir la textura de la forma de una galleta), la forma fue un rectángulo (el producto es de calidad) y las líneas fueron finas (para darle un toque de elegancia).
GRÁFICAS
7
JUSTIFICACIÓN CREACIÓN DE DISEÑO
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
Al tener ya editado nuestro logotipo se crearon tres diferentes medios publicitarios en este caso fue un cartel, una tarjeta de presentación y un anuncio. Este fue el primer paso para empezar nuestra página web.
CARTEL
TARJETA DE PRESENTACIÓN
ANUNCIO
8
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
ESQUELETO OBJETIVO: Que el alumno sepa utilizar frameset para realizar el esqueleto de su página web. HERRAMIENTAS: Block de notas y etiquetas
FRAME NAME
FRAMESET COLS,
HTML.
FRAMSET ROWS, El primer paso que se hizo para la página web fue crear el esqueleto de esta, donde se realizó con la práctica 2.1
PARA CREAR LA DIVISIÓN DEL TÍTULO
PARA CREAR LAS DOS DIVISIONES DEL LADO IZQUIERDO DE LA PÁGINA
PARA CREAR LAS TRES DIVISONES DEL LADO DERECHO DE LA PÁGINA
PÁGINA WEB TERMINADA EN HTML CON LAS DIVISIONES
Conclusión: Este primera parte de la página a realizar fue al principio demasiado complicado porque desconocía como lo hacían, sin embargo con la ayuda del docente y algunos tutoriales se pudo lograr.
9
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
TITULO OBJETIVO: Que el alumno pueda crear su título con etiquetas básicas, como BGCOLOR, FONT COLOR Y BODY. HERRAMIENTAS: -BODY
-MARQUEE
-BGCOLOR
-H1
-FONT COLOR
-SPAN
-HTML -DIV En este paso, el título fue la marca de nuestro producto “chokis” aquí colocamos las herramientas ya mencionadas para lograr obtener nuestro título.
BLOCK DE NOTAS CON LAS HERRAMIENTAS NECESARIAS PARA EL TÍTULO
TITULO INSERTADO EN LA PÁGINA WEB
CONCLUSIÓN: Para realizar el título de nuestra página gracias a la práctica que la profesora nos dio pude seguir los pasos y así se me hizo una menos complicada para la realización.
10
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
COLOR DE FONDO OBJETIVO: Que el alumno pueda poner color de fondo a su página web con BGCOLOR, FONT COLOR Y HTML. HERRAMIENTAS: -BGCOLOR -BODY -HTML Aplicación de las etiquetas básicas, donde se pondrá el color de fondo a la página, en este cado para obtener el color tuvimos que buscar los códigos de los colores de HTML para seleccionarlo en nuestra página.
ETIQUETA DE MARQUESINA CON COLOR
APLICACIÓN DE LA ETIQUETA BODY COLOR
CONCLUSION: Igual que el título este paso realizado para poner color al fondo de la página fue algo fácil porque también con la práctica que nos dio la docente fue algo sencillo realizarlo.
11
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
MÚSICA OBJETIVO: Que el alumno pueda poner en su página web música utilizando etiquetas multimedia ya vistas en clase. HERRAMIENTAS: -HTML
-AUTOSTART
-BODY
-LOOP
-CENTER
-WIDTH
-BODY BGCOLOR
-HEIGHT
-EMBED SR En este paso tuvimos que primero escoger la música adecuada para nuestros usuarios “chokis” y se sienta a gusto y en ambiente al entrar a nuestra página.
ETIQUETAS MULTIMEDIAS EXPUESTAS EN EL BLOC PARA INSERTA LA MÚSICA EN LA PÁGINA
PÁGINA WEB CON LA MÚSICA INSERTADA
CONCLUSION: Al empezar con la música si ame resulto algo difícil porque por alguna letra mal no podía vincularse pero después de ver algunos tutoriales lo logre.
12
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
VÍDEO OBJETIVO: Que el alumno utilice etiquetas multimedia para agregar su vídeo o comercial en la página. HERRAMIENTAS: -HTML
-AUTOSTART
-BODY
-LOOP
-CENTER
-WIDTH
-BODY BGCOLOR
-HEIGHT
-EMBED SRC En este paso tuvimos que primero crear nuestro propio comercial o algún comercial ya hecho por la marca editarlo con nuestro logo y utilizando las etiquetas multimedia proporcionar en la página el vídeo.
BLOC DE NOTAS CON LAS ETIQUETAS MULTIMEDIA PARA AGREGAR EL VÍDEO
PÁGINA WEB CON EL VÍDEO INSERTADO
CONCLUSIÓN: Después del editado de la música para el vídeo se me hizo más fácil y lo mismo con tutoriales fue que me guiaba.
13
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
HISTORIA OBJETIVO: Que el alumno pueda insertar en su página web parte de quién o como empezó su fábrica, en este caso la historia. HERRAMIENTAS: -BODY
-HTML
-BGCOLOR -H1 En esta parte de la página web se puso de lado izquierdo la historia de la empresa, utilizando las herramientas ya antes mencionadas.
BLOCK DE NOTAS CON ETIQUETAS BÁSICAS PARA CREAR EL TEXTO DE LA HISTORIA
PAGINA WEB CON HISTORIA TERMINADA
CONCLUSION: Para hacer la historia no se me hizo muy difícil ya que me guie con algunos apuntes en clase y lo que explicaba el docente en el aula. Las herramientas utilizadas fueron algo fáciles.
14
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
IMÁGENES OBEJTIVO: Que el alumno utilice el IMG para editar las imágenes con diferentes formatos que se agregaran a la página web. HERRAMIENTAS: -HTML
-BORDER
-BODY
-WIDHT
-BODY BGCOLOR
-HEIGHT
-CENTER
-ALIGN
-IMG SRC En este paso se agregó una imagen que tenía que ser compatible con la página es este caso fue jpg.
BLOCK DE NOTAS CON FORMATOS PARA AGREGAR LA IMAGEN IMAGEN AGREGADA A LA PÁGINA WEB
CONCLUSION: Las imágenes para agregarse no fueron tan complicadas sólo al principio donde tenía que editarse el formato, pero con la asesoría del docente en clase y los apuntes pude guiarme.
15
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
TABLA DE CONTACTOS OBJETIVO: Que el alumno pueda agregar una fuente de información para su página web. HERRAMIENTAS: -HTML
-TABLE
-BODY
-TR
-CENTER
-TD
-BODY BGCOLOR En este paso se agregó información donde los usuarios pueden contactar a la empresa con la ayuda de las herramientas ya antes mencionadas.
BLOCK DE NOTAS PARA UTILIZAR TABLE DONDE SE PROPORCIONO CONTACTOS
PÁGINA WEB CON CONTACTOS AGREGADOS
CONCLUSION: A mi parecer creo que el paso más sencillo que encontré en la realización fue este, porque fue tan claro como lo explico el docente y la guía en la libreta.
16
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
HIPERVINCULO OBEJTIVO: Que el alumno agregue hipervínculos en su página web. HERRAMIENTAS: -HTML -BODYCENTER -BODY BGCOLOR -H1 En este paso se utilizaron las herramientas antes mencionadas para crear hipervínculos donde se abrirán en la página al seleccionarlo, utilizando galería y valores.
BLOCK DE NOTAS CON LOS HIPERVINCULOS
PÁGINA WEB CON EL HIPERVÍNCULO AGREGADO
CONCLUSION: Este paso fue realmente algo complicado, un poco estresante porque al principio no salía bien, pero después lo logre con ayuda de tutoriales.
17
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
PÁGINA WEB TERMINADA
FINALIZACIÓN DE LA PÁGINA WEB
18
Instituto de Investigación y Enseñanza Iberoamericano A.C. Iturbide Pedraza Ma. Guadalupe 3° “C” Portafolio semestre B Informática III
PÁGINA WEB (ensayo) La página web fue un reto muy grande para mí, en lo personal gracias a ella pude conocer algunas habilidades que tenía muy escondidas y que también algunas que poseía las pude mejorar, pude mostrarme que con la perseverancia y el buscar cómo lograrlo me hizo crecer no sólo en la materia sino también para otras donde sé que lo que aprendí con este proyecto puedo ponerlo a prueba en otras áreas. Tengo que reconocer que al principio cuando el docente lo explicaba me confundía demasiado hasta la primera vez que tuvimos la primera práctica que nos ayudaría a lograrlo, pero con las páginas que la profesora nos daba para saber mejor como hacerlo fue de gran ayuda y también gracias a la asesoría de mis compañeros pude lograr este proyecto. Espero que lo aprendido no sólo se quede en este parcial sino que al tiempo pueda utilizarlo en la universidad, mi trabajo o hasta en casa para que no sea en vano y porque realmente me gusto es muy complejo pero no fue imposible. Cada una de las herramientas que nos dio tenían demasiada facilidad para manejar lo único que necesitaba era indagar más y poder aplicarlo. Para finalizar puedo decir que fue un reto que vencí porque entiendo que todos tenemos la capacidad lo que tenemos que hacer es creerlo y ponerlo en práctica. También aprendí que es bueno obtener la ayuda de los demás para que en lo que quiera hacer pueda salir mejor, la página web no sólo me dejo conocimientos en la materia sino también personales.
19