Upload
phamnhu
View
213
Download
0
Embed Size (px)
Citation preview
BENEMEacuteRITA UNIVERSIDAD AUTOacuteNOMA DE PUEBLA
NIVEL MEDIO SUPERIOR
INFORMAacuteTICA III
MATERIAL DIDAacuteCTICO CON ENFOQUE EN COMPETENCIAS
GUIacuteA METODOLOacuteGICA Y ANTOLOGIacuteA
PARA EL ALUMNO
(Segunda Parte)
ACADEMIA GENERAL DE INFORMAacuteTICA
NOMBRE DEL ALUMNO (A) ___________________________________________
NUacuteMERO DE COMPUTADORA__________________________________________ GRADO Y GRUPO ___________________________________________________
NOMBRE DEL PROFESOR (A)__________________________________________
ESCUELA _________________________________________________________
Diciembre 2012
2
ACTUALIZACIOacuteN Y REESTRUCTURACIOacuteN POR INTEGRANTES DE LA ACADEMIA GENERAL DE INFORMAacuteTICA
PROFESORES Autores
Joseacute Caseliacuten Rosas
Joseacute Rosas Ibarra
Javier Diacuteaz Saacutenchez
Minerva Goacutemez Marcos
Colaboradores Flaviano Peacuterez Romero Adriana Leoacuten Rodriacuteguez Mario Mora Velaacutezquez Adolfo Quiroz Rodriacuteguez
PRESENTACIOacuteN DE LA GUIacuteA METODOLOacuteGICA Y ANTOLOGIacuteA PARA EL ALUMNO
La presente guiacutea metodoloacutegica de Informaacutetica III para el alumno constituye la parte final
del desarrollo del aprendizaje en el aacuterea de Informaacutetica del Plan de Estudios vigente
(plan 06) del Nivel Medio Superior con el enfoque por competencias para el tercer antildeo
del Bachillerato Universitario Este material comprende la segunda parte de un total de
dos para el curso apoyaraacute en el desarrollo de las competencias que se definen en el
nuevo programa con este enfoque a traveacutes de actividades de aprendizaje significativo
que incluyen conceptos de temas como programas en lenguaje de programacioacuten C y el
uso adecuado y eficiente de las herramientas graacuteficas computacionales de disentildeo
graacutefico y construccioacuten de sitios web En todas las actividades se fomentan valores como
la eacutetica y la responsabilidad en la aplicacioacuten de los conocimientos adquiridos
Esta guiacutea metodoloacutegica y antologiacutea estaacute estructurada de la siguiente manera
Presentacioacuten de la guiacutea metodoloacutegica para los alumnos
Programa
Bloque II y III en con sus respectivas actividades
En el Bloque II se presentan ejemplos completos de programas en lenguaje de programacioacuten C que dan solucioacuten a una problemaacutetica determinada
En el bloque III se parte de la necesidad de comunicacioacuten que tiene los estudiantes se presentan actividades para utilizar las herramientas de disentildeo para comunicar con eacutetica y responsabilidad contenido acadeacutemico de intereacutes general o comercial
Instrumentos de evaluacioacuten que se aplicaraacuten durante el aprendizaje y como retroalimentacioacuten
Bibliografiacutea de referencia y de consulta
3
Este material estaacute disentildeado para ayudar al estudiante en la solucioacuten de situaciones
problemaacuteticas que se presenten de manera cotidiana y que se puedan resolver a traveacutes
del disentildeo de un programa de computadora con ello el estudiante desarrollaraacute 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 solucioacuten a la problemaacutetica planteada
Al final los estudiantes reflexionan sobre su aprendizaje utilizando diversos
instrumentos de retroalimentacioacuten (tablas preguntas esquemas mapas entre otros)
4
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA
PROGRAMACIOacuteN
MAPA CONCEPTUAL DEL BLOQUE
BLOQUE DE APRENDIZAJE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS
A TRAVEacuteS DE LA PROGRAMACIOacuteN
TIEMPO (700 minutos) 14 Hrs
UNIDAD DE COMPETENCIA Plantear estrategias de solucioacuten a problemas cotidianos utilizando de forma eficiente y responsable las
tecnologiacuteas de la informaacutetica mediante un proyecto en lenguaje de programacioacuten a nivel aplicativo y creativo
PROBLEMAS A RESOLVER
1 Plantear la solucioacuten a los problemas a traveacutes de programas en un lenguaje estructurado (C++) 2 Determinar la condicioacuten fiacutesica a partir de calcular el Iacutendice de masa corporal 3 Conocer las condiciones que un estudiante necesita para elaborar programas en un lenguaje estructurado 4 Concientizar sobre el adecuado uso del servicio de telefoniacutea celular implementando una estrategia de solucioacuten a traveacutes de un
programa en lenguaje de programacioacuten estructurado que calcule el costo del servicio 5 Desarrolla una aplicacioacuten en lenguaje de programacioacuten C que resuelva un problema determinado que involucre el desarrollo de
competencias planteadas en el bloque
SABERES
Declarativos Conceptos
Algoritmo en pseudocoacutedigo
Tipos de lenguajes de programacioacuten
Lenguaje estructurado de alto nivel C
Procedimentales
Plantear los algoritmos o diagramas de flujo a los problemas propuestos
Convertir el algoritmo a pseudocoacutedigo
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
6
Coacutedigo fuente archivo ejecutable
Editor del lenguaje C
Palabras reservadas
Tipos de datos
Sintaxis
Errores de sintaxis y de loacutegica
Compilar un programa
Ejecutar probar o correr un programa
Libreriacuteas
Funcioacuten principal (main)
Funciones predefinidas
Sentencias de decisioacuten if-else else if switch-case
Sentencias de repeticioacuten para (for) mientras (while) hacer- mientras (do-while)
Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocoacutedigo a coacutedigo fuente)
Compilar el programa
Detectar y corregir los errores
Ejecutar el programa observar y comprobar los resultados
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Disposicioacuten al aprendizaje autoacutenomo al razonamiento deductivo y enfrentar retos
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen al planteamiento de las soluciones a los problemas
propuestos y otros semejantes de su vida cotidiana mediante la codificacioacuten a traveacutes de un lenguaje de programacioacuten estructurado
Conocimientos
- Conoce sentencias para convertir algoritmos a pseudocoacutedigo
- Conoce el entorno de programacioacuten de lenguaje C
- Uso de palabras reservadas sintaxis loacutegica y funcionamiento de un programa Habilidades
- Escribe el pseudocoacutedigo de los algoritmos propuestos
- Elabora el programa en lenguaje C
- Identifica y corrige errores de sintaxis y loacutegica
- Observa y comprueba resultados obtenidos Actitudes y valores -Tolerancias ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
2
ACTUALIZACIOacuteN Y REESTRUCTURACIOacuteN POR INTEGRANTES DE LA ACADEMIA GENERAL DE INFORMAacuteTICA
PROFESORES Autores
Joseacute Caseliacuten Rosas
Joseacute Rosas Ibarra
Javier Diacuteaz Saacutenchez
Minerva Goacutemez Marcos
Colaboradores Flaviano Peacuterez Romero Adriana Leoacuten Rodriacuteguez Mario Mora Velaacutezquez Adolfo Quiroz Rodriacuteguez
PRESENTACIOacuteN DE LA GUIacuteA METODOLOacuteGICA Y ANTOLOGIacuteA PARA EL ALUMNO
La presente guiacutea metodoloacutegica de Informaacutetica III para el alumno constituye la parte final
del desarrollo del aprendizaje en el aacuterea de Informaacutetica del Plan de Estudios vigente
(plan 06) del Nivel Medio Superior con el enfoque por competencias para el tercer antildeo
del Bachillerato Universitario Este material comprende la segunda parte de un total de
dos para el curso apoyaraacute en el desarrollo de las competencias que se definen en el
nuevo programa con este enfoque a traveacutes de actividades de aprendizaje significativo
que incluyen conceptos de temas como programas en lenguaje de programacioacuten C y el
uso adecuado y eficiente de las herramientas graacuteficas computacionales de disentildeo
graacutefico y construccioacuten de sitios web En todas las actividades se fomentan valores como
la eacutetica y la responsabilidad en la aplicacioacuten de los conocimientos adquiridos
Esta guiacutea metodoloacutegica y antologiacutea estaacute estructurada de la siguiente manera
Presentacioacuten de la guiacutea metodoloacutegica para los alumnos
Programa
Bloque II y III en con sus respectivas actividades
En el Bloque II se presentan ejemplos completos de programas en lenguaje de programacioacuten C que dan solucioacuten a una problemaacutetica determinada
En el bloque III se parte de la necesidad de comunicacioacuten que tiene los estudiantes se presentan actividades para utilizar las herramientas de disentildeo para comunicar con eacutetica y responsabilidad contenido acadeacutemico de intereacutes general o comercial
Instrumentos de evaluacioacuten que se aplicaraacuten durante el aprendizaje y como retroalimentacioacuten
Bibliografiacutea de referencia y de consulta
3
Este material estaacute disentildeado para ayudar al estudiante en la solucioacuten de situaciones
problemaacuteticas que se presenten de manera cotidiana y que se puedan resolver a traveacutes
del disentildeo de un programa de computadora con ello el estudiante desarrollaraacute 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 solucioacuten a la problemaacutetica planteada
Al final los estudiantes reflexionan sobre su aprendizaje utilizando diversos
instrumentos de retroalimentacioacuten (tablas preguntas esquemas mapas entre otros)
4
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA
PROGRAMACIOacuteN
MAPA CONCEPTUAL DEL BLOQUE
BLOQUE DE APRENDIZAJE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS
A TRAVEacuteS DE LA PROGRAMACIOacuteN
TIEMPO (700 minutos) 14 Hrs
UNIDAD DE COMPETENCIA Plantear estrategias de solucioacuten a problemas cotidianos utilizando de forma eficiente y responsable las
tecnologiacuteas de la informaacutetica mediante un proyecto en lenguaje de programacioacuten a nivel aplicativo y creativo
PROBLEMAS A RESOLVER
1 Plantear la solucioacuten a los problemas a traveacutes de programas en un lenguaje estructurado (C++) 2 Determinar la condicioacuten fiacutesica a partir de calcular el Iacutendice de masa corporal 3 Conocer las condiciones que un estudiante necesita para elaborar programas en un lenguaje estructurado 4 Concientizar sobre el adecuado uso del servicio de telefoniacutea celular implementando una estrategia de solucioacuten a traveacutes de un
programa en lenguaje de programacioacuten estructurado que calcule el costo del servicio 5 Desarrolla una aplicacioacuten en lenguaje de programacioacuten C que resuelva un problema determinado que involucre el desarrollo de
competencias planteadas en el bloque
SABERES
Declarativos Conceptos
Algoritmo en pseudocoacutedigo
Tipos de lenguajes de programacioacuten
Lenguaje estructurado de alto nivel C
Procedimentales
Plantear los algoritmos o diagramas de flujo a los problemas propuestos
Convertir el algoritmo a pseudocoacutedigo
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
6
Coacutedigo fuente archivo ejecutable
Editor del lenguaje C
Palabras reservadas
Tipos de datos
Sintaxis
Errores de sintaxis y de loacutegica
Compilar un programa
Ejecutar probar o correr un programa
Libreriacuteas
Funcioacuten principal (main)
Funciones predefinidas
Sentencias de decisioacuten if-else else if switch-case
Sentencias de repeticioacuten para (for) mientras (while) hacer- mientras (do-while)
Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocoacutedigo a coacutedigo fuente)
Compilar el programa
Detectar y corregir los errores
Ejecutar el programa observar y comprobar los resultados
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Disposicioacuten al aprendizaje autoacutenomo al razonamiento deductivo y enfrentar retos
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen al planteamiento de las soluciones a los problemas
propuestos y otros semejantes de su vida cotidiana mediante la codificacioacuten a traveacutes de un lenguaje de programacioacuten estructurado
Conocimientos
- Conoce sentencias para convertir algoritmos a pseudocoacutedigo
- Conoce el entorno de programacioacuten de lenguaje C
- Uso de palabras reservadas sintaxis loacutegica y funcionamiento de un programa Habilidades
- Escribe el pseudocoacutedigo de los algoritmos propuestos
- Elabora el programa en lenguaje C
- Identifica y corrige errores de sintaxis y loacutegica
- Observa y comprueba resultados obtenidos Actitudes y valores -Tolerancias ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
3
Este material estaacute disentildeado para ayudar al estudiante en la solucioacuten de situaciones
problemaacuteticas que se presenten de manera cotidiana y que se puedan resolver a traveacutes
del disentildeo de un programa de computadora con ello el estudiante desarrollaraacute 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 solucioacuten a la problemaacutetica planteada
Al final los estudiantes reflexionan sobre su aprendizaje utilizando diversos
instrumentos de retroalimentacioacuten (tablas preguntas esquemas mapas entre otros)
4
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA
PROGRAMACIOacuteN
MAPA CONCEPTUAL DEL BLOQUE
BLOQUE DE APRENDIZAJE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS
A TRAVEacuteS DE LA PROGRAMACIOacuteN
TIEMPO (700 minutos) 14 Hrs
UNIDAD DE COMPETENCIA Plantear estrategias de solucioacuten a problemas cotidianos utilizando de forma eficiente y responsable las
tecnologiacuteas de la informaacutetica mediante un proyecto en lenguaje de programacioacuten a nivel aplicativo y creativo
PROBLEMAS A RESOLVER
1 Plantear la solucioacuten a los problemas a traveacutes de programas en un lenguaje estructurado (C++) 2 Determinar la condicioacuten fiacutesica a partir de calcular el Iacutendice de masa corporal 3 Conocer las condiciones que un estudiante necesita para elaborar programas en un lenguaje estructurado 4 Concientizar sobre el adecuado uso del servicio de telefoniacutea celular implementando una estrategia de solucioacuten a traveacutes de un
programa en lenguaje de programacioacuten estructurado que calcule el costo del servicio 5 Desarrolla una aplicacioacuten en lenguaje de programacioacuten C que resuelva un problema determinado que involucre el desarrollo de
competencias planteadas en el bloque
SABERES
Declarativos Conceptos
Algoritmo en pseudocoacutedigo
Tipos de lenguajes de programacioacuten
Lenguaje estructurado de alto nivel C
Procedimentales
Plantear los algoritmos o diagramas de flujo a los problemas propuestos
Convertir el algoritmo a pseudocoacutedigo
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
6
Coacutedigo fuente archivo ejecutable
Editor del lenguaje C
Palabras reservadas
Tipos de datos
Sintaxis
Errores de sintaxis y de loacutegica
Compilar un programa
Ejecutar probar o correr un programa
Libreriacuteas
Funcioacuten principal (main)
Funciones predefinidas
Sentencias de decisioacuten if-else else if switch-case
Sentencias de repeticioacuten para (for) mientras (while) hacer- mientras (do-while)
Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocoacutedigo a coacutedigo fuente)
Compilar el programa
Detectar y corregir los errores
Ejecutar el programa observar y comprobar los resultados
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Disposicioacuten al aprendizaje autoacutenomo al razonamiento deductivo y enfrentar retos
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen al planteamiento de las soluciones a los problemas
propuestos y otros semejantes de su vida cotidiana mediante la codificacioacuten a traveacutes de un lenguaje de programacioacuten estructurado
Conocimientos
- Conoce sentencias para convertir algoritmos a pseudocoacutedigo
- Conoce el entorno de programacioacuten de lenguaje C
- Uso de palabras reservadas sintaxis loacutegica y funcionamiento de un programa Habilidades
- Escribe el pseudocoacutedigo de los algoritmos propuestos
- Elabora el programa en lenguaje C
- Identifica y corrige errores de sintaxis y loacutegica
- Observa y comprueba resultados obtenidos Actitudes y valores -Tolerancias ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
4
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA
PROGRAMACIOacuteN
MAPA CONCEPTUAL DEL BLOQUE
BLOQUE DE APRENDIZAJE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS
A TRAVEacuteS DE LA PROGRAMACIOacuteN
TIEMPO (700 minutos) 14 Hrs
UNIDAD DE COMPETENCIA Plantear estrategias de solucioacuten a problemas cotidianos utilizando de forma eficiente y responsable las
tecnologiacuteas de la informaacutetica mediante un proyecto en lenguaje de programacioacuten a nivel aplicativo y creativo
PROBLEMAS A RESOLVER
1 Plantear la solucioacuten a los problemas a traveacutes de programas en un lenguaje estructurado (C++) 2 Determinar la condicioacuten fiacutesica a partir de calcular el Iacutendice de masa corporal 3 Conocer las condiciones que un estudiante necesita para elaborar programas en un lenguaje estructurado 4 Concientizar sobre el adecuado uso del servicio de telefoniacutea celular implementando una estrategia de solucioacuten a traveacutes de un
programa en lenguaje de programacioacuten estructurado que calcule el costo del servicio 5 Desarrolla una aplicacioacuten en lenguaje de programacioacuten C que resuelva un problema determinado que involucre el desarrollo de
competencias planteadas en el bloque
SABERES
Declarativos Conceptos
Algoritmo en pseudocoacutedigo
Tipos de lenguajes de programacioacuten
Lenguaje estructurado de alto nivel C
Procedimentales
Plantear los algoritmos o diagramas de flujo a los problemas propuestos
Convertir el algoritmo a pseudocoacutedigo
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
6
Coacutedigo fuente archivo ejecutable
Editor del lenguaje C
Palabras reservadas
Tipos de datos
Sintaxis
Errores de sintaxis y de loacutegica
Compilar un programa
Ejecutar probar o correr un programa
Libreriacuteas
Funcioacuten principal (main)
Funciones predefinidas
Sentencias de decisioacuten if-else else if switch-case
Sentencias de repeticioacuten para (for) mientras (while) hacer- mientras (do-while)
Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocoacutedigo a coacutedigo fuente)
Compilar el programa
Detectar y corregir los errores
Ejecutar el programa observar y comprobar los resultados
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Disposicioacuten al aprendizaje autoacutenomo al razonamiento deductivo y enfrentar retos
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen al planteamiento de las soluciones a los problemas
propuestos y otros semejantes de su vida cotidiana mediante la codificacioacuten a traveacutes de un lenguaje de programacioacuten estructurado
Conocimientos
- Conoce sentencias para convertir algoritmos a pseudocoacutedigo
- Conoce el entorno de programacioacuten de lenguaje C
- Uso de palabras reservadas sintaxis loacutegica y funcionamiento de un programa Habilidades
- Escribe el pseudocoacutedigo de los algoritmos propuestos
- Elabora el programa en lenguaje C
- Identifica y corrige errores de sintaxis y loacutegica
- Observa y comprueba resultados obtenidos Actitudes y valores -Tolerancias ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
BLOQUE DE APRENDIZAJE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS
A TRAVEacuteS DE LA PROGRAMACIOacuteN
TIEMPO (700 minutos) 14 Hrs
UNIDAD DE COMPETENCIA Plantear estrategias de solucioacuten a problemas cotidianos utilizando de forma eficiente y responsable las
tecnologiacuteas de la informaacutetica mediante un proyecto en lenguaje de programacioacuten a nivel aplicativo y creativo
PROBLEMAS A RESOLVER
1 Plantear la solucioacuten a los problemas a traveacutes de programas en un lenguaje estructurado (C++) 2 Determinar la condicioacuten fiacutesica a partir de calcular el Iacutendice de masa corporal 3 Conocer las condiciones que un estudiante necesita para elaborar programas en un lenguaje estructurado 4 Concientizar sobre el adecuado uso del servicio de telefoniacutea celular implementando una estrategia de solucioacuten a traveacutes de un
programa en lenguaje de programacioacuten estructurado que calcule el costo del servicio 5 Desarrolla una aplicacioacuten en lenguaje de programacioacuten C que resuelva un problema determinado que involucre el desarrollo de
competencias planteadas en el bloque
SABERES
Declarativos Conceptos
Algoritmo en pseudocoacutedigo
Tipos de lenguajes de programacioacuten
Lenguaje estructurado de alto nivel C
Procedimentales
Plantear los algoritmos o diagramas de flujo a los problemas propuestos
Convertir el algoritmo a pseudocoacutedigo
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
6
Coacutedigo fuente archivo ejecutable
Editor del lenguaje C
Palabras reservadas
Tipos de datos
Sintaxis
Errores de sintaxis y de loacutegica
Compilar un programa
Ejecutar probar o correr un programa
Libreriacuteas
Funcioacuten principal (main)
Funciones predefinidas
Sentencias de decisioacuten if-else else if switch-case
Sentencias de repeticioacuten para (for) mientras (while) hacer- mientras (do-while)
Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocoacutedigo a coacutedigo fuente)
Compilar el programa
Detectar y corregir los errores
Ejecutar el programa observar y comprobar los resultados
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Disposicioacuten al aprendizaje autoacutenomo al razonamiento deductivo y enfrentar retos
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen al planteamiento de las soluciones a los problemas
propuestos y otros semejantes de su vida cotidiana mediante la codificacioacuten a traveacutes de un lenguaje de programacioacuten estructurado
Conocimientos
- Conoce sentencias para convertir algoritmos a pseudocoacutedigo
- Conoce el entorno de programacioacuten de lenguaje C
- Uso de palabras reservadas sintaxis loacutegica y funcionamiento de un programa Habilidades
- Escribe el pseudocoacutedigo de los algoritmos propuestos
- Elabora el programa en lenguaje C
- Identifica y corrige errores de sintaxis y loacutegica
- Observa y comprueba resultados obtenidos Actitudes y valores -Tolerancias ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
6
Coacutedigo fuente archivo ejecutable
Editor del lenguaje C
Palabras reservadas
Tipos de datos
Sintaxis
Errores de sintaxis y de loacutegica
Compilar un programa
Ejecutar probar o correr un programa
Libreriacuteas
Funcioacuten principal (main)
Funciones predefinidas
Sentencias de decisioacuten if-else else if switch-case
Sentencias de repeticioacuten para (for) mientras (while) hacer- mientras (do-while)
Elaborar el programa en lenguaje C (codificar el algoritmo en pseudocoacutedigo a coacutedigo fuente)
Compilar el programa
Detectar y corregir los errores
Ejecutar el programa observar y comprobar los resultados
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Disposicioacuten al aprendizaje autoacutenomo al razonamiento deductivo y enfrentar retos
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen al planteamiento de las soluciones a los problemas
propuestos y otros semejantes de su vida cotidiana mediante la codificacioacuten a traveacutes de un lenguaje de programacioacuten estructurado
Conocimientos
- Conoce sentencias para convertir algoritmos a pseudocoacutedigo
- Conoce el entorno de programacioacuten de lenguaje C
- Uso de palabras reservadas sintaxis loacutegica y funcionamiento de un programa Habilidades
- Escribe el pseudocoacutedigo de los algoritmos propuestos
- Elabora el programa en lenguaje C
- Identifica y corrige errores de sintaxis y loacutegica
- Observa y comprueba resultados obtenidos Actitudes y valores -Tolerancias ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
7
COMPETENCIAS
GeneacutericasAtributos
5 Desarrolla innovaciones y propone soluciones a problemas a partir de meacutetodos establecidos
Atributos 1 Sigue instrucciones y procedimientos de manera reflexiva
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo
3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenoacutemenos
6 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para procesar e interpretar informacioacuten
7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento
2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad reconociendo y controlando sus reacciones frente a retos y obstaacuteculos
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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas 5 Aplica los principios eacuteticos en la generacioacuten y tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso de las tecnologiacuteas de informacioacuten y comunicacioacuten para la optimizacioacuten de las actividades cotidianas
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
8
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS EVIDENCIAS YO PRODUCTOS
Programacioacuten
Se retoman los algoritmos
elaborados y se explica el
pseudocoacutedigo
Dirige una lluvia de ideas sobre los
conceptos a aprender de los
lenguajes de programacioacuten
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 solucioacuten
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responde a preguntas
Usa algoritmos diagramas de flujo y programas en lenguaje estructurado
Trabajo y discusioacuten en
parejas
Buacutesqueda de informacioacuten
y colaboracioacuten
espontaacutenea
Intercambiar ideas con
compantildeeros que
entiendan mejor el tema
Asesoriacutea del profesor
Participan con sus
conceptos y explicaciones
Elaboran algoritmos y diagramas de flujo
Elabora los programas apoyaacutendose en los algoritmos previos en lenguaje C
Compila ejecuta y comprueba resultados
Libreta
Manual de praacutecticas y antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo con
equipos y mobiliario suficientes
(maacutex 2 alumnos por
computadora)
Mesas y sillas que les permita
trabajar coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y microacutefono
Internet compilador y de
lenguaje C
Presentaciones digitales
Taller 1
1 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten (15)
2 Documento de la actividad 2
(15)
3 Implementacioacuten del problema
del costo del servicio de
telefoniacutea celular en lenguaje de
programacioacuten(15)
4 Implementacioacuten del problema
del IMC en lenguaje de
programacioacuten utilizando
ciclos(15)
Producto final de programacioacuten
(40)
Todas las evidencias se entregan en archivos digitales
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque II los estudiantes codifican los algoritmos y diagramas de flujo en el lenguaje de programacioacuten C Se da
seguimiento a las etapas por las que debe pasar el proceso de solucioacuten de un problema que culmina con la codificacioacuten
ejecucioacuten y comprobacioacuten de resultados del programa La matriz de evaluacioacuten se aplicaraacute para 2 unidades del programa de
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
9
informaacutetica III la primera evaluacioacuten se aplica para programas que resuelvan problemas de nivel baacutesico y la segunda
evaluacioacuten para programas que incluyan sentencias de decisioacuten y repeticioacuten
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Retoma algoritmos y diagramas de flujo a problemas propuestos 2 Codifica los algoritmos o diagramas en lenguaje de programacioacuten C 3 Depura el programa y corrige errores de sintaxis 4 Ejecuta el programa comprueba resultados y de ser necesario corrige errores de loacutegica
Dificultad en la
comprensioacuten del
problema
No identifica ni
plantea soluciones
en lenguaje C
Presenta una
propuesta de
programa que no
corresponde al
problema
Muestra desintereacutes
por participar
Comprende de
manera muy
general el
problema
Presenta una
propuesta de
programa que no
resuelve el
problema
Se interesa en el
tema parcialmente
Presenta las 3 fases
de solucioacuten (entrada
proceso y salida)
pero no resuelve en
su totalidad el
problema
Presenta el programa
en lenguaje C y se
obtienen los
resultados esperados
al problema planteado
Comprende
estrateacutegicamente el
problema y propone un
proyecto de solucioacuten
integral creativo e
innovador en lenguaje C
Compara resultados con
sus compantildeeros con
respeto
Identifica la utilidad de los
conceptos para solucionar
problemas de la vida
cotidiana
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros Aspectos a mejorar
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
10
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque conforme se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias o Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
11
BLOQUE II ESTRATEGIAS DE SOLUCIOacuteN DE PROBLEMAS A TRAVEacuteS DE LA PROGRAMACIOacuteN
Taller 1 Entorno de programacioacuten
Actividad 1 Crear el primer programa en lenguaje de programacioacuten C++ (1 sesioacuten 100
min)
En la actividad 1 del bloque anterior se abordoacute la problemaacutetica del iacutendice de masa corporal (IMC) de una persona Se elaboroacute un algoritmo para automatizar el caacutelculo y se analizaron las condiciones fiacutesicas de las personas a partir del IMC obtenido Tambieacuten se elaboroacute el pseudocoacutedigo del algoritmo correspondiente en PseInt El algoritmo que calcula el iacutendice de masa corporal es el siguiente 1 Inicio 2 Dar el peso en kilogramos (peso) 3 Dar la estatura en metros (estatura) 4 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura) 5 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC 6 Si IMClt185 entonces
Indicar ldquoLa persona estaacute baja de pesordquo 7 Si IMCgt=185 y IMClt25 entonces
Indicar ldquoLa persona estaacute en su peso normalrdquo 8 Si IMCgt=25 y IMClt30 entonces
Indicar ldquoLa persona tiene sobrepesordquo 9 Si IMCgt=30 entonces
Indicar ldquoLa persona tiene problemas de obesidadrdquo 10 Fin El coacutedigo correspondiente en lenguaje de programacioacuten C++ se presenta a continuacioacuten (lo escrito despueacutes de las barras y en cursivas representan comentarios y explicaciones de cada una de las instrucciones en c++
include ltstdiohgt Libreriacutea estaacutendar de entrada y salida (permite utilizar funciones como printf() y scanf()
include ltconiohgt Libreriacutea de consola de entrada y salida (permite utilizar sentencias como clrscr() y gotoxy()
void main() Declaracioacuten de programa principal Llave de inicio de programa float peso estatura imc Declaracioacuten de variables printf(Programa para calcular el iacutendice de masa corporal ) printf (Escribe en pantalla) printf(Proporciona el peso en kilogramos)
scanf(famppeso) scanf Lee de pantalla y guarda el valor en la variable peso
printf(Proporciona la estatura en metros)
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
12
scanf(fampestatura)
imc=peso(estaturaestatura) Asigna a la variable imc el valor la operacioacuten printf(Tu masa corporal es f imc) printf Escribe en pantalla texto y el contenido
de la variable imc if (imclt185) Sentencia de condicioacuten
printf(La persona esta baja de peso) if (imcgt=185 ampamp imclt25)
printf(la persona esta en su peso normal)
Llave de fin de programa Para comprobar el funcionamiento del coacutedigo descrito anteriormente se pueden utilizar dos programas los cuales se encuentran disponibles en la red Uno es el editor de Turbo C++ 45 para equipos con pocos recursos de hardware y con un Sistemas Operativo y procesador de 32 bits Para el caso de sistemas operativos y procesador a 64 bits (normalmente los equipos nuevos vienen con estas caracteriacutesticas) se sugiere utilizar ZinjaI++ este uacuteltimo se puede descargar del siguiente sitio httpzinjaisourceforgenetindexphppage=descargasphp
Para descargarlo se selecciona el iacutecono de Windows una vez descargado se instala aceptando la configuracioacuten predeterminada De acuerdo al portal ZinjaI es un IDE (entorno de desarrollo integrado) libre y gratuito para programar en CC++ Pensado originalmente para ser utilizado por estudiantes de programacioacuten durante el aprendizaje presenta una interfaz inicial muy sencilla pero sin dejar de incluir funcionalidades avanzadas que permiten el desarrollo de proyectos tan complejos como ZinjaI mismo Otra de las ventajas que ofrece ZinjaI es que su entorno y ambiente es similar a PsEint el programa que utiliza lenguaje Pseudocoacutedigo utilizado en el bloque I esto permite trabajar en un ambiente conocido
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
13
Los compiladores de C++
Turbo c++ 45
Para acceder al editor ejecutamos Inicio todos los programas Turbo C++ 45 y Turbo C++
La pantalla se muestra como sigue
El panel estaacute o puede ser dividido en varias pantallas como cualquier aplicacioacuten de Windows
en este caso se observa la ventana de edicioacuten del archivo coutcpp (extensioacuten por default de
los programas escritos en Turbo C++ 45) y la ventana de mensajes que nos indica los
errores de sintaxis que pueda tener el programa
ZinjaI Versioacuten 20300102
Para acceder al editor ejecutamos el +icono del escritorio
De las opciones que nos muestra podemos seleccionar Create simple program esto nos
permite escribir coacutedigo directamente en el editor A diferencia de turno C++ ZinjaI agrega por
nosotros la biblioteca ltiostreamgt asiacute como el encabezado de nuestro programa
La pantalla inicial se muestra a continuacioacuten
Componentes
A Barra de tiacutetulo
B Barra de menuacutes
C Ventana del editor
D Ventana de mensajes
A B
C
D
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
14
Una vez seleccionado la opcioacuten Create simple Program seleccionamos la primera opcioacuten
de la lista es decir Empty C++ Programacutes Skeleton y activamos el botoacuten creacuteate
ZinjaI escribe por nosotros las siguientes liacuteneas
include ltiostreamgt Biblioteca de entrada y salida estaacutendar
using namespace std Espacio de nombres que contiene clases
objetos y funciones de C++
int main(int argc char argv[]) Programa principal con sus argumentos y llave de
inicio de programa
return 0 Valor que regresa mi programa
Llave de fin de programa
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
15
El coacutedigo de mis programas
Dado que ZinjaI ha agregado por miacute las liacuteneas principales todo el coacutedigo de mis programas
se escribiraacute entre la llave inicial y la llave final
El programa del IMC terminado se muestra a continuacioacuten
Se agregoacute la siguiente liacutenea
2 include ltstdiohgt para utilizar las funciones printf() y scanf()
El coacutedigo escrito soacutelo considera tres condiciones ldquopeso bajordquo ldquosobrepesordquo y ldquopeso normalrdquo
falta entonces dos condiciones ldquoDesnutricioacutenrdquo y ldquoObesidadrdquo
Actividad y evidencia Escriba el programa del IMC en el editor de turbo C++ o ZinjaI
incluyendo las condiciones de obesidad y desnutricioacuten (vea la tabla de la actividad 1 del
parcial 2) para determinar los liacutemites de cada condicioacuten es decir si el imc es mayor a 30 la
persona tiene problemas de ldquoObesidadrdquo y si el imc es menor a 17 la persona tiene
problemas de desnutricioacuten Utiliza la siguiente tabla para comprobar tus resultados
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
16
Persona 1 2 3 4 5
Peso 40 45 72 78 80
Estatura 160 160 170 173 150
Condicioacuten Desnutricioacuten Peso bajo Normal Sobrepeso Obesidad
Actividad 2 Lectura
ldquoEn el mundo de la programacioacutenrdquo
Sea paciente elaborar un programa requiere de esfuerzo concentracioacuten creatividad suspicacia intuicioacuten disciplina y hacer las cosas con pasioacuten
Puedes echar a perder tu diacutea si no analizas el problema y no haces un algoritmo primero los errores de sintaxis y sobre todo loacutegicos pueden darte dolores de cabeza
Cuando parece que nada se soluciona y que no ldquosalerdquo nada es momento de tomar un descanso realizar alguna actividad recreativa luacutedica deportiva Es recomendable llevarlo a cabo despueacutes de un tiempo considerable dedicado a programar
La computadora es un dispositivo moderno de la maacutes alta tecnologiacutea pero ldquono piensardquo ldquono razonardquo ldquono deducerdquo ldquopuede decidir pero no por siacute mismardquo estaacute sujeta a ejecutar las oacuterdenes que el usuario o el programador le indique si no obtienes los resultados que deseas es seguro que debes revisar tu coacutedigo no es la maacutequina ni el compilador de C ya que quien escribe las oacuterdenes eres tuacute No seas tan cruel con los calificativos a la maacutequina pues en realidad eres tuacute en el papel de programador el responsable
La programacioacuten es una estrategia de solucioacuten a determinados problemas o necesidades cotidianas que nos permite automatizar los procesos para agilizar la obtencioacuten de resultados y hacer caacutelculos precisos por medio de una
computadora
Existe una gran variedad de aplicaciones (programas) que resuelven necesidades de nuestra vida cotidiana que se encuentran en
o El funcionamiento de una computadora (Sistemas operativo juegos agendas) celular (chats alarmas) ipad (mapas lectores de documentos) ipod (reproductores de muacutesica) iphone (reproductores de video) ipaq (emuladores) y maacutes
o Los controles del automoacutevil funciones especiacuteficas de las televisiones los controles de las consolas de videojuegos aplicaciones y juegos en internet equipo meacutedico roboacutetica domoacutetica etc
Evidencia Elaborar un mapa mental sobre la lectura anterior resaltando los datos y la informacioacuten contenida Para mapas mentales consulte los siguientes sitios
httpsociologiacnet2008090211-aplicaciones-gratuitas-para-crear-mapas-mentales
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
17
Gratuita Freemind Semantik Otros RecallPlus Labyrinth
Producto Documento en Word con los siguientes elementos
Portada
Introduccioacuten
Desarrollo (mapa mental)
Conclusioacuten Para la evaluacioacuten del producto usar la siguiente lista de cotejo
Para evaluar el mapa mental usar la siguiente ruacutebrica
Elemento No Presenta o deficiente
Presenta Puntos
Documento en Word 1
Portada 05
Introduccioacuten 05 Mapa mental 5
Conclusioacuten 1
Muestra disciplina y respeto en la actividad
2
Puntaje Total 10
Los puntajes anteriores seraacuten aplicados siempre y cuando se entregue a tiempo la actividad en caso contrario al puntaje total se le restaraacuten 2 puntos
Ruacutebrica del mapa mental de la lectura de la Actividad 2 (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Principales conceptos representados en figuras o imaacutegenes
No corresponden Faltan figuras o imaacutegenes
Presenta todos los conceptos a traveacutes de figuras o imaacutegenes
Presenta todos los conceptos con coherencia a traveacutes de figuras o imaacutegenes
Frases o palabras para enlazar los conceptos representados por figuras o imaacutegenes
No existen o no corresponden
Faltan algunas Presenta todas Se establecieron todas coherentemente
Jerarquizacioacuten No hay orden Orden incompleto
De lo general a lo particular
De lo general a lo particular
Presentacioacuten visual No clara Clara y simple Clara y simple Clara simple y creativa
Puntaje 25 35 45 5
Comentarios Adicionales
Retroalimentacioacuten
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
18
ACTIVIDAD 3
ldquoLas Redes Socialesrdquo
ldquoLas redes sociales han absorbido el tiempo de los joacutevenes de
nuestro paiacutesrdquo
Existe abuso e incluso riesgo de dependencia relacionados con el
tiempo de conexioacuten y paralelamente del abandono de otros
espacios reales de interaccioacuten que pueden darse en algunos
joacutevenes principalmente
Debemos potenciar las amistades fuera de la red y buscar
actividades gratificantes offline y mejor si son al aire libre o fuera de casa
Las redes sociales tambieacuten pueden ser muy provechosas si se les da un uso adecuado
como por ejemplo para compartir ideas opiniones compartir conocimientos para aprender
para informarse para organizarse en un proyecto para relacionarse para encontrar
familiares etc depende de que seamos conscientes al usarlas no abusar porque podriacuteamos
caer en riesgos de todo tipo
Vamos a indagar coacutemo usas las redes sociales
iquestQueacute tiempo te conectas en promedio por diacutea (en hrs) ___________
iquestCuaacutentos diacuteas te conectas a una red social por semana en promedio ___________
iquestEn queacute fecha iniciaste mes ____ antildeo ____
iquestQueacute fecha es hoy mes ____ antildeo ____
Plantear la foacutermula para determinar la cantidad de meses conectado
_____________________________________________________________________
Plantear la foacutermula para determinar la cantidad de hrs conectado
_____________________________________________________________________
Los diacuteas (de 16 hrs) que has acumulados al estar en redes sociales son ______
iquestQueacute porcentaje de ese tiempo consideras que ha sido bien aprovechado
______________________________________________________________________
iquestQueacute actividades productivas podriacuteas hacer con esa cantidad de diacuteas
______________________________________________________________________
Que lo haga la computadora hellip
Elaborar el algoritmo y el programa que resuelva la situacioacuten anterior
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
19
Expertos en redes sociales consideran excesivordquo
sobrepasar 1 hora de conexioacuten a las redes sociales se
pierden horas de suentildeo y de actividad fiacutesica y aumenta el
aislamiento y que el abuso hace que con las redes
sociales se ldquodegradenrdquo el concepto de amistad y cuanto
maacutes tiempo se dedica a la red social virtual maacutes se
ldquoreducerdquo el dedicado a la red social real
ACTIVIDAD 4
Saquemos ventaja de la programacioacuten hellip
Requiero ahora de un programa que dada la distribucioacuten de mi tiempo en promedio diario
me indique el porcentaje de tiempo dedicado a cada actividad y al semestre cuantos diacuteas de
16 horas he invertido en las redes sociales
Datos de entrada
El diacutea cuenta con 24 horas ocupaacutendolas en
Horas de dormir ____________________
Horas de comida ____________________
Horas de traslado a la escuela ____________________
Horas auteacutenticas en la escuela ____________________
Horas de cuidado personal ____________________
Horas de entretenimiento ____________________
Horas para otras actividades ____________________
Total de horas dedicadas las redes sociales ____________________ Datos de salida
Porcentaje de tiempo dedicado a cada actividad
Diacuteas de 16 horas que he invertido en redes sociales (al semestre) Conclusioacuten de la actividad ______________________________________________________________________ ______________________________________________________________________
Menciona tres redes sociales y la utilidad que has encontrado en cada una de ellas 1 ____________________________________________________________________
2 ____________________________________________________________________
3 ____________________________________________________________________ (Se sugiere disentildear una actividad donde se use productivamente una red Social)
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
20
ACTIVIDAD 5
Mensajes de celular
Estando en la escuela un amigo me dice iquestMe dejas enviar un mensajeiquestTienes saldo
recuerdo haber hecho una recarga de $2000 a mi celular la uacuteltima vez pero no recuerdo
cuantos mensajes he enviado consultar el saldo tambieacuten me genera un gasto iquestcoacutemo saber
cuaacutentos mensajes puedo enviar a mis amigos si compro 30 pesos de tiempo aire seriacutea muy
bueno tener un sistema de control de mensajes que me indique despueacutes de cada mensaje
enviado cual es el saldo y cuantos mensajes puedo enviar con el saldo restante por ejemplo
en Android existe una aplicacioacuten que termina la llamada antes de los 5 min Para ello debo
considerar los siguientes aspectos
Proporcione el costo del mensaje para diferentes compantildeiacuteas
Compantildeiacutea Costo
1____________ ______________
2____________ ______________
iquestCuantos caracteres puedo escribir en cada mensaje________________________
La empresa Telmex ha anuncioacute que bajariacutea sus costos a partir de enero de 2012 busque
informacioacuten relacionada con esto indique que tan cierto es y queacute beneficios reales le brinda
a usted como usuario
Visite los siguientes sitios
wwwcofetelgobmx
Consulte los siguientes hiperviacutenculos (ligas) Usuarios Mi cofetel Consejos de uso (ver
maacutes) Derechos del Usuario (ver maacutes)
Mencione tres beneficios que la compantildeiacutea telefoacutenica le ofrece pero que no ha verificado si
cuenta con ello Explique iquestcuaacuteles y por queacute
1 _______________________________________________________
2 _______________________________________________________
3 _______________________________________________________
Evidencia Disentildee el algoritmo y elabore el programa en lenguaje C que resuelva el problema
de los mensajes en donde se solicite la cantidad de tiempo aire que se compraraacute e indique el
nuacutemero de mensajes que puedo enviar a diferentes compantildeiacuteas
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
21
Actividad 6
Maacutes de una vezhellip
Ciclos bucles o repeticiones
Retomando la situacioacuten problemaacutetica del bloque anterior sobre la condicioacuten fiacutesica de una
persona a partir del peso y la estatura y despueacutes de elaborar el algoritmo diagrama de flujo
y programa en lenguaje C contesta lo siguiente
1 Para obtener el IMC y la interpretacioacuten de los 5 integrantes de tu familia iquestqueacute hiciste
iquestcoacutemo 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 interpretacioacuten de ahora 40 alumnos del grupo iquestqueacute
hariacuteas con el programa
3 iquestQueacute se tendriacutea que hacer si ahora queremos aplicar el programa a una cantidad
desconocida de personas
_____________________________________________________________________
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
22
Lo anterior nos lleva a la necesidad de repetir varias veces la aplicacioacuten de un algoritmo o
programa Este tipo de necesidades donde se necesita repetir muchas veces una accioacuten
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 condicioacuten o
situacioacuten la finalizacioacuten
Se puede hacer repetitiva la ejecucioacuten de todo el programa o solo una parte dependiendo de
la necesidad
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 1
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 2
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 3
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 4
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Familiar 5
ENTRADA
Peso y
Estatura
SALIDA
IMC
ldquoInterpretacioacute
nrdquo
Proceso
Repetir
muchas
veces
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
23
Modificando el algoritmo para responder a esta necesidad quedariacutea asiacute
1 Inicio
2 Iniciar ciclo PARA veces=1 HASTA 5 (Si veces es menor o igual a 5 continuacutea sino saltar al paso 12)
3 Dar el peso en kilogramos (peso)
4 Dar la estatura en metros (estatura)
5 Realizar la siguiente operacioacuten IMC = peso(estaturaestatura)
6 Mostrar el resultado ldquoTu Iacutendice de Masa Corporal es ldquo IMC
7 Si IMClt185 entonces
71 Indicar ldquoLa persona estaacute baja de pesordquo
8 Si IMCgt=185 y IMClt25 entonces
81 Indicar ldquoFelicidades la persona estaacute en su peso idealrdquo
9 Si IMCgt=25 y IMClt30 entonces
91 Indicar ldquoLa persona tiene sobrepesordquo
10 Si IMCgt=30 entonces
101 Indicar ldquoLa persona tiene problemas de obesidadrdquo
11 Fin de ciclo Fin PARA (se incrementa veces en 1 y se regresa al paso 2)
12 Fin
Observa que se repiten los pasos 3 al 10 para calcular el IMC de 5 personas antes de
finalizar
Al conjunto de acciones o instrucciones que se repiten en un algoritmo o programa se
les conoce como ciclo Un ciclo debe terminarse despueacutes de ejecutarse un nuacutemero finito de
veces mientras se cumpla o hasta que se cumpla cierta condicioacuten
CICLOS O REPETICIONES EN LENGUAJE C
Existen 3 tipos
1 Ciclo PARA (for)
En el algoritmo En lenguaje C
PARA veces=1 HASTA n for (veces=1veceslt=nveces++) (inicio=1limite=nincremento=1)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin PARA
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es conocida (generalmente va de 1 a n)
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
24
2 Ciclo HACER-MIENTRAS (do - while)
En el algoritmo En lenguaje C
HACER do
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphellip helliphelliphelliphelliphellip
MIENTRAS (condicioacuten=V) while (condicioacuten=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 ejecutaraacute tantas veces mientras la condicioacuten planteada se esteacute cumpliendo
y la condicioacuten de finalizacioacuten va al final de la seccioacuten del programa a repetir
3 Ciclo MIENTRAS (while)
En el algoritmo En lenguaje C
MIENTRAS (condicioacuten=V) while (condicioacuten=V)
Acciones Instrucciones
helliphelliphelliphelliphellip helliphelliphelliphellip
helliphelliphelliphelliphelliphellip helliphelliphelliphelliphellip
Fin MIENTRAS
Este tipo de ciclo se utiliza cuando la cantidad de veces a repetir es desconocida y se necesita que la condicioacuten
planteada se cumpla desde la primera vez se ejecutaraacute tantas veces mientras la condicioacuten se esteacute cumpliendo
aquiacute la condicioacuten de finalizacioacuten va al principio de la seccioacuten del programa a repetir
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
25
Y el programa en lenguaje C queda de esta manera
include stdioh
include conioh
void main()
float Estatura Peso IMC
int veces
for (veces=1veceslt=5veces++) Se inicia el ciclo se repetiraacute 5 veces se inicia en 1 con incrementos de 1
clrscr()
printf(nEscribe tu PESO en Kg por favor )
scanf(fampPeso)
printf(nEscribe tu ESTATURA en m por favor )
scanf(fampEstatura)
IMC=Peso(EstaturaEstatura)
printf(nTu Indice de Masa Corporal es 02fIMC)
if (IMClt185)
printf(nLa persona estaacute baja de peso )
if (IMCgt=185 ampamp IMClt250)
printf(nFelicidades la persona estaacute en su peso ideal )
if (IMCgt=250 ampamp IMClt300)
printf(nLa persona tiene sobrepeso )
if (IMCgt=300)
printf(nLa persona tiene problemas de obesidad )
getch()
4 iquestQueacute cambiariacuteas en el coacutedigo para obtener el IMC ahora de los 40 alumnos ___________________________________________________________________
(Incorporar los ejercicios correspondientes a las evidencias descripcioacuten de la actividad
desarrollo evaluacioacuten)
Proyecto final
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
26
BLOQUE DE APRENDIZAJE III EXPRESIOacuteN GRAacuteFICA
MAPA CONCEPTUAL DEL BLOQUE III
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
BLOQUE III EXPRESIOacuteN GRAacuteFICA TIEMPO 700 minutos (14 Hrs)
UNIDAD DE COMPETENCIA Difundir informacioacuten de intereacutes general o particular para comunicarse ldquoglobalmenterdquo de forma creativa eacutetica y responsable a traveacutes del disentildeo y publicacioacuten de una paacutegina web
PROBLEMAS A RESOLVER
Comunicar y expresar ideas utilizando diversos medios graacuteficos (por medio de logotipos y carteles con contenido de intereacutes acadeacutemico y general)
Aplica conceptos baacutesicos sobre el manejo de herramientas del disentildeo graacutefico utilizando un software especializado (Inkscape)
Identificar sitios web confiables y seguros con contenidos diversos y dinaacutemicos
Seleccionar discriminar y valorar la informacioacuten que pueda ser publicada con eacutetica y responsabilidad
Publicar temas de intereacutes general a traveacutes de una paacutegina web creativa y eficaz con contenido dinaacutemico
SABERES
Declarativos
Expresioacuten graacutefica
El concepto de logotipo
Disentildeo vectorial
Tipografiacutea y operaciones primitivas de disentildeo nodos objetos y color
El concepto de cartel
Informacioacuten en la Web
Objetos para publicar listas tablas hiperviacutenculos imaacutegenes elementos multimedia
Paacutegina web
Procedimentales
Elabora un esbozo de una idea de forma impresa
Elabora disentildeos graacuteficos baacutesicos utilizando un software especializado
Crea logotipos
Expresa y comunica ideas mediante un cartel
Discrimina informacioacuten para ser publicada
Disentildea y elabora paacuteginas web
ActitudinalValorales
Eacutetica en el uso de la tecnologiacutea informaacutetica y de la informacioacuten
Disciplina
Responsabilidad
Tolerancia ante la diversidad de opiniones
Respeto a los compantildeeros
Participacioacuten en equipo
CRITERIOS DE DESEMPENtildeO
El desempentildeo del estudiante se evaluacutea a traveacutes del desarrollo de los saberes que lo conducen a comunicarse utilizando diferentes medios de expresioacuten graacutefica
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
28
Conocimientos - Conceptos baacutesicos de disentildeo graacutefico (logotipo y cartel) - Conceptos de disentildeo y estructura de una paacutegina web - Palabras reservadas del coacutedigo HTML Habilidades -Comunicar y expresar ideas utilizando la creatividad en el disentildeo y elaboracioacuten de logotipos carteles y paacuteginas Web - Actitudes y valores -Tolerancia ante la diversidad de opiniones respeto y compromiso en el trabajo colaborativo
COMPETENCIAS
GeneacutericasAtributos
4 Escucha interpreta y emite mensajes pertinentes en distintos contextos mediante la utilizacioacuten de medios coacutedigos y herramientas apropiados
Atributos 1 Expresa ideas y conceptos mediante representaciones linguumliacutesticas matemaacuteticas o
graacuteficas 2 Aplica distintas estrategias comunicativas seguacuten quienes sean sus interlocutores el
contexto en el que se encuentra y los objetivos que persigue 5 Maneja las tecnologiacuteas de la informacioacuten y la comunicacioacuten para obtener informacioacuten y
expresar ideas 7 Aprende por iniciativa e intereacutes propio a lo largo de la vida
Atributos
1 Define metas y da seguimiento a sus procesos de construccioacuten de conocimiento 2 Identifica las actividades que le resultan de menor y mayor intereacutes y dificultad
reconociendo y controlando sus reacciones frente a retos y obstaacuteculos 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 accioacuten con pasos especiacuteficos
2 Aporta puntos de vista con apertura y considera los de otras 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
Disciplinares Baacutesicas
12 Utiliza las tecnologiacuteas de la informacioacuten y comunicacioacuten para producir diversos materiales de estudio e incrementar sus posibilidades de formacioacuten
Disciplinares Extendidas
5 Aplica los principios eacuteticos en la generacioacuten y
tratamiento de la informacioacuten
10 Analiza los beneficios e inconvenientes del uso
de las tecnologiacuteas de informacioacuten y comunicacioacuten
para la optimizacioacuten de las actividades cotidianas
11 Aplica las tecnologiacuteas de informacioacuten y
comunicacioacuten en el disentildeo de estrategias para la
difusioacuten de productos y servicios
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
29
ESTRATEGIAS DE ENSENtildeANZA ESTRATEGIAS DE APRENDIZAJE
RECURSOS DIDAacuteCTICOS
EVIDENCIAS YO PRODUCTOS
Disentildeo graacutefico
Expone la necesidad que el ser humano tiene
de comunicarse y expresar ideas
Expone los medios computacionales que se
tienen para comunicarse graacuteficamente
Explica conceptos baacutesicos de disentildeo graacutefico
Expone la importancia del cartel como medio
de expresioacuten graacutefica mostrando ejemplos
Paacuteginas web
Solicita al grupo nombres de sitios web
conocidos
Se discute la pertinencia confiabilidad y
seguridad de sitios web en su formacioacuten
acadeacutemica
Se explican los conceptos baacutesicos del disentildeo
de una paacutegina web usando coacutedigo HTML
Se discuten los posibles contenidos a
publicar
En general
Hacer pausas para reflexionar y tomar apuntes
Formular preguntas o comentarios
Responder a preguntas
Muestra y explica ejemplos al grupo
Usa disentildeos y diapositivas
Trabajo y discusioacuten en parejas
Buacutesqueda de informacioacuten y
colaboracioacuten espontaacutenea
Intercambiar ideas con
compantildeeros que entiendan
mejor el tema
Asesoriacutea del profesor
Elabora un esquema general de una idea
Construir un logotipo digital
Aprende el manejo de software especializado para el trazo vectorial
Expresa y comunica de forma
graacutefica un concepto mismo
que se justifica textualmente
Practica mediante la
elaboracioacuten de disentildeos graacuteficos
utilizando un software
(logotipos y carteles)
Analiza y discrimina la informacioacuten a ser publicada
Elabora una paacutegina web de ejemplo usando coacutedigo HTML
Disentildea y elabora paacuteginas web eficientes y dinaacutemicas
Libreta
Manual de praacutecticas y
antologiacutea
Resumen del programa
Pintarroacuten
Laboratorio de coacutemputo
con equipos y mobiliario
suficientes (maacutex 2
alumnos por
computadora)
Mesas y sillas que les
permita trabajar
coacutemodamente
Ventilacioacuten e iluminacioacuten
adecuadas
Cantildeoacuten
Sentildealador laacuteser
Memorias USB
Equipo de audio y
microacutefono
Internet y software para
disentildeo graacutefico
Presentaciones digitales
Taller 1 1 Logotipo de ecologiacutea
(15) 2 Logotipo del proyecto
con los siguientes productos Boceto documento con la justificacioacuten textual del contenido y logotipo digital (25)
Taller 2
3 Cartel con temaacutetica cultural cientiacutefica o educativa presentado con los siguientes productos Boceto justificacioacuten y cartel digital (25)
Taller 3 4 Proyecto de sistema
de paacuteginas web (35)
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
30
ACTIVIDADES E INSTRUMENTOS DE EVALUACIOacuteN
En el bloque III los estudiantes expresaraacuten sus ideas y podraacuten desarrollar sus habilidades creativas e innovadoras a traveacutes
de distintos proyectos graacuteficos iniciando con bocetos creando logotipos y carteles en los cuales se evaluacutea el desarrollo de
una idea o concepto y el dominio de la herramienta de software Al finalizar desarrollaraacuten un proyecto que publicaraacuten
utilizando una paacutegina web en este caso se evaluacutea nuevamente el proceso para recopilar la informacioacuten que seraacute publicada
asiacute como los disentildeos propios incluidos y la calidad de la paacutegina web que incluyen la creatividad y dinamismo empleados
La matriz de evaluacioacuten siguiente nos permite medir el nivel de desarrollo de las competencias del bloque
MATRIZ DE EVALUACIOacuteN FORMATIVA (NIVEL DE DESARROLLO DE LAS COMPETENCIAS)
Criterios Pre-formal Receptivo Resolutivo Autoacutenomo Estrateacutegico
1 Elabora un esquema general que
expresa una idea
2 Crea disentildeos graacuteficos (Logotipo y
cartel) de un tema de su intereacutes
seleccionado con eacutetica y responsabilidad
3 Identifica y expone la informacioacuten
que seraacute publicada al grupo
argumentando la importancia y
pertinencia de la misma
4 Crea una paacutegina web con
elementos baacutesicos incluyendo la
informacioacuten seleccionada
5 Elabora una paacutegina web eficaz
con contenido dinaacutemico creativo con
informacioacuten pertinente de intereacutes general
o particular
Presenta una idea muy general de los disentildeos graacuteficos Muestra de manera general la temaacutetica de la informacioacuten que seraacute publicada
Justifica de manera parcial el tema de sus disentildeos Comprende de manera general las herramientas entornos y elementos para elaborar disentildeos graacuteficos Comprende de manera general las herramientas para disentildear paacuteginas web Coincide con que determinada informacioacuten es segura y pertinente pero no argumenta
Desarrolla el disentildeo de un logotipo y cartel poco representativos del tema y sin detallar Elabora un disentildeo baacutesico de una paacutegina web con contenido muy estaacutetico Sin haber trabajado con la informacioacuten del contenido
Elabora de forma oacuteptima un disentildeo de logotipo y cartel representativos al tema Discrimina y selecciona adecuadamente la informacioacuten que seraacute publicada en la paacutegina web Disentildea la paacutegina con contenido dinaacutemico pero sin articulacioacuten entre los elementos de la paacutegina
Elabora y argumenta de forma eficiente el disentildeo de un logotipo y cartel creativo y esteacutetico de forma eacutetica y responsable Disentildea y elabora una paacutegina web creativa con informacioacuten previamente seleccionada con eacutetica y responsabilidad que seraacute publicada en internet
Ponderacioacuten Puntos5 Puntos6 o 7 Puntos8 Puntos 9 Puntos10
Logros
Aspectos a mejorar
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
31
TIPOS DE EVALUACIOacuteN
FORMATIVA Es aquella en la que tomando como instrumentos la observacioacuten directa y actividades praacutecticas se valoraraacute coacutemo el alumno avanza
desde sus conocimientos iniciales hasta desarrollar las competencias necesarias utilizando para ello los instrumentos de
evaluacioacuten que se encuentran en el cuadernillo Tomando como puntos importantes la participacioacuten el esfuerzo la eficacia en los
procesos y la calidad de las evidencias o productos
SUMATIVA La evaluacioacuten frecuente se da con el registro del cumplimiento de las actividades y la calificacioacuten de eacutestas y con el registro de la participacioacuten en cada clase
o Los justificantes soacutelo seraacuten vaacutelidos hasta la siguiente clase despueacutes de su incorporacioacuten o Uacutenicamente seraacuten vaacutelidos los justificantes emitidos por la direccioacuten
Las faltas no eximen de la entrega de tareas a tiempo
Una evaluacioacuten parcial para el presente bloque como se especifica en el apartado de evidencias yo productos
Aplicamos los siguientes criterios de evaluacioacuten o Continua Evaluacioacuten de los procesos en cada momento de la actividad taller y bloque o Sisteacutemica Que sea congruente con el contenido y los meacutetodos en relacioacuten al desarrollo de competencias
Flexible Que tenga en cuenta los ritmos de desarrollo del alumno
REQUISITOS DE ACREDITACIOacuteN
Estar inscrito oficialmente como alumno del PE en la BUAP
Haber aprobado las asignaturas que son pre-requisitos de eacutesta
Aparecer en el acta
El promedio de las calificaciones de los exaacutemenes aplicados deberaacute ser igual o mayor que 6
Cumplir con las actividades propuestas por el profesor
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
BLOQUE III EXPRESIOacuteN GRAacuteFICA
Taller 1 Disentildeo de un Logotipo
Actividad 1 Bosquejo de una idea
Bosquejo de una idea
A lo largo de la evolucioacuten humana se ha tenido que desarrollar la necesidad de comunicacioacuten entre los individuos de un mismo grupo esta comunicacioacuten ha sido representada y establecida a traveacutes de siacutembolos 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 expresioacuten de los individuos se dio a traveacutes de la representacioacuten pictograacutefica donde muchos de estos ldquomuralesrdquo 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 liacutenea del tiempo que se describiacutea anteriormente se tienen diferentes medios y formas que permiten expresar ideas sentimientos estilos y cultura
La expresioacuten como partiacutecula viva de la comunicacioacuten ha tomado diferentes sentidos conforme a los diversos rubros ofrecidos en el medio cultural se utiliza la expresioacuten para protestas para defensas para produccioacuten y para venta entre muchos otros
En nuestro caso se partiraacute de una necesidad tanto acadeacutemica como general donde plasmaremos a la expresioacuten en una forma graacutefica En especiacutefico se realiza un logotipo que parte de la necesidad publicitaria en materia de ecologiacutea el medio ambiente y la interrelacioacuten con el hombre
Cuestionario
iquestQueacute medios o formas de expresioacuten visual utilizas para comunicarte
iquestEn queacute espacios u objetos encuentras la expresioacuten visual
iquestQueacute dificultad encontraste al crear tu esbozo o disentildeo con hoja y papel
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
33
7 iquestQueacute alcances y limitaciones tiene la herramienta que utilizaste (laacutepiz colores) y su
comparativa con el medio electroacutenico
Situacioacuten problemaacutetica
Temaacutetica ecoloacutegica Cuidado del medio ambiente
Se desea establecer un logotipo en materia de ecologiacutea especiacuteficamente en el sentido
del cuidado del sector forestal este debe considerar la relacioacuten hombre-entorno y la
palabra ecologiacutea todo inmerso en un formato circular
Objetivos del logotipo a disentildear
Misioacuten y visioacuten del concepto hacia quien va dirigido el desarrollo ofrecido queacute tipo de
seriedad confianza y conciencia se ofrece a quien lo porta y quien lo ve Una vez
definido lo anterior de este proceso debemos ubicarnos en el tiempo que se vive la
disposicioacuten geograacutefica los medios que visualizaraacuten este logo no solo limitarnos a
mamparas o espectaculares sino a todo medio visual y electroacutenico que promoveraacute a
traveacutes del logotipo todo un concepto ya sea comercial emocional o cultural
Con lo anterior el logotipo necesita presentar un formato simple esteacutetico legible
nacional o universal y amigable
Las posibles siguientes alternativas a una expresioacuten graacutefica
Logotipo Un logotipo posee caracteriacutesticas que dan identidad y presencia a una
empresa por muy pequentildea o mediana que esta sea
Emblema Es una composicioacuten artiacutestica que transmite un pensamiento una
ensentildeanza mediante una combinacioacuten de imagen y texto que se enriquecen
mutuamente Compuesto por una frase (lema) un poema (epigrama) y una
imagen (pintura)
Cartel Publicitario El cartel permite ser un elemento de mayor espaciamiento
en el tratado de sus imaacutegenes ya sean simples complejas o abstractas El cartel
histoacutericamente tiene un objetivo informativo En el se cuidan las imaacutegenes y su
impacto ya que este debe ser persuasivo a un hecho En 1891 el primer cartel
de Toulouse-Lautrecs Moulin Rouge elevoacute el estado del cartel a la categoriacutea
de arte
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
34
Proyecto
Realizar el siguiente logotipo en materia
de ecologiacutea utilizando el programa de
disentildeo graacutefico Inkscape El propoacutesito de
este disentildeo es promover una imagen
general de la interrelacioacuten entre el sector
forestal la ecologiacutea y el hombre A
continuacioacuten la siguiente figura muestra un
disentildeo propuesto como parte de la
actividad de estudio la creatividad
siempre estaraacute abierta a la generacioacuten de
nuevas propuestas que superen a lo
presente
Inkscape1 es un software libre basado en el formato SVG (Scalable Vector
Graphics ) el cual es una especificacioacuten para describir graacuteficos vectoriales
bidimensionales tanto estaacuteticos como animados en formato XML
Actividad 2 Entorno de disentildeo
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 aacuterea de disentildeo
Para realizar el disentildeo se determina el
tamantildeo de la paacutegina el cual puede ser
tamantildeo carta (US Letter) oficio (US Legal)
A4 o personalizado seguido de ello la
orientacioacuten del papel (vertical u horizontal)
determinar esta orientacioacuten permite tener un
1 httpwwwinkscapeorgdownloadlang=es
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
35
panorama visual del disentildeo y sus limitaciones espaciales A continuacioacuten las unidades
de medidas determinan la forma de trabajo para rejilla (cuadricula) y guiacuteas
distinguiendo principalmente a los tipos pixel (px) pulgada (in) centiacutemetro (cm)
miliacutemetros (mm) Todo esto se encuentra en Propiedades del documento (Archivo
Propiedades del documento o Shift+Ctrl+D)
Para asegurar que el disentildeo tenga la suficiente
exactitud de trazo se activa la cuadricula y su ajuste
ademaacutes se puede utilizar las liacuteneas guiacuteas como apoyo
en el espaciado utilizar propiedades del documento
(shift+Ctrl+D) en las pestantildeas rejillas guiacuteas y ajustar
El aacuterea de trabajo tendraacute vista semejante forma en la
figura se muestran las guiacuteas y cuadriculas
consideradas para el logotipo Cada disentildeador puede
ajustar las herramientas seguacuten sus necesidades
Actividad 3 Elaboracioacuten 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 disentildeo graacutefico (Inkscape)
Para construir el trazo de la forma y las figuras circulares seraacute necesario
realizar operaciones sobre objetos dentro de las cuales existe la unioacuten diferencia e
interseccioacuten como principales
iquestQueacute elementos geomeacutetricos necesitas para construir alguna forma
iquestQueacute formas baacutesicas de disentildeo se utilizariacutean para construir la forma
Realiza el trazo en papel de las formas baacutesicas anteriores para elaborar la forma
descrita
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
36
Operaciones sobre formas
Eacutestas son las operaciones disponibles en breves ejemplos notar la importancia en el
orden de los objetos
Operacioacuten Objetos Resultado
Unioacuten (soldar)
TrayectoUnioacuten (ctrl++)
Diferencias
TrayectoDiferencia
(ctrl+-)
Interseccioacuten
TrayectoInterseccioacuten
(ctrl+)
Las operaciones para realizar la forma de disentildeo se describen a continuacioacuten
Procedimiento
Trazar un ciacuterculos utilizando la herramienta Crear ciacuterculos elipses y arcos de la
barra de dibujo para colorearlo debe seleccionar el objeto y hacer clic en alguacuten cuadro
de la paleta de colores si necesita cambiar el contorno mantenga presionada la tecla
Shift+ Clic en alguacuten cuadro de la misma paleta
Para manejar los niveles de ordenacioacuten (inferior-superior) utilizar
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
37
Manipulacioacuten de los objetos para construir el trazo e
a Trazar los objetos circulares y rectangulares use la herramienta crear
rectaacutengulos y cuadrados
b Realizar la diferencia seleccionando las formas circulares para seleccionar
muacuteltiples 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 rectaacutengulo
d Ejecutar la unioacuten entre la forma rectangular pequentildea y la media dona generada
Actividad 3A
Realizar los trazos circulares que pertenecen al logotipo utilizando la operacioacuten de
diferencia y ordenamiento de objetos
Actividad 3B
En liacutenea realizar los trazos para construir la forma
circular utilizando las operaciones necesarias como
adicioacuten y sustraccioacuten Finalmente agrupelos
a b c d
Forma Final
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
38
Actividad 4 Tipografiacutea Baacutesica
iquestQueacute es la tipografiacutea
iquestCoacutemo impacta la tipografiacutea en un logotipo
Establece una alternativa de tipografiacutea al logotipo propuesto
Ruacutebrica de la actividad 3A y 3B (5 puntos)
Indicadores
Aspectos a evaluar No
satisfacto
rio
Regular Satisfactorio Excelente
Aplicacioacuten correcta
de las operaciones
sobre formas
baacutesicas para
obtener la Forma
Final
No
correspond
en trazos
Faltan
operacione
s en las
formas
baacutesicas
Presenta el
trazo
solicitado en
la forma final
El trazo contiene la
forma final
siguiendo
cuadricula y guiacuteas
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen
o no
correspond
en
Faltan
algunas
herramient
as de trazo
Presenta el
uso de las
herramientas
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
escueta
Propuesta
armoacutenica al
tema
Propuesta ad hoc al
tema presentada
con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
39
Tipografiacutea Baacutesica
El logotipo necesita de un nombre o
acroacutenimos para presentar a la
empresa el caso que se estaacute tratando
necesita de texto y a su vez una
modificacioacuten en un caraacutecter
Para definir una tipografiacutea se debe
considerar la formalidad o informalidad
del disentildeo y hacia quien va dirigido
Para ecologiacutea se utiliza la fuente
Sans en un tamantildeo de 40 unidades
con un estilo negrita esta herramienta
se encuentra en el menuacute TextoTexto
y tipografiacutea (Shift+Ctrl+T)
Actividad 4A
Una vez escrito el texto se procede con la
ubicacioacuten de los elementos ya construidos para
visualizar el avance del logotipo
Nota Para separar objetos resultantes de una
unioacuten diferencia u otra operacioacuten utilice
Shift+Ctrl+K
Forma Final
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
40
Ruacutebrica de la actividad 4A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten de
las formas
anteriores para
obtener la
Forma Final
No
corresponden
trazos
Falta orden y
adecuacioacuten de
tipografiacutea y
trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene
tipografiacutea y
trazos conforme
a la forma final
siguiendo
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de
trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan algunas
herramientas
auxiliares de
trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad hoc
al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
41
Actividad 5 Operaciones con nodos
iquestCrees que las formas baacutesicas de disentildeo son suficientes para trazos complejos como la
forma de la hoja de maple del disentildeo
iquestCoacutemo trazariacuteas la siguiente forma que es parte del logotipo
iquestCuaacuteles consideras que son los elementos miacutenimos para realizar un trazo
Trazar en papel la forma de una hoja simple a traveacutes de puntos y liacuteneas
iquestQueacute es un nodo
El trazo anterior no puede ser elaborado con formas baacutesicas (rectaacutengulos elipses
liacuteneas) es necesario agregar el uso de una nueva herramienta llamada Beacutezier la cual
estaacute basada en el concepto de nodos los nodos son puntos de referencia para los
trazos curvos de hecho Beacutezier estaacute basada en la teoriacutea de curvas polinoacutemicas y se le
debe al ingeniero franceacutes Beacutezier2 quien elaboroacute esta forma de trazar curvas
Los nodos tienen diferentes comportamientos (simeacutetricos asimeacutetricos) para manipular o
disentildear una forma que puede ser a traveacutes del manejo de los vectores de control
2 Referencia
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
42
Ejemplo Realizar el siguiente trazo tomando en cuenta la secuencia sugerida
1 Crear un nuevo documento habilitando rejilla guiacuteas y ajuste
Ejemplo
Paso a paso
Beacutezier Nodos de
Trayecto Operacioacuten con
nodos
Resultado
Nodos
Beacutezier
1
2
3
3
Nodos
Vectores de
control
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
43
Problema
Una vez trazada una hoja surge la necesidad de ubicarla y repetirla en el caso de la
rotacioacuten de los objetos se hacen dos simples clic el primero selecciona y permite
activar el control de tamantildeo un clic maacutes activa el control de rotacioacuten y la disposicioacuten de
desplazar el punto de referencia ( + ) Para duplicar un objeto presione Ctrl+D
+
Manipulacioacuten de nodos y capas
Problema
iquestQueacute podriacuteas hacer si necesitas realizar un trazo maacutes complejo
para el logotipo quizaacute el paiacutes de origen no es Puerto Rico sino
Canadaacute y para ello la empresa enviacutea una imagen fotograacutefica de
la hoja a disentildear Para dar solucioacuten a esta situacioacuten se
aprenderaacuten los conceptos de manipulacioacuten de nodos para dar
formas y el manejo de capas un concepto muy estaacutendar que
serviraacute para sobreponer objetos
Primero se crean las capas usando el menuacute Capa antildeadir capahellip (Shift+Ctrl+N)
donde se determina el nombre tambieacuten puede renombrar usando CapaRenombrar
capahellip En este ejemplo donde se trazaraacute una hoja se tienen dos capas donde la
capa inferior contendraacute una imagen la cual se importa usando el menuacute
ArchivoImportarhellip ( Ctrl+I) En la capa superior utilizaremos la herramienta
Bezier y la manipulacioacuten de nodos vea las figuras
Un Simple Clic Dos Simples
Clic
Punto de
referencia
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
44
Actividad 5
Realizar el trazo de la hoja de maple utilizando capas para su
disentildeo definir el propoacutesito de cada capa con un nombre que permita
identificar su finalizad Utilizar las herramientas de nodos para su
construccioacuten adecuada
Suprimir
Nodos
Editar
Nodos
Agregar
Nodos
Convertir
Nodos
Utilice Acercar o
alejar
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
45
Ruacutebrica de la actividad (5 puntos)
Indicadores
Aspectos a evaluar No satisfactorio Regular Satisfactorio Excelente
Uso de trazos
basados en nodos
para desarrollar la
Forma Final
No corresponden
trazos
Falta
adecuacioacuten
de trazos y
nodos
Presenta
trazos
semejantes a
la forma final
manipula
nodos
Contiene trazos
basados en
nodos conforme
a la forma final
utilizando
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Entorno de trabajo
(Cuadricula-ajuste-
Guiacuteas)
No existen o no
corresponden
Faltan
algunas
herramienta
s auxiliares
de trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron
todas las
herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay propuesta Propuesta
insuficiente
Propuesta
armoacutenica al
tema
Propuesta ad
hoc al tema
presentada con
entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
46
Actividad Logotipo terminado en trazo
Una vez cubierto todos los trazos se dispone a
realizar la ubicacioacuten y ajuste del logotipo
desarrollado y finalmente debe corresponder a la
siguiente vista
Tratamiento de nodos sobre caracteres
iquestCoacutemo influye la tipografiacutea en un disentildeo
Existen diversos tipos de fuentes pero iquestHay alguacuten tipo disponible para su
personalizacioacuten
Problema
Al realizar un logotipo quizaacute sea
necesario modificar la tipografiacutea 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)
Despueacutes seleccione el objeto y presione
Shift+Ctrl+C Su caraacutecter se ha
convertido en ldquocurvasrdquo utilice la
herramienta ldquoeditor de nodosrdquo para realizar las modificaciones pertinentes Shift+Ctrl+T Shift+Ctrl+C
Editar
nodos
Poliacutegonos
Forma Final
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
47
Propuesta en la tipografiacutea al logo
En nuestro disentildeo se puede proponer un cambio a la
tipografiacutea desde una forma baacutesica hasta compleja tanto
como se quiera ya que al convertir un objeto a trazo este
permite utilizar la herramienta de nodos y beacutezier para la
manipulacioacuten de vectores y tipos de nodos
En la imagen mostrada se hace una modificacioacuten de la
palabra ecologiacutea a traveacutes de la combinacioacuten de formas y
ajuste en los vectores de seguimiento curviliacuteneo
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
48
Ruacutebrica de la actividad Logotipo terminado en trazo (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Desarrollo
terminado del
trazo del
logotipo
conforme a la
Forma Final
No
corresponden
trazos no esta
terminado el
logotipo
Falta orden y
adecuacioacuten
de tipografiacutea y
trazos del
logotipo
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
del logotipo
Contiene
tipografiacutea y
trazos conforme
a la forma final
presentando el
uso de
herramientas
(guiacuteas ajustehellip)
que valoran
exactitud
Uso de
herramientas
para el trazado
1 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas
y el trazo es
semejante a
la forma
4 Trabaja con objetos
5 Aplica Colores
6 Dibuja libremente a mano alzada
7 Dibuja a partir de nodos
8 Trabaja con texto
Utiliza las
siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores
3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con
texto
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
49
Actividad 6 Colores sobre el logotipo
Coloracioacuten de Objetos (Rellenos soacutelidos radiales lineales)
Problema
Despueacutes de construir el logotipo
continuamos con el siguiente problema
iquestqueacute 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 combinacioacuten sentaraacute la presencia
final del producto
Primero analicemos de una manera raacutepida 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 promocioacuten de
productos de alta tecnologiacutea el blanco puede utilizarse para comunicar simplicidad
Amarillo Cuando se situacutean varios colores en contraposicioacuten al negro el amarillo es en
el que primero se fija la atencioacuten Por eso la combinacioacuten amarillo y negro es usada
para resaltar avisos o reclamos de atencioacuten
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 eroacuteticos Siacutembolos
como labios o untildeas rojos zapatos vestidos etc son arquetipos en la comunicacioacuten
visual sugerente
Azul Es adecuado para promocionar productos de alta tecnologiacutea o de alta precisioacuten
Verde Por su asociacioacuten a la naturaleza es ideal para promocionar productos de
jardineriacutea turismo rural actividades al aire libre o productos ecoloacutegicos
Negro El negro representa el poder la elegancia la formalidad la muerte y el misterio
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
50
Para aplicar la coloracioacuten utilice las herramientas que proporciona la barra de colores
para pintar el objeto primero seleccione
haga clic en alguacuten color
utilice Shift+Clic para pintar el trazo
El siguiente disentildeo se trata de un ejemplo
para realizar el relleno de objetos este
relleno puede ser soacutelido lineal o radial
Inkscape posee las paletas necesarias y
los modelos de color Los modelos de color son RGB HSL CMYK CMS
RGB La acroacutenimo del ingleacutes Red Green Blue rojo verde azul de un color hace
referencia a la composicioacuten del color en teacuterminos 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 siacutentesis aditiva con el que es posible representar un color mediante la mezcla por
adicioacuten de los tres colores luz primarios
El modelo HSL (del ingleacutes Hue Saturation Lightness ndash Tonalidad Saturacioacuten
Luminancia) tambieacuten llamado HSI (del ingleacutes Hue Saturation Intensity ndash Tonalidad
Saturacioacuten Intensidad) define un modelo de color en teacuterminos de sus componentes
constituyentes El modelo HSL se representa graacuteficamente como un cono doble o un
doble hexaacutegono
El modelo CMYK (acroacutenimo de Cyan Magenta Yellow y blacK) es un modelo de colores sustractivo que se utiliza en la impresioacuten en colores Este modelo de 32 bits se basa en la mezcla de pigmentos de los siguientes colores para crear otros maacutes
El degradado estaacute
basado en dos
formatos lineal y
radial En ambos se
utilizan vectores de
pintado que
permiten realizar la
modificacioacuten
correspondiente a
la intensidad de
cada color En el
caso de Inkscape
no soacutelo se realiza el
proceso de degradado de los colores sino tambieacuten la capacidad de opacidad asiacute
entonces genera un coacutedigo de color no RGB sino RGBA donde A significa opacidad
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
51
Actividad 6A
Proporcione colores al logotipo
disentildeado utilizando el modelo
adecuado y efectos de relleno lo que
daraacute un matiz propio La figura que se
muestra utiliza los elementos de color
soacutelido y de degradado para ello
utilizar el meacutetodo abreviado Ctrl+F1 y
seleccionar lineal o radial para el caso
de degradados
Disentildeo Final
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
52
Ruacutebrica de la actividad 6A (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Coloracioacuten del
logotipo
conforme a la
Forma Final o
nueva
propuesta de
coloracioacuten
No otorga
colores al
logotipo
Falta
adecuacioacuten de
coloracioacuten
Presenta
coloracioacuten
semejante a
la forma final
Presenta
coloracioacuten
conforme a la
forma final
utilizando
colores
soacutelidos
degradados o
mezclas de
ambos
utilizando
herramientas
auxiliares de
trazo
Propuesta de
nuevas formas
(Alternativas al
disentildeo)
No hay
propuesta
Propuesta
insuficiente
Propuesta
con colores
soacutelidos y
armoacutenica
Propuesta de
coloracioacuten
innovadora
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
53
Taller 2 Cartel
Actividad 7 Disentildeo de un cartel
Situacioacuten didaacutectica
Se desea realizar un cartel en el que se invite a puacuteblico en general a un evento
regional donde se exponen las tradiciones y la actividad principal de la poblacioacuten
iquestQueacute es un cartel
Un cartel afiche o poacutester es una laacutemina de papel
cartoacuten u otro material que sirve para anunciar o
dar informacioacuten sobre algo eventos culturales
deportivos administrativos etc
Identificar los elementos que se deben exponer
en un cartel
Evento Feria Regional
A quien va dirigido Puacuteblico en General
Actividad Floricultura
Lugar El Pilar Tlatlauquitepec Puebla
Antildeo 2012
Fecha del 15 al 20 de abril de 2013
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 Tuacute le daraacutes los colores o incluso diferentes matices al disentildeo
A continuacioacuten se determina el nuacutemero de capas cada capa contiene alguacuten elemento
graacutefico por lo que se aconseja utilizar un nombre descriptivo en el disentildeo para insertar
una nueva capa presione Ctrl+Shift+L
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
54
Para trazar la flor puede utilizar la herramienta de ciacuterculo a continuacioacuten
seleccionado el objeto ejecute TrayectoObjeto a trayecto (Shift+Ctrl+C) esto permite
modificar al ciacuterculo a traveacutes de nodos
Ahora se desea ldquocopiarrdquo el trazo anterior puede copiar o duplicar el trazo pero tambieacuten
puede clonar el objeto usando el menuacute EdicioacutenClonar (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
ldquoclonacioacutenrdquo el objeto fuente al ser alterado permite heredar esos cambios inmediatos a
sus hijos
En el caso del texto sobre un trayecto primero se realiza la forma a seguir utilizando
alguacuten trazo de bezier A continuacioacuten se inserta un texto Texto texto y tipografiacutea
(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 menuacute TextoPoner en trayecto tu
resultado es
Objeto a
trayecto
Copiar o
duplicar Modificacioacuten
independiente de
un objeto copiado Modificacioacuten
dependiente de
un objeto clonado
Beacutezier
Texto
Seleccionar objeto de texto y trazo
Beacutezier
Ejecutar Texto Poner en trayecto
Para Quitar Texto Retirar de trayecto
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
55
Para exportar el trabajo realizado para su impresioacuten se debe ser consciente de
seleccionar el formato apropiado en caso de imprimir en una lona lo recomendable es
guardar en un formato vectorial estaacutendar aunque en el mundo de la publicidad los
formatos maacutes solicitados son CDR (Corel Draw) AI (Adobe Illustratror) pero SVG que
es nuestro caso puede ser importado para su manipulacioacuten y adivinen queacute illustrator
guarda en SVG
Actividad Cartel Regional
Esta actividad estaacute basada en los
conceptos aprendidos en lecciones
anteriores el uso de capas nodos
caracteres modificados trayectos y
manipulacioacuten de objetos Realizar el cartel
propuesto a la forma de la derecha
Alternativa al cartel Veacutease el Manual de
Praacutecticas
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
56
Ruacutebrica del Cartel Regional (5 puntos)
Indicadores
Aspectos a
evaluar
No
satisfactorio
Regular Satisfactorio Excelente
Uso de
tipografiacutea y
adecuacioacuten
de las
formas
anteriores
para obtener
la Forma
Final
No
corresponden
trazos
Falta orden y
adecuacioacuten
de tipografiacutea
y trazos
Presenta
tipografiacutea y
trazos
semejantes a
la forma final
Contiene tipografiacutea
y trazos conforme a
la forma final
utilizando
herramientas (guiacuteas
ajustehellip) que
valoran exactitud
Uso de
herramientas
para el
trazado
2 Utiliza solo trazo a mano alzada u objetos sin adecuacioacuten a la forma final
Utiliza al
menos 3
herramientas
y el trazo es
semejante a
la forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja a partir de nodos
Utiliza al
menos 5
herramientas y
el trazo es
semejante a la
forma
1 Trabaja con objetos
2 Aplica Colores
3 Dibuja libremente a mano alzada
4 Dibuja a partir de nodos
5 Trabaja con texto
Utiliza las siguientes
herramientas
1 Trabaja con objetos
2 Aplica Colores 3 Aplica Rellenos
4 Transforma Objetos
5 Dibuja libremente a mano alzada
6 Dibuja a partir de nodos
7 Utiliza capas 8 Trabaja con texto 9 Modifica
caracteres utilizando nodos
Herramientas
del Entorno
de trabajo
(Cuadricula-
ajuste-Guiacuteas)
No existen o
no
corresponden
Faltan
algunas
herramientas
auxiliares
para el trazo
Presenta el
uso de las
herramientas
de forma
baacutesica
Se utilizaron todas
las herramientas
coherentemente
asegurando
exactitud
Propuesta de
nuevas
No hay Propuesta
insuficiente
Propuesta
armoacutenica al
Propuesta adecuada
al tema presentada
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
57
formas
(Alternativas
al disentildeo)
propuesta (trazos
escuetos)
tema con entorno
adecuado
Puntaje 25 35 45 5
Comentarios
Adicionales
Retroalimentacioacuten
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
58
Taller 3 Disentildeando una paacutegina web
Actividad 1 Conocer HTML y su estructura
Cuando se abre cualquier paacutegina web en Internet no se toma mucha relevancia sobre coacutemo estaacuten constituidas o queacute les permite ser abiertas en casi cualquier sistema operativo llaacutemese Windows Leopard (Apple) Linux Symbian Android (teleacutefonos portaacutetiles) o queacute las hace tan ligeras tan portaacutetiles todo estaacute determinado en un concepto llamado lenguaje HTML
iquestQueacute es internet para ti
iquestPor queacute es necesario Internet
iquestQueacute leyes rigen y protegen a Internet
iquestCoacutemo publicas un documento imagen o mensaje en Internet iquestconoces alguna herramienta
iquestCoacutemo codifican una paacutegina web
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
59
iquestQueacute es HTML
Es un lenguaje de marcado predominante para la construccioacuten de paacuteginas web Las siglas HTML proceden del acroacutenimo 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 paacutegina web su codificacioacuten estaacute basada en ldquoEtiquetasrdquo las cuales estaacuten determinadas por corchetes angulares ( lt gt ) y usa una sintaxis baacutesica 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 alguacuten editor especial o compilador integrado solo tienes que abrir alguacuten editor de texto y guardar el documento con la extensioacuten html o htm Cabe mencionar que HTML puede hasta cierto punto cargar ldquoscriptsrdquo que proporcionen alguacuten 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 asiacute que se necesita de un programa que pueda ldquotraducirrdquo cada etiqueta para visualizar todas las caracteriacutesticas de la paacutegina este ldquointerpreterdquo se llama explorador de Internet y abajo se mencionan los maacutes conocidos
De hecho entre ellos ha habido grandes disputas por el mercado de usuarios uno muy sonado en los primeros antildeos de auge de Internet y despueacutes de Mosaic3 fue entre Explorer y NetScape Ahora es turno de actualizarte investiga iquestQueacute exploradores estaacuten en competencia iquestQueacute porcentaje de usuarios tienen cada uno de ellos
Exploradores de Internet
Explorer Opera FireFox NetScape Safari
Actividad 2 Codificacioacuten baacutesica de un texto en HTML
iquestQueacute significa codificacioacuten
3 Investiga sobre el navegador Mosaic y su importancia
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
60
Abrir un editor de texto por ejemplo en nuestro caso notepad despueacutes codificar los elementos baacutesicos y guardar en una carpeta con la extensioacuten html o htm
Al Editar en HTML se hace uso de ldquopalabra reservadas del lenguajerdquo en realidad se llaman etiquetas (tags) las cuales se identifican por el uso de los siacutembolos lt y gt y determinan la codificacioacuten e interpretacioacuten del contenido por ejemplo para establecer un tiacutetulo se hace uso de un encabezado (header) el cual usa la etiqueta ltH1gt que inicia esta funcioacuten en el texto y termina este formato al cerrar la etiqueta ltH1gt
A continuacioacuten abra un explorador de Internet para visualizar el resultado de esta codificacioacuten En este ejemplo se usaraacute Microsoft Internet Explorer
1- Abrir Microsoft Internet Explorer 2- Presionar Ctrl+O3 Seleccionar el archivo html y aceptar
El coacutedigo esta explicito en la imagen y es el siguiente lthtmlgt ltbodygt lth1gtMi Primer Encabezadolth1gt ltpgtMi Primer Paacuterrafo ltpgt ltbodygt lthtmlgt
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
61
Este es el resultado luego de cargar el documento en el navegador de internet
Etiquetas
Una etiqueta estaacute constituida por un indicador de inicio y final para cada elemento salvo algunos casos especiales ademaacutes se tiene la propiedad de aplicar atributos en
las etiquetas funcionando estos como paraacutemetros que modifican la visualizacioacuten de los elementos que se encierran
Etiqueta Funcioacuten Atributos
ltBODYgthellip ltBODYgt Apertura y cerradura del cuerpo del documento
BGCOLOR BACKGROUND TEXT LINK VLINK ALINK
ltHEADgthellip ltHEADgt
Encabezamiento del documento
BASE TITLE ISINDEX NEXTID META
ltHTMLgthellip ltHTMLgt
Inicio y fin de todo documento
HEAD BODY
ltBgthellipltBgt Estilo de fuente Negrita Ninguno
ltIgthellipltIgt Estilo de fuente Itaacutelica (Cursiva)
Ninguno
ltPgthellipltPgt Paacuterrafo ALIGN =LEFT CENTER RIGHT
ltSgthellipltSgt Texto subrayado Ninguno
ltH1 H6gt ltH1 H6gt
Tamantildeo y tipo de encabezado del 1 al 6
HTML 30 LEFT CENTER RIGHT
ltBRgt Retorno de liacutenea
ltSUBgthellipltSUBgt Subiacutendice Ninguno
ltSUPgthellipltSUPgt Superiacutendice Ninguno
ltCENTERgthellipltCENTERgt Centrar Ninguno
ltFONTgthellipltFONTgt Definicioacuten de la fuente SIZE COLOR Internet Explorer FACE
ltHRgt Liacutenea horizontal NOSHADE SIZE WIDTH ALIGN Internet Explorer COLOR
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
62
Publicando una frase
Realizar un documento que presentaraacute una frase utilizando los elementos baacutesicos aprendidos sus y atributos
1 Abre un bloc de notas codifica seguacuten la imagen (instrucciones) 2 Guarda con la extensioacuten html asignado el nombre ejemplo2 3 Visualizar el resultado en un explorador de Internet
Uso de etiquetas especificas para elaborar un documento
A continuacioacuten se realiza un documento maacutes complejo que presenta las propiedades quiacutemicas del Arseacutenico y sus efectos en la salud La codificacioacuten utiliza las etiquetas antes vistas que se describe en la imagen del coacutedigo fuente denominado ejemplo3html
En este ejemplo se hace uso del concepto ldquoatributosrdquo de algunas de las etiquetas definiendo que un atributo es una ldquopropiedadrdquo exclusiva de la etiqueta y que determina una accioacuten o caracteriacutestica Por ejemplo
La etiqueta ltBODYgt que inicia el cuerpo del documento tiene un atributo denominado bgcolor=rdquordquo el cual a traveacutes de una cadena especiacutefica recibe un color de fondo aplicable a la paacutegina web
Los atributos permiten manipular colores fuentes ubicaciones y eventos aunque cabe mencionar que como parte de la evolucioacuten del mundo tecnoloacutegico de la web algunas etiquetas como atributos estaacuten siendo relevados e incluso hacen uso de nuevas tecnologiacuteas como CSS XML JavaScript entre otros
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
63
Actividad 3 Uso de Tablas
Agreguemos Propiedades a traveacutes de una tabla la cual estaacute constituida por filas celdas y un tiacutetulo de tabla
ltTABLEgthellipltTABLEgt Genera una Tabla BORDER CELLPADDING CELLSPACING HEIGTH WIDTH COLOR
ltTDgthellipltTDgt Celdas de una fila en una tabla
ALIGN VALIGN NOWRAP COLSPAN ROWSPAN HEIGTH WIDTH
ltTHgthellipltTHgt Tiacutetulo de Tabla ROWSPAN COLSPAN ALIGN VALIGN NOWRAP HEIGHT WIDTH
ltTRgthellipltTRgt Fila de una Tabla ALIGN VALIGN
Estructura y sintaxis de una tabla en HTML
ltTABLEgt
ltTABLEgt
ltTHgt ltTHgt
ltTRgt ltTRgt
ltTDgt ltTDgt
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
64
Ejemplo de uso de las tablas
Como se describe en la imagen anterior se elabora un documento html que describe la codificacioacuten de una tabla que contiene detalles de propiedades quiacutemicas del arseacutenico Su coacutedigo es el siguiente
ltTABLE BORDER=rdquo1rdquogt
ltTHgt Propiedades ltTHgt
ltTRgtltTDgtMasa Atoacutemica (gm)ltTDgtltTDgt 74922ltTDgt ltTRgt
ltTRgtltTDgtPunto de ebullicioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt613ltTDgt ltTRgt
ltTRgtltTDgtPunto de fusioacuten(ltSUPgt o ltSUPgtC)ltTDgtltTDgt817ltTDgt ltTRgt
ltTABLEgt
Finalmente visualizar el resultado de la codificacioacuten en un navegador de internet
Actividad 4 Incrustacioacuten de listas imaacutegenes e hiperviacutenculos
iquestCoacutemo se integra una imagen a tu paacutegina de red social (facebook tweeter flick)
iquestQueacute es una URL
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
65
Basado en las respuestas anteriores se ha notado el uso de una ldquodireccioacutenrdquo que integra una imagen de nuestro equipo de coacutemputo o de alguacuten sitio web esta direccioacuten es codificada en un documento web a traveacutes de la etiqueta ltIMGgt y su atributo SRC= contiene la ruta A continuacioacuten se describe esta etiqueta y la etiqueta BGSOUND que inserta sonido de fondo y comparte el mismo atributo SRC para incrustar audio
Etiqueta Funcioacuten Atributo Cerradura
ltBGSOUNDgt Sonido de fondo
SRC LOOP NO - Internet Explorer
ltIMGgt Cargar imaacutegenes
ALIGN SRC ALT ISMAP WIDTH HEIGHT VSPACE HSPACE
NO
Continuando con nuestra paacutegina vamos a agregar una lista llamada iexclSabias que Y agreguemos una imagen en el centro de nuestro trabajo asiacute como un hiperviacutenculo hacia un sitio oficial
Etiqueta Funcioacuten Atributos Cerradura
ltLIgt Iacutetem de lista Netscape VALUE TYPE
NO
ltULgt Lista no ordenada con elementos marcados con ltLIgt
COMPACT TYPE ltULgt
ltOLgt Lista ordenada con elementos marcados con ltLIgt
TYPE START VALUE
ltOLgt
iquestQueacute es un hiperviacutenculo
A lo anterior dado que un hiperviacutenculo teacutecnicamente es una referencia entonces la ruta se especifica en el atributo HREF= el cual delimita a traveacutes del entrecomillado del sitio pagina imagen o sonido al cual se desea acceder al hacer clic en texto imagen o mapeado de imagen
Etiqueta Funcioacuten Atributos Cerradura
ltAgt Hiperviacutenculo HREF NAME REL REV TITLE ltAgt
Un hiperviacutenculo tiene la siguiente forma
En texto
lta href=httpwwwbuapmx gt Clic ltagt La etiqueta ltagt tiene una cerradura ltagt la cual puede aplicarse a un texto o imagen como se define a continuacioacuten
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
66
En Imagen
lta href=httpwwwbuapmx alt=rdquoTexto Alternativordquogt ltIMG SRC=rdquoimagenjpgrdquogt ltagt
Actividad 5 Uso de lista imagen e hiperviacutenculo
La lista es construida con las etiquetas ltLIgt 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 instruccioacuten ltOL TYPE=rdquo1rdquo START=rdquo3rdquogt ltLIgthellipltLIgt ltOLgt
La imagen estaacute compuesta por la ldquorutardquo contenedora del archivo de imagen se usa ALT para dar un texto de etiqueta a la imagen en cuanto al tamantildeo de una imagen el ancho y alto de la misma se puede controlar por los atributos width y height ambos pueden recibir una notacioacuten en pixeles absolutos o porcentaje relativo al tamantildeo width=rdquo100rdquo o height=rdquo50rdquo
Para ldquoconectarrdquo una paacutegina con otra es decir crear un viacutenculo se utiliza la instruccioacuten ltAgt la cual contiene una referencia de HIPERVINCULO donde la forma es HREF=rdquohttpsitiordquo para el caso de sitios de internet para el caso de paginas locales se utiliza la ruta contenedora HREF=rdquorutardquo
Codifique el ejemplo anterior para visualizar el resultante de la actividad la cual utiliza listas imaacutegenes e hiperviacutenculos
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
67
Actividad 6 hiperviacutenculos y marcos
iquestQueacute es un marco (FRAME)
iquestDoacutende has utilizado un marco (Aplicaciones de redes sociales o mensajeriacutea)
Ademaacutes de lo anterior en la leccioacuten pasada un hiperviacutenculo estaacute compuesto por un
valor direccional sobre la apertura de una paacutegina es decir se puede especificar si la
paacutegina se abre den una nueva ventana o si se abre en un apartado especial llamado
FRAME
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en la misma ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo gt You Tube ltAgt
Ejemplo de hiperviacutenculo sobre un texto donde se abriraacute en una nueva ventana el sitio o
paacutegina web
ltA HREF=rdquohttpwwwyoutubecomrdquo TARGET =rdquo_BLANKrdquogt You Tube ltAgt
Un marco (FRAME) permite dividir la pantalla en segmentos ajustables o fijos lo cual
permite manipular en una paacutegina la estructura de la divisioacuten de pantalla permitiendo
actualizar o cargar elementos en una ubicacioacuten independiente
Para establecer una pantalla con marcos (FRAMES) seraacute necesario de un archivo
especializado en dividir y establecer nombre a cada segmento construido a traveacutes del
atributo NAME= y la carga del archivo en dicho segmento corre a cargo del atributo
SRC=
ltframe src=gasesnobleshtml name=IZQgt
ltframe src=bienvenidahtml name=DER gt
La segmentacioacuten en filas o columnas
estaacute determinada por la etiqueta
FRAMESET y su atributo COLS o
ROWS
ltframeset cols=2575gt
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
68
En la siguiente actividad se describe el uso de marcos para construir una paacutegina web
que permite presentar contenidos en un extremo de la pantalla a partir de un listado fijo
Actividad 7 Uso de marcos
Se necesita elaborar una paacutegina capaz de mostrar la informacioacuten de los gases nobles
de la tabla perioacutedica de los elementos quiacutemicos en el extremo derecho de la ventana a
partir de una lista
Primero se construye el archivo que realiza la divisioacuten de la ventana del explorador a
cada seccioacuten se le da un nombre uacutenico asiacute como un porcentaje de ocupacioacuten
determinado en filas ldquorowsrdquo o columnas ldquocolsrdquo Guardando el archivo con extensioacuten
html
Ademaacutes las imaacutegenes a utilizar deberaacuten ser guardadas en un carpeta denominada
images sin olvidar que los archivos asiacute como la carpeta estaraacuten ubicadas en una
carpeta ldquoraiacutez rdquo llamada pagweb veacutease la image adjunta a la codificacioacuten del marco
lthtmlgt
lttitlegt Quiacutemica I lttitlegt
ltframeset cols=2575gt
ltframe src=gasesnobleshtml
name=IZQgt
ltframe src=bienvenidahtml
name=DER gt
ltframesetgt
lthtmlgt
Archivo iniciohtml guardado en la carpeta
pagweb
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
69
Archivos
lthtmlgt ltbody bgcolor=lightgreengt lth1gtGases Nobleslth1gt ltHRgt ltOL TYPE=1 START=1gt ltLIgt ltA HREF=heliohtml TARGET=DERgt Helio ltAgt ltLIgt ltLIgt ltA HREF=neonhtml TARGET=DERgt Neoacuten ltAgt ltLIgt ltOLgt ltbodygt
lthtmlgt
gasesnobleshtml
lthtmlgt ltbody bgcolor=lightbluegt lth1gtQuiacutemica Ilth1gt ltHRgt ltcentergt ltH2gtAlumnaltH2gt ltH3gtMonserrat C M ltH3gt ltHRgt ltcentergt ltbodygt lthtmlgt
bienvenidahtml
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesheliojpg width=50 heigth=50 alt=Heliogt
ltcentergt
ltfont color=bluegtHelio ltfontgt Nuacutemero atomico 2 descubrimiento Janssen 1868
ltPgt
ltbodygt
lthtmlgt
heliohtml
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
70
Proyecto Publica lo aprendido en Informaacutetica III
El proyecto final estaraacute compuesto por una seleccioacuten de trabajos realizados durante el
ciclo escolar mismos que son listados en el lado izquierdo de una estructura basados
en marcos Teniendo la siguiente forma
lthtmlgt
ltbody bgcolor=lightbluegt
lth1gtQuiacutemica Ilth1gt
ltHRgt
ltpgt
ltcentergt
ltimg src=imagesneonjpg width=50 heigth=50 alt=Neoacutengt
ltcentergt
ltfont color=bluegtNeoacuten ltfontgt Nuacutemero atomico 10 descubrimiento Ramssey y Travers 1894
ltPgt
ltbodygt
lthtmlgt
neonhtml
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
71
Enriquece tu paacutegina web con los siguientes elementos desde colocar video audio
hasta efectos sigue las instrucciones y etiquetas
Insertar Audio
ltBGSOUND SRC=sonidomid LOOP=nonegt
ltWIDTH=200 HEIGHT=55 AUTOSTART=true LOOP=false HIDDEN=truegt
Insertar Video
ltEMBED SRC=colonavi HEIGHT=300 WIDTH=400 AUTOSTART=TRUE
LOOP=FALSEgt
Insertar archivos Flash
ltOBJECT width=250 height=100gt
ltPARAM NAME=movie VALUE=peliculaswfgt
ltEMBED SRC=peliuclaswf width=250 height=100gt
Transiciones Dentro de la etiqueta HEAD
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=3)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=4)gt
ltMETA http-equiv=Page-Enter CONTENT=RevealTrans(Duration=3Transition=6)gt
Eventos MouseOver
lta href=referencetagshtml onmouseover=thisstylecolor=white
onmouseout=thisstylecolor=blackgtLista de tags HTMLltagt
Eventos MouseOver
A continuacioacuten se muestra la codificacioacuten de coacutemo efectuar el intercambio de imaacutegenes
al desplazar el puntero del mouse sobre una imagen
ltimg width=100 src=1jpg onmouseover=thissrc = 2jpg onMouseOut=thissrc
= 3jpg border=0gtltimggt
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
72
BIBLIOGRAFIacuteA
BLOQUE II
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
Baase Sara y et al Algoritmos computacionales introduccioacuten al anaacutelisis y disentildeo
Pearson Educacioacuten Addison Wesley Meacutexico 2002
REFERENCIAS EN INTERNET
httpwwwuclaeduvedacdepartamentosinformatica20Isesion20no201pdf consultada en Junio 2011
httpdefiniciondeinformacion consultada en Junio 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque I tema ldquocoacutemo elaborar mapas conceptualesrdquo Tambieacuten consultar del CD de Material Didaacutectico y Audiovisual de Informaacutetica III la presentacioacuten ldquoQue es un mapa conceptualpptrdquo
httpwwwnlmnihgovmedlineplusspanishencyarticle000591htm consultada en Julio 2011
httpwwwyoutubecomwatchv=r_oXwt5RH4Qampfeature=related consultada en Julio del 2011
httpwwwyoutubecomwatchv=hai47MEmgNMampfeature=related consultada en Agosto 2011
httpwwwyoutubecomwatchv=Vu7TiFNOmSk consultada en Agosto 2011
httpwwwyoutubecomwatchv=ee2NkocQCu4ampfeature=related consultada en Agosto 2011
httpwwwfundacionbengoaorgpersonalidadesadolphe-lambert-jacques-queteletasp consultada en Julio del 2011
Apoyarse en la Antologiacutea de Informaacutetica I bloque II tema ldquoveracidad y seguridad en internetrdquo
httpwwwcontinentscomdiabetes35htm consultada en Agosto del 2011
httpcocinalamexicanaespaciolatinocomcaloriashtml consultada en Julio del 2011
httpwwwcondusefgobmxindexphpoption=com_contentampview=articleampid=675 consultada en Agosto del 2011
httpwwwmexicomaxicoorgVotoGasolMexUSAhtm consultada en Agosto del 2011
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012
73
BIBLIOGRAFIacuteA
BLOQUE III
BAacuteSICA
Caseliacuten Rosas Goacutemez y et al Informaacutetica III Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2011
Guevara Sandoval y et al Informaacutetica I Manual de praacutecticas y antologiacutea del
alumno Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
Caseliacuten Diacuteaz y et al Informaacutetica III Manual de praacutecticas y antologiacutea del alumno
Aprobada por la Academia General de Informaacutetica NMSBUAP antildeo 2010
COMPLEMENTARIA
McFedries Paul Creando una paacutegina Web con HTML faacutecil traduccioacuten de Jorge
Luis Gutieacuterrez Prentice-Hall Hispanoamericana Meacutexico c1997
Nick Clark Coacutemo combinar y elegir colores para el disentildeo graacutefico concepto G Gili
Meacutexico 2001
REFERENCIAS EN INTERNET
Estaacutendar HTML5 (Oficial) httpwwww3orgTRhtml5 consultada en Julio del 2012
Tutorial y etiquetado HTML httpwwww3schoolscomhtmldefaultasp consultada en Julio del 2012
HTML en espantildeol httpeswikipediaorgwikiHTML consultada en Julio del 2012 Inkscape sitio oficial httpinkscapeorglang=es consultada en Julio del 2012
Libro Inkscape 048 illustrators cookbook httpwwwpacktpubcominkscape-048-illustrators-cookbookbook consultada en Julio del 2012
Planeta InkScape (tutoriales) httpplanetinkscapeorg consultada en Julio del 2012
Corel Draw Club (tutoriales) httpwwwcorelcluborg consultada en Julio del 2012
Tutoriales InkScape httpinkscapetutorialswordpresscom consultada en Julio del
2012
Tutorial (Ingleacutes) httpenflossmanualsnetinkscapetoolboxstar-tool consultada en Julio del 2012