BENEMRITA UNIVERSIDAD AUTNOMA DE PUEBLA NIVEL MEDIO SUPERIOR

INFORMTICA III
MATERIAL DIDCTICO CON ENFOQUE EN COMPETENCIAS

GUA METODOLGICA Y ANTOLOGA

PARA EL ALUMNO
(Segunda Parte)

ACADEMIA GENERAL DE INFORMTICA

NOMBRE DEL ALUMNO (A): ___________________________________________ NMERO DE COMPUTADORA:__________________________________________ GRADO Y GRUPO: ___________________________________________________ NOMBRE DEL PROFESOR (A):__________________________________________ ESCUELA: _________________________________________________________

Diciembre 2011

ACTUALIZACIN Y REESTRUCTURACIN POR INTEGRANTES DE LA ACADEMIA GENERAL DE INFORMTICA: PROFESORES: Autores Jos Caseln Rosas Jos Rosas Ibarra Javier Daz Snchez Minerva Gmez Marcos

Colaboradores: Ma. Del Pilar Beatriz Guevara Castillo Jorge Sandoval Robles Ana Claudia Dinorn Arrieta Mnica Campos Snchez Maricela Snchez Hernndez Edith Jurez Hernndez Mara de Lourdes Carren Snchez Armando Torres Len Alberto Vega Bez Adriana Len Rodrguez

PRESENTACIN DE LA GUA METODOLGICA Y ANTOLOGA PARA EL ALUMNO La presente gua metodolgica de Informtica III para el alumno, constituye la parte final del desarrollo del aprendizaje, en el rea de Informtica, del Plan de Estudios vigente (plan 06) del Nivel Medio Superior con el enfoque por competencias para el tercer ao del Bachillerato Universitario. Este material, comprende la segunda parte de un total de dos para el curso; apoyar en el desarrollo de las competencias que se definen en el nuevo programa con este enfoque a travs de actividades de aprendizaje significativo que incluyen conceptos de temas como programas en lenguaje de programacin C y el uso adecuado y eficiente de las herramientas grficas computacionales de diseo grfico y construccin de sitios web. En todas las actividades se fomentan valores como la tica y la responsabilidad en la aplicacin de los conocimientos adquiridos. Esta gua metodolgica y antologa est estructurada de la siguiente manera: Presentacin de la gua metodolgica para los alumnos Programa El bloque II y III en donde se definen cada una de las actividades que debern desarrollar en cada sesin de trabajo. En el Bloque II se presentan ejemplos completos de programas en lenguaje de programacin C++ que dan solucin a una problemtica determinada. En el bloque III se parte de la necesidad de comunicacin que tiene todo ser humano, se presentan actividades para utilizar las herramientas de diseo para comunicar con tica y responsabilidad algn contenido acadmico o de inters general o comercial. Instrumentos de evaluacin que se aplicarn durante el aprendizaje y como retroalimentacin para desarrollar la habilidad de autogestin. Bibliografa de referencia y de consulta.

Este material est diseado para ayudar al estudiante en la solucin de situaciones problemticas que se presenten de manera cotidiana y que se puedan resolver a travs del diseo de un programa de computadora, con ello el estudiante desarrollar las competencias planteadas en el programa incluyendo conceptos, habilidades, y actitudes y valores. El material se desarrolla por talleres que conforman cada uno de los bloques definidos en el programa. En cada taller se definen actividades en las que se presenta un problema a partir de una o varias preguntas generadoras, las cuales van induciendo el aprendizaje de los conceptos necesarios para dar solucin a la problemtica planteada. Al final, los estudiantes reflexionan sobre su aprendizaje utilizando diversos instrumentos de retroalimentacin (tablas, preguntas, esquemas, mapas, entre otros).

BLOQUE II: ESTRATEGIAS DE SOLUCIN DE PROBLEMAS A TRAVS DE LA PROGRAMACIN MAPA CONCEPTUAL DEL BLOQUE

BLOQUE II:ESTRATEGIAS DE SOLUCIN DE PROBLEMAS A TRAVS DE LA TIEMPO: PROGRAMACIN UNIDAD DE COMPETENCIA: Plantear estrategias de solucin a problemas cotidianos utilizando de forma

eficiente y responsable la informtica mediante un proyecto en lenguaje de programacin a nivel aplicativo y creativo.
PROBLEMAS A RESOLVER:

1.

Plantear la solucin a los siguientes problemas a travs de programas en lenguaje C: Determinar la condicin fsica a partir de calcular el ndice de masa corporal Conocer y entender las operaciones que puede llevar a cabo un cajero automtico bancario. Concientizar sobre el adecuado uso del servicio de telefona celular implementando una estrategia de solucin que calcule el costo del servicio.

PLANEACIN DIDCTICA.
SABERES Procedimentales Plantear los algoritmos o diagramas de flujo a los problemas propuestos. Convertir el algoritmo a pseudocdigo Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocdigo a cdigo fuente) Compilar el programa Detectar y corregir los errores Ejecutar el programa, observar y comprobar los resultados.

Declarativos Conceptos: Algoritmo en pseudocdigo Tipos de lenguajes de programacin Lenguaje estructurado de alto nivel C Cdigo fuente, archivo ejecutable Editor del lenguaje C Palabras reservadas Tipos de datos Sintaxis Errores de sintaxis y de lgica Compilar un programa Ejecutar, probar o correr un programa Libreras Funcin principal (main) Funciones predefinidas Sentencias de decisin: ifelse, elseif, switch-case Sentencias de repeticin:para (for), mientras (while), hacermientras (do-while)

Actitudinal/Valorales tica en el uso de la tecnologa informtica y de la informacin Disciplina Responsabilidad Tolerancia ante la diversidad de opiniones Respeto a los compaeros Disposicin al aprendizaje autnomo, al razonamiento deductivo y enfrentar retos

CRITERIOS DE DESEMPEO Conocimientos -Uso de palabras reservadas, sintaxis, lgica y funcionamiento de un programa Habilidades -Plantear estrategias de solucin a situaciones problemticas, mediante la elaboracin de algoritmos, diagramas de flujo y codificacin en un lenguaje de programacin estructurada. Actitudes y valores -Tolerancias ante la diversidad de opiniones, respeto y compromiso en el trabajo colaborativo. COMPETENCIAS

Genricas/Atributos 5. Desarrolla innovaciones y propone soluciones a problemas a partir de mtodos establecidos. Atributos: 1. Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo. 2. Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenmenos. 3. Utiliza las tecnologas de la informacin y comunicacin para procesar e interpretar informacin. 7. Aprende por iniciativa e inters propio a lo largo de la vida. Atributos: 1. Define metas y da seguimiento a sus procesos de construccin de conocimiento. 2. Identifica las actividades que le resultan de menor y mayor inters y dificultad, reconociendo y controlando sus reacciones frente a retos y obstculos. 3. Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana. 8. Participa y colabora de manera efectiva en equipos diversos. Atributos: 1. Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso de accin con pasos especficos. 2. Aporta puntos de vista con apertura y considera los de otras

Disciplinares Bsicas 12. Utiliza las tecnologas de la informacin y comunicacin para producir diversos materiales de estudio e incrementar sus posibilidades de formacin.

Extendidas 5. Aplica los principios ticos en la generacin y tratamiento de la informacin. 10. Analiza los beneficios e inconvenientes del uso de las tecnologas de informacin y comunicacin para la optimizacin de las actividades cotidianas. 11. Aplica las tecnologas de informacin y comunicacin en el diseo de estrategias para la difusin de productos y servicio

personas de manera reflexiva. 3. Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro de distintos equipos de trabajo.

ESTRATEGIAS DE ENSEANZA
Programacin. Se retoman los algoritmos elaborados y se explica el pseudocdigo Dirige una lluvia de ideas sobre los conceptos a aprender de los lenguajes de programacin

ESTRATEGIAS DE APRENDIZAJE
Trabajo y discusin en parejas Bsqueda de informacin y colaboracin espontnea Intercambiar ideas con compaeros que entiendan mejor el tema Asesora del profesor Participan con sus conceptos y

RECURSOS DIDCTICOS
1. Libreta Manual de prcticas y 2. antologa Resumen programa Pintarrn del 3.

EVIDENCIAS Y/O PRODUCTOS

Algoritmos y diagramas de problemas propuestos. Cdigo fuente en lenguaje C de los problemas propuestos. Proyecto final en lenguaje C.

Laboratorio de cmputo con equipos y mobiliario suficientes (mx. 2 alumnos por computadora). Mesas y sillas que les

* Todas las evidencias se entregan impresas y en archivos digitales.

estructurada. Usa ejemplos de programas sencillos. Usa tablas para comparar el algoritmo, diagrama y programa de un problema. Plantea problemas y asesora en el planteamiento de la solucin. Hacer pausas para: reflexionar y tomar apuntes. Formular preguntas o comentarios. Responde a preguntas. Usa algoritmos, diagramas y diapositivas.

explicaciones Elaboran algoritmos y diagramas de flujo Elabora los programas apoyndose en los algoritmos previos, en lenguaje C. Compila, ejecuta y comprueba resultados.

permita trabajar cmodamente. Ventilacin e iluminacin adecuadas. Can Sealador lser Memorias USB Equipo de audio y micrfono Internet, compilador y de lenguaje C Presentaciones digitales

BLOQUE II. ESTRATEGIAS DE SOLUCIN DE PROBLEMAS A TRAVS DE LA PROGRAMACIN

Taller 1. Entorno de programacin en lenguaje C++ Actividad 1. Mi primer programa en lenguaje de programacin C++ (1 sesin, 100 min.) En la actividad 1 del bloque anterior se abord la problemtica del ndice de masa corporal de una persona. Se elabor un algoritmo para automatizar el clculo y se analizaron las condiciones fsicas de las personas a partir del ndice de masa corporal calculado. Tambin se elabor el pseudocdigo del algoritmo correspondiente en PseInt. El algoritmo que calcula el ndice de masa corporal es el siguiente: 1. 2. 3. 4. 5. 6. Inicio Dar el peso en kilogramos, (peso) Dar la estatura en metros, (estatura) Realizar la siguiente operacin: IMC = peso/(estatura*estatura) Mostrar el resultado, Tu ndice de Masa Corporal es: , IMC Si IMC<18.5 entonces Indicar La persona est baja de peso 7. Si IMC>=18.5 y IMC<25 entonces Indicar La persona est en su peso normal 8. Si IMC>=25 y IMC<30 entonces Indicar La persona tiene sobrepeso 9. Si IMC>=30 entonces Indicar La persona tiene problemas de obesidad 10. Fin */ El cdigo correspondiente en lenguaje de programacin c++ se presenta a continuacin: (lo escrito despus de las barras // y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++. #include <stdio.h> // Librera estndar de entrada y salida (permite utilizar funciones como printf() y scanf() #include <conio.h> // Librera de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy() void main() { float peso, estatura, imc; // Declaracin de programa principal // Llave de inicio de programa // Declaracin de variables

printf("Programa para calcular el indice de masa corporal "); // printf. (Escribe en pantalla)

printf("Proporciona el peso en kilogramos"); scanf("%f",&peso); printf("Proporciona la estatura en metros"); scanf("%f",&estatura); imc=peso/(estatura*estatura);

// scanf. Lee de pantalla y guarda el valor en la variable peso

// Asigna a la variable imc el valor la operacin

printf("Tu masa corporal es: %f ",imc); // printf. Escribe en pantalla texto y el contenido de la variable imc. if (imc<18.5) //Sentencia de condicin printf("La persona esta baja de peso"); if (imc>=18.5 && imc<25) printf("la persona esta en su peso normal"); }

// Llave de fin de programa

Evidencia: Capturar el programa anterior en el editor de turbo C++ incluyendo las condiciones de obesidad y desnutricin (vea la tabla de la actividad 1 del parcial 2).

El editor de Turbo c++ 4.5 Para acceder al editor ejecutamos Inicio, todos los programas, Turbo C++ 4.5, y Turbo C++. La pantalla se muestra como sigue:
A B

Componentes
A. Barra de ttulo B. Barra de mens
C. Ventana del editor

D. Ventana de mensajes

El panel est o puede ser dividido en varias pantallas como cualquier aplicacin de Windows, en este caso se observa la ventana editando el programa del archivo cout.cpp (extensin por default de los programas escritos en Turbo c++ 4.5) y la ventana de mensajes que nos indica los errores de sintaxis que pueda tener el programa. Actividad 2. Lectura Recomendaciones para iniciar en el mundo de la programacin: S paciente, elaborar un programa requiere de esfuerzo, concentracin, creatividad, suspicacia, intuicin, disciplina y hacer las cosas con pasin. Puedes echar a perder tu da si no analizas el problema y no haces un algoritmo primero, los errores de sintaxis y sobre todo lgicos pueden darte dolores de cabeza. Cuando parece que nada se soluciona y que no sale nada, es momento de tomar un descanso, realizar alguna actividad recreativa, ldica, deportiva o que se yo (de lo que estn pensando hacer si los relaja y estimula adelante!!)

10

La computadora no piensa, no razona, no deduce todo lo que le ordenes lo har, as que si no obtienes los resultados que deseas es seguro que debes revisar tu cdigo, no es la mquina, ni el compilador de C, ya que quien escribe las rdenes eres tu. No seas tan cruel con los calificativos a la mquina, pues en realidad es el usuario el responsable. La programacin es una estrategia de solucin a los problemas o necesidades cotidianas, slo estamos automatizando los procesos utilizando una computadora a travs de programas. Existe una gran variedad de programas que resuelven necesidades bsicas: o El funcionamiento de un celular, computadora, ipad, ipod y sus aplicaciones o

Evidencia: Elaborar un mapa mental sobre la lectura anterior, resaltando los datos y la informacin contenida. Para mapas mentales consulte los siguientes sitios: http://sociologiac.net/2008/09/02/11-aplicaciones-gratuitas-para-crear-mapasmentales/ Gratuita Freemind. Semantik. RecallPlus. Labyrinth. PersonalBrain. Producto: Documento en Word con los siguientes elementos: Portada Introduccin Desarrollo (mapa mental) Conclusin Para la evaluacin del producto usar la siguiente lista de cotejo:
Elemento Documento en Word Portada Introduccin Mapa conceptual Conclusin Muestra disciplina y respeto en la actividad Puntaje Total Los puntajes anteriores sern aplicados siempre y cuando se entregue a tiempo la actividad, en caso contrario al puntaje total se le restarn 2 puntos. No Presenta o deficiente Presenta Puntos 1 0.5 0.5 5 1 2 10

11

Para evaluar el mapa conceptual, usar la siguiente rbrica:

Rbrica del mapa conceptual de la lectura de la Actividad 2 (5 puntos) Indicadores Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente Principales No corresponden Faltan conceptos Presenta todos Presenta todos los conceptos los conceptos conceptos con coherencia Frases de enlace o No existen o no Faltan algunas Presenta todas Se establecieron proposiciones corresponden todas coherentemente Jerarquizacin No hay orden Orden De lo general a De lo general a lo incompleto lo particular particular Simbologa No corresponden Algunos no Adecuados Adecuados corresponden Presentacin visual No clara Clara y simple Clara y simple Clara, simple y creativa Puntaje 2.5 3.5 4.5 5 Comentarios Retroalimentacin: Adicionales

ACTIVIDAD 3

Las Redes Sociales

Las redes sociales han absorbido el tiempo de los estudiantes de la Preparatoria Gral. Lzaro Crdenas del Ro, cada alumno tiene 25 amigos, existen 850 alumnos, en donde cada uno tiene a varios amigos en comn, con diferentes amigos, si todos nos agregamos como amigo(a), cuantos amigos tendr Cuntos das te conectas a una red social por semana, en promedio: Qu tiempo le inviertes en promedio por da: Fecha en la que iniciaste: En fecha estamos hoy: ___________

__________________ mes _____ ao _____ mes _____ ao _____

Los das (de 16 hr) que has acumulados al estar en redes sociales son: _________ Qu porcentaje de ese tiempo consideras que ha sido bien aprovechado? ______________________________________________________________________ _______ Qu actividades productivas podras hacer con esa cantidad de das? ______________________________________________________________________ ______________________________________________________________________
12

Requiero ahora de un programa que dado el tiempo en promedio diario que invierto en las redes sociales me indique al semestre cuantos das de 16 horas he invertido en esa actividad. Suponiendo que el da cuenta con 24 horas hbiles, debe contabilizar lo siguiente: Horas de dormir: Horas de comida: Horas de traslado a la escuela: Horas de cuidado personal: Horas autnticas en la escuela: Total de horas disponibles: Total de horas dedicadas las redes sociales: Porcentaje de tiempo dedicado a cada actividad: Conclusin de la actividad. ______________________________________________________________________

Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas. 1. _____________________ 2. _____________________ 3. _____________________

ACTIVIDAD 5

Mensajes de celular
Estando en la escuela un amigo me dice: Me dejas enviar un mensaje?,Tienes saldo?, recuerdo haberle hecho una recarga de $20.00, a mi celular, la ltima vez, pero no recuerdo cuantos mensajes he enviado, consultar el saldo me genera un gasto que puede consumir el saldo necesario para enviar el mensaje solicitado, como saber cuantos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire?, sera muy bueno tener un contador de mensajes, adems de un sistema que me

13

indique despus de cada mensaje cual es el saldo y cuantos mensajes puedo enviar con el saldo restante. Para ello debo considerar los siguientes aspectos: Proporcione el costo del mensaje para diferentes compaas: Compaa 1.____________ 2.____________ Costo ______________ ______________

Cuantos caracteres puedo escribir en cada mensaje?:________________________ La empresa Telmex ha anuncio que bajara sus costos a partir de enero de 2010, busque informacin relacionada, indique que tan cierto es y que beneficios reales le brinda a usted como usuario.

Visite los siguientes sitios: www.cofetel.gob.mx Consulte los siguientes hipervnculos (ligas) Usuarios de Servicios y Acciones en beneficio del consumidor . Mencione cinco beneficios que la compaa telefnica le ofrece pero que no ha verificado si cuenta con ello. (Explique cuales y porque). a. _______________________________________________________ b. _______________________________________________________ c. _______________________________________________________ d. _______________________________________________________ e. _______________________________________________________ Ahora disee y elabore el programa que me puede resolver el asunto de los mensajes, en donde se solicite la cantidad de tiempo aire que se comprar y que el programa me indique el nmero de mensajes que puedo enviar a diferentes compaas. (Copie el cdigo y suba la actividad)

14

Ms de una vez
Ciclos, bucles o reiteraciones. Retomando la situacin problemtica del bloque anterior sobre la condicin fsica de una persona a partir del peso y la estatura, y despus de elaborar el algoritmo, diagrama de flujo y programa en lenguaje C, contesta lo siguiente: 1. Para obtener el IMC y la interpretacin de los 5 integrantes de tu familia, qu hiciste?, cmo lo resolviste mediante el algoritmo o programa que solo permite obtener el de una persona a la vez?

2. Y si quisieras obtener el IMC y la interpretacin de ahora 40 alumnos del grupo, qu haras con el programa?

3.Qu se tendra que hacer si ahora queremos aplicar el programa a una cantidad desconocida de personas? ______________________________________________________________________ Lo anterior, nos lleva a la necesidad de repetir varias veces la aplicacin de un algoritmo o programa o una porcin de estos. Este tipo de necesidades donde se necesita repetir muchas veces una accin o conjunto de acciones, puede tener 2 variantes: a). Cuando la cantidad de veces a repetir es conocida, por ejemplo para 5 personas o 40 y b). Cuando la cantidad de veces a repetir es desconocida, y depende de una condicin o situacin la finalizacin. Se puede hacer repetitiva la ejecucin de todo el programa o solo una parte, dependiendo de la necesidad. Al conjunto de acciones o instrucciones que se repiten en un algoritmo programa , se les conoce como ciclo. Un ciclo debe terminarse despus de ejecutarse un nmero finito de veces, mientras se cumpla una condicin o hasta que se cumpla cierta condicin.

15

CICLOS O REPETICIONES EN LENGUAJE C Existen 3 tipos:

1. Ciclo PARA (for) En el algoritmo PARA veces=1, HASTA n Instrucciones ... . Fin PARA } En lenguaje C for (veces=1;veces<=n;veces++) { Instrucciones; .. ; .; (inicio;limite;incremento)

Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)

2. Ciclo HACER-MIENTRAS (do - while) En el algoritmo 2). HACER Instrucciones .. . MIENTRAS (condicin=V) En lenguaje C do { Instrucciones; ..; ; } while (condicin=V);

Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida, pero se necesita por lo menos que se ejecute una vez , se ejecutar tantas veces mientras la condicin planteada se est cumpliendo.

16

3. Ciclo MIENTRAS (while) En el algoritmo 3). MIENTRAS (condicin=V) Instrucciones . . Fin MIENTRAS En lenguaje C while (condicin=V) { Instrucciones; ..; ; }

Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida, y se necesita que la condicin planteada se cumpla desde la primera vez, se ejecutar tantas veces mientras la condicin se est cumpliendo.

Por lo tanto, de acuerdo a la situacin planteada se observa que el ciclo for es el que mejor resuelve para una cantidad conocida de personas (5 y 40). El algoritmo ya incluyendo ciclos, quedara de la siguiente manera:
1. Inicio 2. Iniciar ciclo, PARA veces=1, HASTA 5 (Si veces es menor o igual a 5, contina, sino saltar al paso 12) 3. Dar el peso en kilogramos, (peso) 4. Dar la estatura en metros, (estatura) 5. Realizar la siguiente operacin:IMC = peso/(estatura*estatura) 6. Mostrar el resultado, Tu ndice de Masa Corporal es: , IMC 7. Si IMC<18.5 entonces 7.1 Indicar La persona est baja de peso 8. Si IMC>=18.5 y IMC<25 entonces 8.1 Indicar Felicidades, la persona est en su peso ideal 9. Si IMC>=25 y IMC<30 entonces 9.1 Indicar La persona tiene sobrepeso 10. Si IMC>=30 entonces 10.1 Indicar La persona tiene problemas de obesidad 11. Fin de ciclo, Fin PARA (se incrementaiveces y se regresa al paso 2) 12. Fin

17

Y el programa en lenguaje C queda de esta manera:

#include "stdio.h" #include "conio.h" void main() { float Estatura, Peso, IMC; int veces; for (veces=1;veces<=5;veces++) // Se inicia ciclo, se repetir 5 veces, se inicia en 1 con incrementos de 1 clrscr(); printf("\nEscribe tu PESO en Kg, por favor: "); scanf("%f",&Peso); printf("\nEscribe tu ESTATURA en m, por favor: "); scanf("%f",&Estatura); IMC=Peso/(Estatura*Estatura); printf("\nTu Indice de Masa Corporal es: %0.2f",IMC); if (IMC<18.50) { printf("\nLa persona est baja de peso "); } if (IMC>=18.5 && IMC<25) { printf("\nFelicidades, la persona est en su peso ideal "); } if (IMC>=25 && IMC<30) { printf("\nLa persona tiene sobrepeso "); } if (IMC>=30) { printf("\nLa persona tiene problemas de obesidad "); } getch(); } }

4. Qu tendras que hacer para obtener el IMC ahora de los 40 alumnos? ___________________________________________________________________

18

BLOQUE III. EXPRESIN GRFICA UNIDAD DE COMPETENCIA: Difundir informacin de inters general o particular para comunicarse globalmente de forma creativa, tica y responsable a travs del diseo y publicacin de una pgina web. Actividad 1: Diseo de un logotipo Bosquejo de una idea A lo largo de la evolucin humana, se ha tenido que desarrollar la necesidad de comunicacin entre los individuos de un mismo grupo, esta comunicacin ha sido representada y establecida a travs de smbolos procedentes de un convencionalismos, sin embargo, este proceso convencional, no limita la capacidad expresiva del ser humano, es cierto que el lenguaje oral y escrito son representativos, pero en los primeros albores de la humanidad, la expresin de los individuos se dio a travs de la representacin pictogrfica, donde muchos de estos murales presentaban expresiones de actividades cotidianas, religiosa, de estrategia. Las formas con el paso del tiempo fueron evolucionando, fueron adaptadas con el surgimiento de la cultura, las cual demuestra a posteriori sus obras, como en el caso griego, celta o mesoamericano. En la actualidad, y saltando toda esa lnea del tiempo que se describa anteriormente; se tienen diferentes medios y formas que permiten expresar ideas, sentimientos, estilos y cultura. La expresin como partcula viva de la comunicacin, ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural, se utiliza la expresin para protestas, para defensas, para produccin y para venta, entre muchos otros. En nuestro caso, se partir de una necesidad tanto acadmica como general, donde plasmaremos a la expresin en una forma grfica. En especifico se realiza un logotipo que parte de la necesidad publicitaria de una empresa. Qu medios o formas de expresin visual utilizas para comunicarte? impresos, digitalessitios web, Peridicos, Panfletos, Carteles, Revistas

En qu espacios u objetos encuentras la expresin visual? -empaques, folders, pegatinas, Mamparas.

19

Qu dificultad encontraste al crear tu esbozo o diseo con hoja y papel?

7. Qu alcances y limitaciones tiene la herramienta que utilizaste (lpiz, colores) y su comparativa con el medio electrnico?

Situacin problemtica Un grupo empresarial de entretenimiento de origen Mxico-Canadiense desea realizar un logotipo para publicitar un caf-disco que abrir sus puertas en una importante zona comercial; el concepto a desarrollar contiene matices de disco & caf con un toque de msica estilo norteo y toro mecnico, as que dado lo anterior, la situacin de diseo debe considerar los siguientes aspectos: Misin y visin de la empresa, hacia quien va dirigido el servicio ofrecido, qu tipo de calidad, confianza y garanta se ofrece al cliente. Terminado este proceso, debemos ubicarnos en el tiempo que se vive, las modas, los medios que visualizaran este logo, no solo limitarnos a mamparas o espectaculares, sino a todo medio visual y electrnico que promover a travs del logotipo a dicho caf-disco. Nombre de la empresa: Rodeo. Giro: Caf Disco-Rodeo. Nacionalidad: Mxico-Canad Con lo anterior, el logotipo necesita presentar un formato simple, esttico, legible, nacional y amigable. Las posibles siguientes alternativas a una expresin grfica: Logotipo: Un logotipo posee caractersticas que dan identidad y presencia a una empresa, por muy pequea o mediana que esta sea. Emblema: Es una composicin artstica que transmite un pensamiento, una enseanza, mediante una combinacin de imagen y texto que se enriquecen mutuamente. Compuesto por una frase (lema), un poema (epigrama) y una imagen (pintura).

20

Cartel Publicitario: Proyecto Realizar el siguiente logotipo ejemplo de la empresa Rodeo (Disco & Caf) utilizando el programa de diseo grafico Inkscape.

Inkscape1 es un software libre basado en el formato SVG (Scalable Vector Graphics ), el cual es una especificacin para describir grficos vectoriales bidimensionales, tanto estticos como animados en formato XML. Actividad 2: Entorno de diseo Ajusta el entorno a 800 x 600 pixeles, activar rejilla a tipo pixel con valor 1 en X y Y, activar ajustar a 20 unidades. Ajustar el rea de diseo Para realizar el diseo, se determina el tamao de la pgina, el cual puede ser tamao carta (US Letter), oficio (US Legal), A4 o personalizado, seguido de ello la orientacin del papel (vertical u horizontal); determinar esta orientacin permite tener un panorama visual del diseo y sus limitaciones espaciales. A continuacin las unidades de medidas determinan la forma de trabajo para rejilla (cuadricula) y guas, distinguiendo principalmente a los tipos, pixel (px), pulgada
1

http://www.inkscape.org/download/?lang=es

21

(in), centmetro (cm), milmetros (mm). Todo esto se encuentra en Propiedades del documento (Archivo Propiedades del documento o shift+ctrl+D). Para asegurar que el diseo tenga la suficiente exactitud de trazo, se activa la cuadricula y su ajuste, adems se puede utilizar las lneas guas como apoyo en el espaciado, utilizar propiedades del documento (shift+ctrl+D) en las pestaas rejillas, guas y ajustar. El rea de trabajo tendr vista semejante forma, en la figura se muestran las guas y cuadriculas consideradas para el logotipo. Cada diseador, puede ajustar las herramientas segn sus necesidades.

Acividad 3: Elaboracin de formas y operaciones Problema Una vez definido el ambiente de trabajo, en cuantos a formato y medidas; se procede a realizar los trazos necesarios, utilizando los objetos de los que se dispone en el paquete de diseo grfico (Inkscape).

Para construir el trazo de la forma y las figuras circulares ser necesario realizar operaciones sobre objetos, dentro de las cuales existe la unin, diferencia e interseccin como principales. Qu elementos geomtricos necesitas para construir alguna forma?

Sabes que es una primitiva de diseo?

Qu primitivas de diseo se utilizaran para construir la forma

Realiza el trazo en papel de las primitivas anteriores para elaborar la forma descrita

22

Operaciones sobre formas stas son las operaciones disponibles en breves ejemplos, notar la importancia en el orden de los objetos.
Operacin Unin (soldar) TrayectoUnin (ctrl++) Objetos Resultado

Diferencias TrayectoDiferencia (ctrl+-)

Interseccin TrayectoInterseccin (ctrl+*)

Las operaciones para realizar la forma de diseo

se describen a continuacin

Procedimiento Trazar un crculos utilizando la herramienta Crear crculos, elipses y arcos de la barra de dibujo, para colorearlo debe seleccionar el objeto y hacer clic en algn cuadro de la paleta de colores, si necesita cambiar el contorno, mantenga presionada la tecla shift+ clic en algn cuadro de la misma paleta. Para manejar los niveles de ordenacin (inferior-superior) utilizar:

23

Manipulacin de los objetos para construir el trazo e: a. Trazar los objetos circulares y rectangulares, use la herramienta crear rectngulos y cuadrados . b. Realizar la diferencia seleccionando las formas circulares, para seleccionar mltiples objetos, mantenga presionada la tecla shift, mientras hace clic en cada uno de ellos. c. Posterior a lo anterior, realizar la diferencia entre la forma circular y el rectngulo. d. Ejecutar la unin entre la forma rectangular pequea y la media dona generada.

Actividad: 3.A Realizar los trazos circulares que pertenecen al logotipo, utilizando la operacin de diferencia y ordenamiento de objetos.

Forma Final

24

Actividad: 3.B

En lnea realizar los trazos para construir la forma circular utilizando las operaciones necesarias como adicin y sustraccin. Finalmente agrupelos.

En lnea utilizar las operaciones sobre objetos aprendidas anteriormente, para construir la forma y ajustar los caracteres. Adems rotar el carcter R para que adquiera la forma final .

Para evaluar actividad 3.A y 3.B

Rbrica de la actividad 3A y 3B (5 puntos) Indicadores Aspectos a evaluar No satisfactorio No corresponde n trazos Regular Satisfactorio Excelente

Aplicacin correcta de las operaciones sobre primitivas para obtener la Forma Final Entorno de trabajo (Cuadricula-ajusteGuas)

Faltan operaciones en primitivas

Presenta el trazo solicitado en la forma final

El trazo contiene la forma final siguiendo cuadricula y guas que valoran exactitud Se utilizaron todas las herramientas coherentemente, asegurando exactitud Propuesta ad hoc al tema presentada con entorno adecuado 5

No existen o no corresponde n No hay propuesta

Faltan algunas herramientas de trazo Propuesta escueta

Presenta el uso de las herramientas

Propuesta de nuevas formas (Alternativas al diseo) Puntaje Comentarios

Propuesta armnica al tema 4.5

2.5 Retroalimentacin:

3.5

25

Adicionales

Actividad 4: Tipografia Bsica

Qu es la tipografa?

Cmo impacta la tipografa en un logotipo?

Establece una alternativa de tipografa al logotipo propuesto

Tipografa Bsica El logotipo necesita de un nombre o acrnimos para presentar a la empresa, el caso que se est tratando necesita de texto y a su vez una modificacin en un carcter. Para definir una tipografia se debe considerar la formalidad o informalidad de la empresa y hacia quien va dirigido. Para Disco, su utiliza el Ahoroni en un tamao de 172 unidades, con un estilo negrita, esta herramienta se encuentra en el men Texto Texto y tipografa (Shift+Ctrl+T)

26

Actividad: 4A Una vez escrito el texto, se procede con la ubicacin de los elementos ya construidos para v isualizar el avance del logotipo.

Forma Final
Nota: Para separar objetos resultantes de una unin, diferencia u otra operacin; utilice shift+ctrl+k.

Rbrica de la actividad 4A (5 puntos) Indicadores Aspectos a evaluar No satisfactorio No corresponden trazos Regular Satisfactorio Excelente

Uso de tipografa y adecuacin de las formas anteriores para obtener la Forma Final

Falta orden y adecuacin de tipografa y trazos

Presenta tipografa y trazos semejantes a la forma final

Contiene tipografa y trazos conforme a la forma final siguiendo herramientas (guas, ajuste,) que valoran exactitud Se utilizaron todas las herramientas coherentemente, asegurando exactitud Propuesta ad hoc al tema presentada con entorno adecuado

Entorno de trabajo (Cuadricula-ajusteGuas)

No existen o no corresponden

Faltan algunas herramientas auxiliares de trazo

Presenta el uso de las herramientas de forma bsica

Propuesta de nuevas formas (Alternativas al diseo) Puntaje Comentarios Adicionales

No hay propuesta

Propuesta insuficiente

Propuesta armnica al tema

2.5 Retroalimentacin:

3.5

4.5

27

Actividad 5: Operaciones con nodos

Crees que las primitivas de diseo son suficientes para trazos complejos como la forma de la hoja de

maple del diseo

Cmo trazaras la siguiente forma que es parte del logotipo

Cules consideras que son los elementos mnimos para realizar un trazo?

Trazar en papel la forma de una hoja simple

a travs de puntos y lneas

Qu es un nodo?

El trazo anterior no puede ser elaborado con primitivas bsicas (rectngulos, elipses, lneas); es necesario agregar el uso de una nueva herramienta llamada Bzier; la cual est basada en el concepto de nodos; los nodos son puntos de referencia para los trazos curvos, de hecho Bzier, est basada en la teora de curvas polinmicas y se le debe al ingeniero francs Bzier 2 quien elabor esta forma de trazar curvas. Los nodos tienen diferentes comportamientos (simtricos, asimtricos) para manipular o disear una forma, que puede ser a travs del manejo de los vectores de control. Ejemplo: Realizar el siguiente trazo, tomando en cuenta la secuencia sugerida. 1. Crear un nuevo documento habilitando rejilla, guas y ajuste.

Referencia

28

Ejemplo:

Bzier

Nodos de Trayecto

Resultado

Operacin con nodos

Paso a paso

Bzier 1 3 2

Nodos

Vectores de control

3
Problema:

Nodos

Una vez trazada una hoja, surge la necesidad de ubicarla y repetirla, en el caso de la rotacin de los objetos se hacen dos simples clic, el primero selecciona y permite activar el control de tamao, un clic ms, activa el control de rotacin y la disposicin de desplazar el punto de referen cia ( + ). Para duplicar un objeto presione Ctrl+D.

29

Un Simple Clic

Dos Simples Clic

Punto de referencia

Manipulacin de nodos y capas

Problema: Qu podras hacer si necesitas realizar un trazo ms complejo para el logotipo? , quiz el pas de origen no es Puerto Rico sino Canad, y para ello la empresa enva una imagen fotogrfica de la hoja a disear. Para dar solucin a esta situacin, se aprendern los conceptos de manipulacin de nodos para dar formas, y el manejo de capas, un concepto muy estndar, que servir para sobreponer objetos.

Primero se crean las capas usando el men Capa aadir capa

(shift+Ctrl+N), donde se

determina el nombre, tambin puede renombrar usando Capa Renombrar capa . En este ejemplo donde se trazar una hoja se tienen dos capas, donde la capa inferior conten dr una imagen, la cual se importa usando el men Archivo Importar ( Ctrl+I). En la capa superior utilizaremos la herramienta Bezier y la manipulacin de nodos, vea las figuras:

30

Agregar Nodos

Suprimir Nodos

Editar Nodos

Convertir Nodos
Utilice Acercar o alejar

Actividad: 5A Realizar la forma de hojas, utilizando las operaciones sobre nodos y los vectores de transformacin, se sugiere al final agrupar cada hoja diseada.

Actividad: 5B Realizar el trazo de la hoja de maple, utilizando capas para su diseo, definir el propsito de cada capa con un nombre que permita identificar su finalizad. Utilizar las herramientas de nodos para su construccin adecuada.

Actividad: 5C Esta actividad es un reforzamiento sobre el manejo de capas y nodos, en la compleja tarea de reproducir objetos. Realizar la silueta de un tiburn.

31

Rbrica de la actividad 5A, 5B, 5C (5 puntos) Indicadores Aspectos a evaluar Uso de trazos basados en nodos para desarrollar la Forma Final No satisfactorio No corresponden trazos Regular Falta adecuacin de trazos y nodos Satisfactorio Presenta trazos semejantes a la forma final, manipula nodos Excelente Contiene trazos basados en nodos conforme a la forma final, utilizando herramientas (guas, ajuste,) que valoran exactitud Se utilizaron todas las herramientas coherentemente, asegurando exactitud Propuesta ad hoc al tema presentada con entorno adecuado 5

Entorno de trabajo (Cuadricula-ajusteGuas)

No existen o no corresponden

Faltan algunas herramientas auxiliares de trazo

Presenta el uso de las herramientas de forma bsica

Propuesta de nuevas formas (Alternativas al diseo) Puntaje Comentarios Adicionales

No hay propuesta

Propuesta insuficiente

Propuesta armnica al tema

2.5 Retroalimentacin:

3.5

4.5

Tratamiento de nodos sobre caracteres

Cmo influye la tipografa en un diseo?

Existen diversos tipos de fuentes, pero Hay algn tipo disponible para su personalizacin?

32

Problema Al realizar un logotipo, quiz sea necesario modificar la tipografa original de alguna letra o letras para proyectar una nueva forma; el proceso para realizar esto es el siguiente; colocar la letra con el tipo adecuado (Shift+Ctrl+T). Despus seleccione el objeto, y presione Shift+Ctrl+C. Su carcter se ha convertido en curvas, utilice la herramienta editor de nodos para realizar las modificaciones pertinentes. Polgonos

Editar nodos
Shift+Ctrl+T Shift+Ctrl+C

Actividad: Logotipo terminado en trazo Una vez cubierto todos los trazos, se dispone a realizar la ubicacin y ajuste del logotipo desarrollado y finalmente debe corresponder a la siguiente vista.

Forma Final

33

Rbrica de la actividad Logotipo terminado en trazo (5 puntos) Indicadores Aspectos a evaluar Desarrollo terminado del trazo del logotipo conforme a la Forma Final No satisfactorio No corresponden trazos, no esta terminado el logotipo Regular Falta orden y adecuacin de tipografa y trazos del logotipo Satisfactorio Presenta tipografa y trazos semejantes a la forma final del logotipo Excelente Contiene tipografa y trazos conforme a la forma final, presentando el uso de herramientas (guas, ajuste,) que valoran exactitud Utiliza las siguientes herramientas:

Uso de herramientas para el trazado

1. Utiliza solo trazo a mano alzada u objetos sin adecuacin a la forma final.

Utiliza al menos 3 herramientas y el trazo es semejante a la forma:

Utiliza al menos 5 herramientas y el trazo es semejante a la forma:

1. Trabaja con objetos 2. Aplica Colores 3. Dibuja a partir de nodos

4. Trabaja con objetos 5. Aplica Colores 6. Dibuja libremente a mano alzada 7. Dibuja a partir de nodos 8. Trabaja con texto

2. 3. 4. 5.

6. 7. 8.

1. Trabaja con objetos Aplica Colores Aplica Rellenos Transforma Objetos Dibuja libremente a mano alzada Dibuja a partir de nodos Utiliza capas Trabaja con texto.
5

Puntaje Comentarios Adicionales

2.5 Retroalimentacin:

3.5

4.5

34

Actividad 6: Colores sobre el logotipo

Coloracin de Objetos (Rellenos slidos, radiales, linales). Problema: Despus de construir el logotipo, continuamos con el siguiente problema, qu colores deben ser utilizados para dar presencia al logotipo? La creatividad es abierta, el uso de colores depende de muchos factores, aunque dar forma a un logotipo es importante, ahora buscar una adecuada combinacin sentar la presencia final del producto. Primero analicemos de una manera rpida y sutil el significado de los colores, para poder buscar los necesarios para proyectar nuestro trabajo. Blanco: En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el color de nieve.
En la promocin de productos de alta tecnologa, el blanco puede utilizarse para comunicar simplicidad. Amarillo: Cuando se sitan varios colores en contraposicin al negro, el amarillo es en el que primero se fija la atencin. Por eso, la combinacin amarillo y negro es usada para resaltar avisos o reclamos de atencin. Naranja : Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para comunicar con ellos.

Rojo: En publicidad se utiliza el rojo para provocar sentimientos erticos. Smbolos como labios o uas
rojos, zapatos, vestidos, etc., son arquetipos en la comunicacin visual sugerente.

Azul: Es adecuado para promocionar productos de alta tecnologa o de alta precisin.

Verde : Por su asociacin a la naturaleza es ideal para promocionar productos de jardinera, turismo rural, actividades al aire libre o productos ecolgicos Negro: El negro representa el poder, la elegancia, la formalidad, la muerte y el misterio.

Para aplicar la coloracin utilice las herramientas que proporciona la barra de colores, para pintar el objeto, primero seleccione haga clic en algn color , utilice shift+clic para pintar el trazo. El siguiente diseo se trata de un ejemplo para realizar el relleno de objetos, este relleno puede ser solido, lineal o radial, Inkscape posee las paletas necesarias y los modelos de color. Los modelos de color son RGB, HSL, CMYK, CMS.

35

RGB . La acrnimo del ingls Red, Green, Blue; "rojo, verde, azul" de un color hace referencia a la composicin del color en trminos de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul. Es un modelo de color basado en la sntesis aditiva, con el que es posible representar un color mediante la mezcla por adicin de los tres colores luz primarios. El modelo HSL (del ingls Hue, Saturation, Lightness Tonalidad, Saturacin, Luminancia), tambin llamado HSI (del ingls Hue, Saturation, Intensity Tonalidad, Saturacin, Intensidad), define un modelo de color en trminos de sus componentes constituyentes. El modelo HSL se representa grficamente como un cono doble o un doble hexgono. El modelo CMYK (acrnimo de Cyan, Magenta, Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresin en colores. Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros ms. El degradado est basado en dos formatos, lineal y radial. En ambos se utilizan vectores de pintado, que permiten realizar la modificacin correspondiente a la intensidad de cada color. En el caso de Inkscape, no slo se realiza el proceso de degradado de los colores, sino tambin la capacidad de opacidad, as entonces genera un cdigo de color no RGB sino RGBA, donde A significa opacidad.

36

Actividad: 6A

Proporcione colores al logotipo diseado, utilizando el modelo adecuado y efecto de lo que dar un matiz propio.

relleno,

Forma Final

Rbrica de la actividad 6A (5 puntos) Indicadores Aspectos a evaluar Coloracin del logotipo conforme a la Forma Final o nueva propuesta de coloracin No satisfactorio No otorga colores al logotipo Regular Falta adecuacin de coloracin Satisfactorio Presenta coloracin semejante a la forma final Excelente Presenta coloracin conforme a la forma final utilizando colores slidos, degradados, o mezclas de ambos utilizando herramientas auxiliares de trazo

Propuesta de nuevas formas (Alternativas al diseo) Puntaje Comentarios Adicionales

No hay propuesta

Propuesta insuficiente

Propuesta con colores slidos y armnica.

Propuesta de coloracin innovadora

2.5 Retroalimentacin:

3.5

4.5

37

Actividad 7: Diseo de un cartel

Situacin didctica Se desea realizar un cartel en el que se invite a pblico en general a un evento regional, donde se exponen las tradiciones y la actividad principal de la poblacin. Qu es un cartel? Un cartel, afiche o pster es una lmina de papel, cartn u otro material que sirve para anunciar o dar informacin sobre algo, eventos culturales, deportivos, administrativos, etc. Identificar los elementos que se deben exponer en un cartel: Evento: Feria Regional A quien va dirigido: Pblico en General Actividad: Floricultura Lugar: El Pilar, Tlatlauquitepec, Puebla Ao: 2012 Fecha: del 15 al 20 de abril de 2012. En nuestro caso de estudio, se realiza un cartel donde se muestra la silueta de una iglesia -por el sentido tradicional religioso-, una flor, un pilar sobre la i, las fechas y ubicaciones. T le dars los colores o incluso diferentes matices al diseo.

A continuacin se determina el nmero de capas, cada capa contiene algn elemento grafico, por lo que se aconseja utilizar un nombre descriptivo en el diseo, para insertar una nueva capa presione Ctrl+Shift+L.

38

Para trazar la flor puede utilizar la herramienta de circulo , a continuacin, seleccionado el objeto ejecute, TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite modificar al crculo a travs de nodos: Ahora, se desea copiar el trazo anterior, puede copiar o duplicar el trazo, pero tambin puede clonar el objeto usando el men EdicinClonar (Alt+D), cuando se realiza una copia o duplicado, cada elemento es independiente, por tanto las modificaciones realizadas a alguna copia, no afecta al origen de copiado, cuando se realiza una clonacin, el objeto fuente al ser alterado permite heredar esos cambios inmediatos a sus hijos.

Copiar o duplicar.
Objeto a trayecto.

Modificacin independiente de un objeto copiado.

Modificacin dependiente de un objeto clonado.

En el caso del texto sobre un trayecto, primero se realiza la forma a seguir utilizando algn trazo de bezier . A continuacin se inserta un texto Texto texto y tipografa (shift+Ctrl+T) con el formato y la longitud adecuada (si necesita manipular las propiedades de Borde, Relleno o grosor utilizar Shift+Ctrl+F). Una vez terminados estos 2 elementos, seleccionarlos y ejecutar del men Texto Poner en trayecto , tu resultado es:

Bzier:
Texto:

Seleccionar objeto de texto y trazo Bzier

Ejecutar: Texto Poner en trayecto Para Quitar: Texto Retirar de trayecto

39

Para exportar el trabajo realizado para su impresin se debe ser consciente de seleccionar el formato apropiado, en caso de imprimir en una lona, lo recomendable es guardar en un formato vectorial estndar, aunque en el mundo de la publicidad, los formatos ms solicitados son: CDR (Corel Draw), AI (Adobe Illustratror), pero SVG que es nuestro caso, puede ser importado para su manipulacin y adivinen qu, illustrator guarda en SVG.

Actividad: Cartel Regional

Esta actividad est basada en los conceptos aprendidos en lecciones anteriores, el uso de nodos, caracteres modificados, trayectos y manipulacin de objetos. Realizar el cartel propuesto a la forma de la derecha.

capas,

40

Rbrica del Cartel Regional (5 puntos) Indicadores Aspectos a evaluar Uso de tipografa y adecuacin de las formas anteriores para obtener la Forma Final No satisfactorio No corresponden trazos Regular Satisfactorio Excelente

Falta orden y adecuacin de tipografa y trazos

Presenta tipografa y trazos semejantes a la forma final

Contiene tipografa y trazos conforme a la forma final utilizando herramientas (guas, ajuste,) que valoran exactitud

Uso de herramientas para el trazado

2. Utiliza solo trazo a mano alzada u objetos sin adecuacin a la forma final.

Utiliza al menos 3 herramientas y el trazo es semejante a la forma:

Utiliza al menos 5 herramientas y el trazo es semejante a la forma:

Utiliza las siguientes herramientas:

1. Trabaja con objetos 2. Aplica Colores 3. Dibuja a partir de nodos

1. Trabaja con objetos 2. Aplica Colores 3. Dibuja libremente a mano alzada 4. Dibuja a partir de nodos 5. Trabaja con texto
Presenta el uso de las herramientas de forma bsica

1. 2. 3. 4. 5. 6. 7. 8. 9.

Trabaja con objetos Aplica Colores Aplica Rellenos Transforma Objetos Dibuja libremente a mano alzada Dibuja a partir de nodos Utiliza capas Trabaja con texto. Modifica caracteres utilizando nodos.

Herramientas del Entorno de trabajo (Cuadriculaajuste-Guas) Propuesta de nuevas formas (Alternativas al diseo) Puntaje Comentarios Adicionales

No existen o no corresponden

Faltan algunas herramientas auxiliares para el trazo

Se utilizaron todas las herramientas coherentemente, asegurando exactitud

No hay propuesta

Propuesta insuficiente (trazos escuetos)

Propuesta armnica al tema

Propuesta adecuada al tema presentada con entorno adecuado

2.5 Retroalimentacin:

3.5

4.5

41

Taller 3: Diseando una pgina web

Actividad 1: Conocer HTML y su estructura.

Cuando se abre cualquier pgina web en Internet no se toma mucha relevancia sob re cmo estn constituidas, o qu les permite ser abiertas en casi cualquier sistema operativo, llmese Windows, Leopard (Apple), Linux, Symbian, Android (telfonos porttiles), o qu las hace tan ligeras, tan porttiles, todo est determinado en un concepto llamado lenguaje HTML. Qu es internet para ti?

Por qu es necesario Internet?

Qu leyes rigen y protegen a Internet?

Cmo publicas un documento, imagen o mensaje en Internet?, conoces alguna herramienta?

Cmo codifican una pgina web?

42

Qu es HTML? Es un lenguaje de marcado predominante para la construccin de pginas web. Las siglas HTML proceden del acrnimo generado a partir de HyperText Markup Language que significa Lenguaje de Marcas de Hipertexto . Este lenguaje es usado para describir la estructura y los contenidos de una pgina web, su codificacin est basada en Etiquetas las cuales estn determinadas por corchetes angulares ( < > ) y usa una sintaxis bsica, misma que se interpreta en un explorador de Internet, todo dentro de una ambiente en forma de texto, por lo cual no se necesita de algn editor especial o compilador integrado, solo tienes que abrir algn editor de texto y guardar el documento con la extensin html o htm. Cabe mencionar que HTML puede hasta cierto punto cargar scripts que proporcionen algn efecto de entrada, carga de objetos o manejo de eventos. Para crear nuestro primer documento HTML, conozcamos primero quien es el interprete del lenguaje HTML, recordar que HTML es un lenguaje de etiquetas, as que se necesita de un programa que pueda traducir cada etiqueta para visualizar todas las caractersticas de la pagina, este interprete se llama explorador de Internet, y abajo se mencionan los ms conocidos. De hecho entre ellos ha habido grandes disputas por el mercado de usuarios, uno muy sonado en los primeros aos de auge de Internet y despus de Mosaic3, fue entre Explorer y NetScape. Ahora es turno de actualizarte, investiga Qu exploradores estn en competencia? Qu porcentaje de usuarios tienen cada uno de ellos?

Exploradores de Internet

Explorer

Opera

FireFox

NetScape

Safari

Actividad 2: Codificacin bsica de un texto en HTML

Qu significa codificacin?

Abrir un editor de texto, por ejemplo en nuestro caso notepad, despus codificar los elementos bsicos y guardar en una carpeta con la extensin .html o .htm

Investiga sobre el navegador Mosaic y su importancia

43

El cdigo esta explicito en la imagen y es el siguiente: <html> <body> <h1>Mi Primer Encabezado</h1> <p>Mi Primer Prrafo. </p> </body> <html>

Al Editar en HTML, se hace uso de palabra reservadas del lenguaje, en realidad se llaman etiquetas (tags), las cuales se identifican por el uso de los smbolos < y > y determinan la codificacin e interpretacin del contenido, por ejemplo, para establecer un titulo se hace uso de un encabezado (header), el cual usa la etiqueta <H1> que inicia esta funcin en el texto y termina este formato al cerrar la etiqueta </H1>. A continuacin abra un explorador de Internet para visualizar el resultado de esta codificaci n. En este ejemplo se usar Microsoft Internet Explorer. 1.- Abrir Microsoft Internet Explorer 2.- Presionar Ctrl+O 3. Seleccionar el archivo .html y aceptar.

44

Este es el resultado luego de cargar el documento en el navegador de internet.

Etiquetas Una etiqueta est constituida por un indicador de inicio y final para cada elemento, salvo algunos casos especiales, adems se tiene la propiedad de aplicar atributos en las etiquetas, funcionando estos como parmetros que modifican la visualizacin de los elementos que se encierran. Etiqueta <BODY> </BODY> <HEAD> </HEAD> <HTML> <HTML> <B></B> <I></I> <P></P> <S></S> <H1 ...H6> </H1 ...H6> <BR> Funcin Apertura y cerradura del cuerpo del documento. Encabezamiento del documento. Inicio y fin de todo documento. Estilo de fuente Negrita Estilo de fuente Itlica (Cursiva). Prrafo Texto subrayado. Tamao y tipo de encabezado del 1 al 6. Retorno de lnea. Atributos BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK BASE, TITLE, ISINDEX, NEXTID, META HEAD, BODY Ninguno Ninguno ALIGN =LEFT, CENTER, RIGHT Ninguno HTML 3.0: LEFT, CENTER, RIGHT

<SUB></SUB> <SUP></SUP> <CENTER></CENTER> <FONT></FONT> <HR>

Subndice. Superndice. Centrar. Definicin de la fuente. Lnea horizontal.

Ninguno Ninguno Ninguno. SIZE, COLOR. Internet Explorer: FACE. NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR

45

Publicando una frase Realizar un documento que presentar una frase, utilizando los elementos bsicos aprendidos sus y atributos. 1. Abre un bloc de notas, codifica segn la imagen (instrucciones). 2. Guarda con la extensin .html asignado el nombre ejemplo2. 3. Visualizar el resultado en un explorador de Internet

Uso de etiquetas especificas para elaborar un documento A continuacin se realiza un documento ms complejo, que presenta las propiedades qumicas del Arsnico y sus efectos en la salud. La codificacin utiliza las etiquetas antes vistas que se describe en la imagen del cdigo fuente denominado ejemplo3.html. En este ejemplo se hace uso del concepto atributos de algunas de las etiquetas, definiendo que un atributo es una propiedad exclusiva de la etiqueta y que determina una accin o caracterstica. Por ejemplo: La etiqueta <BODY> que inicia el cuerpo del documento, tiene un atributo denominado bgcolor=, el cual a travs de una cadena especifica, recibe un color de fondo aplicable a la pgina web. Los atributos permiten manipular colores, fuentes, ubicaciones y eventos; aunque cabe mencionar que como parte de la evolucin del mundo tecnolgico de la web, algunas etiquetas como atributos estn siendo relevados e incluso hacen uso de nuevas tecnologas como CSS, XML, JavaScript entre otros.

46

Actividad 3: Uso de Tablas

Agreguemos Propiedades a travs de una tabla, la cual est constituida por filas, celdas y un titulo de tabla. <TABLE></TABLE> <TD></TD> <TH></TH> <TR></TR> Genera una Tabla. Celdas de una fila en una tabla. Ttulo de Tabla. Fila de una Tabla. BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH, COLOR ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH ALIGN, VALIGN

Estructura y sintaxis de una tabla en HTML

<TABLE>
</TH> </TR> <TR> <TD> </TABLE> </TD> <TH>

47

Ejemplo de uso de las tablas

Como se describe en la imagen anterior se elabora un documento html que describe la codificacin de de una tabla que contiene detalles de propiedades qumicas del arsnico. Su cdigo es el siguiente: <TABLE BORDER=1> <TH> Propiedades </TH> <TR><TD>Masa Atmica (g/m)</TD><TD> 74922</TD> </TR> <TR><TD>Punto de ebullicin(<SUP> o </SUP>C)</TD><TD>613</TD> </TR> <TR><TD>Punto de fusin(<SUP> o </SUP>C)</TD><TD>817</TD> </TR> </TABLE>

Finalmente visualizar el resultado de la codificacin en un navegador de internet.

Actividad 4: Incrustacin de listas, imgenes e hipervnculos

Cmo se integra una imagen a tu pgina de red social (facebook, tweeter, flick)?

Qu es una URL?

48

Basado en las respuestas anteriores se ha notado el uso de una direccin que integra una imagen de nuestro equipo de cmputo o de algn sitio web, esta direccin es codificada en un documento web a travs de la etiqueta <IMG> y su atributo SRC= contiene la ruta. A continuacin se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio. Etiqueta <BGSOUND> <IMG> Funcin Sonido de fondo. Cargar imgenes. Atributo SRC, LOOP. ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE Cerradura NO - Internet Explorer NO

Continuando con nuestra pgina, vamos a agregar una lista llamada, Sabias que! Y agreguemos una imagen en el centro de nuestro trabajo, as como un hipervnculo hacia un sitio oficial. Etiqueta <LI> <UL> <OL> Funcin tem de lista. Lista no ordenada, con elementos marcados con <LI> . Lista ordenada, con elementos marcados con <LI>. Atributos Netscape: VALUE, TYPE COMPACT, TYPE TYPE, START, VALUE. Cerradura NO </UL> </OL>

Qu es un hipervnculo?

A lo anterior, dado que un hipervnculo tcnicamente es una referencia, entonces la ruta se especifica en el atributo HREF=, el cual delimita a travs del entrecomillado del sitio, pagina, imagen o sonido al cual se desea acceder al hacer clic en texto, imagen o mapeado de imagen.

Etiqueta <A>

Funcin Hipervnculo.

Atributos HREF, NAME, REL, REV, TITLE

Cerradura </A>

Un hipervinculo tiene la siguiente forma: En texto: <a href=http://www.buap.mx > Clic </a> La etiqueta <a> tiene una cerradura </a> la cual puede aplicarse a un texto o imagen como se define a continuacin:

49

En Imagen: <a href=http://www.buap.mx alt=Texto Alternativo> <IMG SRC=imagen.jpg> </a> Actividad 5: Uso de lista, imagen e hipervnculo La lista es construida con las etiquetas <LI> para cada elemento, pero si se necesita establecer un orden e iniciar con un inciso diferente al 1, por ejemplo con el 3, entonces se usa la instruccin <OL TYPE=1 START=3> <LI>.</LI> </OL> La imagen est compuesta por la ruta contenedora del archivo de imagen, se usa ALT para da r un texto de etiqueta a la imagen; en cuanto al tamao de una imagen, el ancho y alto de la misma se puede controlar por los atributos width y height, ambos pueden recibir una notacin en pixeles absolutos o porcentaje relativo al tamao: width=100 o height=50%. Para conectar una pgina con otra, es decir crear un vnculo, se utiliza la instruccin <A> la cual contiene una referencia de HIPERVINCULO, donde la forma es HREF= http://sitio para el caso de sitios de internet, para el caso de paginas locales, se utiliza la ruta contenedora HREF=./ruta.

Codifique el ejemplo anterior para visualizar el resultante de la actividad, la cual utiliza listas, imgenes e hipervnculos.

Actividad 6: hipervnculos y marcos

Qu es un marco (FRAME)?

Dnde has utilizado un marco (Aplicaciones de redes sociales o mensajera)?

50

Adems de lo anterior en la leccin pasada, un hipervnculo est compuesto por un valor direccional sobre la apertura de una pgina, es decir, se puede especif icar si la pagina se abre den una nueva ventana o si se abre en un apartado especial llamado FRAME.

Ejemplo de hipervnculo sobre un texto, donde se abrir en la misma ventana el sitio o pgina web: <A HREF=http://www.youtube.com > You Tube </A> Ejemplo de hipervnculo sobre un texto, donde se abrir en una nueva ventana el sitio o pgina web: <A HREF=http://www.youtube.com TARGET =_BLANK> You Tube </A> Un marco (FRAME), permite dividir la pantalla en segmentos ajustables o fijos, lo cual permite manipular en una pgina la estructura de la divisin de pantalla, permitiendo actualizar o cargar elementos en una ubicacin independiente. Para establecer una pantalla con marcos (FRAMES), ser necesario de un archivo especializado en dividir y establecer nombre a cada segmento construido a travs del atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo SRC=. <frame src="gasesnobles.html" name="IZQ"/> <frame src="bienvenida.html" name="DER" /> La segmentacin en filas o columnas esta determinada por la etiqueta FRAMESET y su atributo COLS o ROWS. <frameset cols="25%,75%"> En la siguiente actividad se describe el marcos para construir una pgina web permite presentar contenidos en un extremo de la pantalla a partir de un fijo: uso de que listado

51

Actividad 7: Uso de marcos Se necesita elaborar una pgina capaz de mostrar la informacin de los gases nobles de la tabla peridica de los elementos qumicos en el extremo derecho de la ventana, a partir de una lista. Primero se construye el archivo que realiza la divisin de la ventana del explorador, a cada seccin se le da un nombre nico, as como un porcentaje de ocupacin determinado en filas rows o colum nas cols. Guardando el archivo con extensin .html. Adems las imgenes a utilizar debern ser guardadas en un carpeta denominada images, sin olvidar que los archivos as como la carpeta, estarn ubicadas en una carpeta raz llamada pagweb, vase la image adjunta a la codificacin del marco.

<html> <title> Qumica I </title> <frameset cols="25%,75%">

Archivo: inicio.html guardado en la carpeta pagweb

<frame src="gasesnobles.html" name="IZQ"/> <frame src="bienvenida.html" name="DER" /> </frameset> <html>

52

Archivos:

gasesnobles.html
<html> <body bgcolor="lightgreen"> <h1>Gases Nobles</h1> <HR>

<OL TYPE="1" START="1"> <LI> <A HREF="./helio.html" TARGET="DER"> Helio </A> </LI> <LI> <A HREF="./neon.html" TARGET="DER"> Nen </A> </LI> </OL> </body> </html>
bienvenida.html <html> <body bgcolor="lightblue"> <h1>Qumica I</h1> <HR> <center> <H2>Alumna</H2> <H3>Monserrat C. M. </H3> <HR> </center> </body> </html>

helio.html <html> <body bgcolor="lightblue"> <h1>Qumica I</h1> <HR> <p> <center> <img src="./images/helio.jpg" width="50%" heigth="50%" alt="Helio"> </center> <font color="blue">Helio </font>: Nmero atomico 2, descubrimiento: Janssen 1868 </P> </body> </html>

53

neon.html
<html> <body bgcolor="lightblue"> <h1>Qumica I</h1> <HR> <p> <center> <img src="./images/neon.jpg" width="50%" heigth="50%" alt="Nen"> </center> <font color="blue">Nen </font>: Nmero atomico 10, descubrimiento: Ramssey y Travers 1894

</P> </body> </html>

Proyecto: Publica lo aprendido en Informtica III

El proyecto final estar compuesto por una seleccin de trabajos realizados durante el ciclo escolar, mismos que son listados en el lado izquierdo de una estructura basados en marcos. Teniendo la siguie nte forma:

Enriquece tu pgina web con los siguientes elementos; desde colocar video, audio hasta efectos, sigue las instrucciones y etiquetas:

54

Insertar Audio: <BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true"> Insertar Video: <EMBED SRC="colon.avi" HEIGHT=300 WIDTH=400 AUTOSTART=TRUE LOOP=FALSE> Insertar archivos Flash <OBJECT width="250" height="100"> <PARAM NAME="movie" VALUE="pelicula.swf"> <EMBED SRC="peliucla.swf" width="250" height="100">

Transiciones: Dentro de la etiqueta HEAD <META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=3)"> <META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=4)"> <META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=6)">

Eventos: MouseOver <a href="../reference/tags.html" onmouseover="this.style.color='white'" onmouseout="this.style.color='black'">Lista de tags HTML</a>

Eventos: MouseOver A continuacin se muestra la codificacin de cmo efectuar el intercambio de imgenes al desplazar el puntero del mouse sobre una imagen. <img width="100%" src="1.jpg" onmouseover="this.src = '2.jpg'" onMouseOut="this.src = '3.jpg'" border="0"></img>

55

Bibliografa:
Referencias en internet: Estndar HTML5 (Oficial): http://www.w3.org/TR/html5/ Tutorial y etiquetado HTML: http://www.w3schools.com/html/default.asp HTML en espaol: http://es.wikipedia.org/wiki/HTML Inkscape sitio oficial: http://inkscape.org/?lang=es Libro Inkscape 0.48 illustrator's cookbook: http://www.packtpub.com/inkscape-048-illustratorscookbook/book Planeta InkScape (tutoriales): http://planet.inkscape.org/ Corel Draw Club (tutoriales): http://www.corelclub.org/ Tutoriales InkScape: http://inkscapetutorials.wordpress.com/

56