Presentación para estudiantes

2. • Colocar un fondo de color acorde a la imagen o logotipo
• Que se puedan leer bien los textos. Los fondos están para hacer
más vistosa la página, no para molestar en la lectura de los textos
por lo tanto es importante que las combinaciones de color del
texto y del fondo sean agradables, ya que hay ciertos colores que,
aunque contrastan bien, provocan unas combinaciones difíciles de
leer.
• Los fondos de imagen de color homogéneo. Si utilizamos un fondo
de imagen, tenemos que procurar que en la imagen se utilicen
colores de una misma gama. Si el texto es claro no contrastará bien
con las partes del fondo que también son claras. Igual pasará si
colocamos el texto con un color oscuro, que no contrastará bien con
las partes oscuras del fondo.

3. • Tener cuidado con las distintas definiciones de pantalla. Es
importante saber que un visitante puede acceder a una página con
un tamaño de ventana variable. A veces un fondo se comporta
bien con una definición dada, pero no con otras mayores. Ocurre
muy a menudo que se utiliza un fondo y se ve el resultado en una
ventana de 800x600 ó 1024x768. Luego accede una persona con
una definición de 1280x1024, o superior, y ve la página
incorrectamente porque se realiza un mosaico con el fondo que no
había tenido en cuenta el desarrollador.
•Hacer un fondo suficientemente grande . Es importante que el
tamaño del archivo que vamos a utilizar como fondo tenga un
cierto tamaño. Si utilizamos como fondo una imagen de unos
pocos pixeles, nuestro ordenador trabajará mucho para crear el
mosaico repitiendo cientos o miles de veces esa imagen. Sin
embargo, si el fondo hubiese sido un poco más grande, para
realizar el mosaico hubiera trabajado mucho menos.

8. • Elemento gráfico que identifica a una
persona, empresa, institución o producto. Un
logo exitoso debe ser:
• LEGIBLE en todo tipo de tamaños
• REPRODUCIBLE: sin importar las condiciones
materiales
• ESCALABLE: al tamaño deseado
• DISTINGUIBLE: no debe dar lugar a
confusiones
• MEMORABLE que impacte y no se olvide.

9. LOGOTIPOS
• No utiliza una
imagen figurativa se
basa en su tipografía.
Su ventaja: la
capacidad de
comprensión.
ISOTIPOS
• Sólo utiliza una
imagen figurativa o
ícono para transmitir
su mensaje. La
ventaja es muy fácil
de recordar.
ISOLOGOTIPOS
• Combina los dos
anteriores. La
ventaja es que tiene
un increíble poder de
precisión ya que
suma la capacidad
expresiva de ambos
elementos ícono y
tipografía.

11. • Imagen o animación situado en una página web
que contiene, en la mayoría de los casos,
publicidad. Se crean a partir de imágenes en
formato JPEG, GIF o FLASH y suelen ser muy
llamativos, con colores y animaciones que llaman
la atención del internauta.
• Un encabezado es la sección que está situada en
la parte superior de tu página web. Algunos
encabezados aparecen sobre el menú de
navegación, pero también es común colocarlos
directamente debajo del menú.

15. • Capturar la atención rápidamente utilizando adecuadamente texto, colores y gráficas
• Enfatizar en el tema del sitio web
• Preferir los banners GIF animados sobre los estáticos
• El uso de frases que impliquen curiosidad, humor, miedo o preguntas. (Ejemplo:
Sabía usted que…)
• Incluir algún logo, dirección web o identificación gráfica de nuestro sitio
• En cuanto a tamaño en píxeles los banners estándares son de 468 x 60 pixeles,
existen también mini banners y banners de otras dimensiones, dependiendo del sitio
que los exponga.
• En Kb no deben tener más de 10 kb de tamaño ya que un banner demasiado grande
tardará mucho en cargarse y no será visualizado por el visitante.
• El uso de colore brillantes es más apropiado que colores oscuros. El negro ha
demostrado ser menos efectivo. Entre los más recomendable está el azul, amarillo,
naranja y verde.
• Se debe aplicar colores que contrasten para que pueda leerse los mensajes o títulos
• Aplicar mucha creatividad.

17. • Se define con las dimensiones en píxeles de la matriz o
cuadrícula. Si una imagen está formada por una matriz
de 800 columnas por 500 filas, tiene entonces un
tamaño de 800 x 500 píxeles.
• Se suele utilizar el término “megapíxel” para simplificar
las cifras: 1 megapíxel equivale a 1 millón de píxeles. Su
problema es que es una medida que no da información
acerca de sus dimensiones. Una imagen de 1000x400
tiene el mismo número de píxeles (400,000) que una
de 800x500 pero, evidentemente, sus dimensiones son
diferentes.

18. Esta imagen tiene unas dimensiones de 400x261 píxeles, un total de
104.400 píxeles y 0,104 Megapíxeles.

19. • El tamaño es la cantidad de información que
contiene, medida en bits, Bytes, Mega, Giga, Tera.
• Es conveniente aclarar que es usual escribir "bit"
con "b" minúscula y "Byte" con mayúscula.
• Si una imagen contiene 50 Bytes, éste es su
tamaño de archivo: 50 Bytes. Si contuviera 50.000
Bytes, se suelen emplear múltiplos para afirmar
su tamaño con más comodidad, que son el
"KiloByte", el "MegaByte", el "GigaByte" o el
"TeraByte". Con la siguiente tabla quedarán más
claras las equivalencias entre ellos:

20. Tabla de tamaños
Nombre Abreviatura Tamaño Tamaño en Bytes
bit b 1 bit (0 o 1)
Byte B 8 bits 1
KiloByte KB 1.024 Bytes 1.024
MegaByte MB 1.024 KBytes 1.048.576
GigaByte GB 1.024 MBytes 1.073 millones

21. FORMATO JPEG
DIMENSIÓN 259 X 194
TAMAÑO O PESO 25 KB
FORMATO GIF
DIMENSIÓN 267 X 300
TAMAÑO O PESO 17.4 KB

22. Estas imágenes tiene las siguientes
dimensiones:
Fantasma preocupado: 1152 x 864
Corazones 1024 x 768
Estrellas 1140 x 1080
Calcula el total de píxeles y
megapixeles que contiene cada
una

23. WEBGRAFIA
• http://es.wikipedia.org/wiki/Logotipo
• http://es.wix.com/blog/2012/05/tips-html5-como-crear-
encabezados-grandes/
• http://www.google.com.co/search?tbm=isch&hl=es&sourc
e=hp&biw=1366&bih=667&q=fondos+para+web&gbv=2&o
q=fondos+para+we&aq=0&aqi=g10&aql=&gs_l=img.1.0.0l1
0.832.2899.0.5341.14.10.0.4.4.1.270.1269.4j4j2.10.0...0.0.F
EiYk-AoTIw
• http://office.microsoft.com/es-hn/powerpoint-
help/reducir-el-tamano-de-archivo-de-una-imagen-
HA010192200.aspx (Reducir tamaño de imagen)
• http://www.logotipia.com.ar/tipos-de-logotipos-diferentes-
tipos-de-logos.asp