Este documento describe dos formatos de imágenes digitales (vector y bitmap), sus ventajas y desventajas, y los principales formatos bitmap utilizados en la web (JPG, GIF, PNG). Explica cómo elegir el formato adecuado dependiendo del tipo de imagen, y brinda consejos sobre el uso efectivo de tipografías, banners publicitarios, efectos visuales, bocetos y wireframes en el diseño web.
Análisis de un sitio web
En este trabajo se llevo acabo el análisis semítico de un sitio web que lleva por nombre Blizzard el cual trata de video juegos, en donde se analizo la funcionalidad, la coherencia ademas de la facilidad para navegar de este sitio.
Cada vez más existe la tendencia a desarrollar conceptos gráficos para un diseño web completos dentro de un mismo programa, hasta llegar al montaje de la página web misma.
Análisis de un sitio web
En este trabajo se llevo acabo el análisis semítico de un sitio web que lleva por nombre Blizzard el cual trata de video juegos, en donde se analizo la funcionalidad, la coherencia ademas de la facilidad para navegar de este sitio.
Cada vez más existe la tendencia a desarrollar conceptos gráficos para un diseño web completos dentro de un mismo programa, hasta llegar al montaje de la página web misma.
Udabol
Docente: David Enrique Mendoza Gutiérrez.
Materia: Tecnología de la comunicación.
Cuestionario 1
Tecnologías de la comunicación.
Ing. Telecomunicaciones
Formatos de Imágenes Digitales de Melendez, Loose, Espinola y SosaOctavio_02
En este trabajo les mostraremos todo sobre los formatos de imágenes digitales, sus características y conclusiones. Al final del trabajo encontraran la bibliografía donde podrán sacar la información.
Los programas de composición de página, como Pagemaker, QuarkXpress o Indesign. Pretenden hacer lo mismo algunas alternativas más domésticas como el Publisher de Microsoft.
Aplicaciones de ilustración (o dibujo vectorial) como Illustrator, CorelDraw o Freehand.
Utilidades de tratamiento de imágenes y fotografías, como Photoshop o Paintshop Pro.
Taller dictado por Fondiú para el evento de medicina e Internet Viralizando 2012. Explica la importancia de las interfaces en nuestra salud emocional, y el valor de la simplicidad en nuestro uso cotidiano de la tecnología.
Presentación de la parte 1 del curso gratuito WordPress desde Cero, ofrecido por Fondiú.
Este curso es práctico, por lo que el recorrido por la aplicación no se incluye aquí.
Recuerda marcar "Me gusta" en http://www.facebook.com/fondiu.cl para enterarte de nuevos cursos y otras presentaciones!
Porfolio livings creados por Carlotta Designpaulacoux1
La sección de porfolio de livings de Carlotta Design es una muestra de la excelencia y la creatividad en el diseño de interiores. Cada proyecto en el porfolio refleja la visión única y el estilo distintivo de Carlotta Design, mostrando la habilidad del equipo para transformar espacios en ambientes acogedores, elegantes y funcionales. Desde salas de estar modernas y contemporáneas hasta espacios más tradicionales y clásicos, la variedad de estilos y diseños en el porfolio demuestra la versatilidad y la capacidad del equipo para adaptarse a las necesidades y gustos de cada cliente.
Las fotografías de alta calidad en el porfolio capturan la atención al detalle, los materiales de alta calidad y la combinación de texturas y colores que hacen que cada sala de estar sea única y especial. Además, la sección de porfolio de livings de Carlotta Design destaca la integración de muebles y accesorios cuidadosamente seleccionados para crear ambientes armoniosos y sofisticados.
En resumen, la sección de porfolio de livings de Carlotta Design es una ventana a la excelencia en el diseño de interiores, mostrando el talento y la dedicación del equipo para crear espacios extraordinarios que reflejan la personalidad y el estilo de cada cliente.
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 182062946377
Diseño del dia de la bandera. El 7 de junio se celebra en todo el Perú el Día de la Bandera, una fecha que conmemora el aniversario de la Batalla de Arica de 1880, un enfrentamiento histórico en el que las tropas peruanas se enfrentaron valientemente a las fuerzas chilenas durante la Guerra del Pacífico.
Del caos surge mi perfección.
Soy valen! Siempre en una búsqueda constante en el equilibrio de ambas, donde encuentro mi verdadera yo, apreciando la belleza de la imperfección mientras acepto los desafíos y errores, y desafiando mi caos para alcanzar mi perfección.
Soy una mente inquieta, siempre buscando nuevas
inspiraciones en cada rincón.Encuentro en las calles y en los detalles cotidianos los colores vibrantes y las formas audaces que alimentan mi creatividad y a través de ellos tejo collages en mi imaginación, donde mi energía juega un papel fundamental en cada textura, cada forma, cada color mostrando mi esencia capturada.
Soy una persona que ama desafiar las convenciones establecidas, por eso tomo la moda y el arte como
referentes hacia mi inspiración, permitiéndome expresarme con libertad mi identidad de una manera única.
Soy la búsqueda de la estética, que es mi guía en cada viaje creativo, así creando una imagen única que genere armonía y impacto visual.Sin embargo, no podría lograr esta
singularidad sin el uso de la ironía como aliada en mi búsqueda de la originalidad.
Soy una diseñadora con un proceso creativo
llamado: rompecabezas donde al principio se encuentran miles de piezas desordenadas sobre la mesa para que luego cada pieza encaje perfectamente para crear una imagen
Porfolio de diseños de Comedores de Carlotta Designpaulacoux1
calidad en el porfolio capturan la atención al detalle, la calidad de los materiales y la armonía de colores y texturas en cada diseño. El cuidadoso equilibrio entre muebles, iluminación y elementos decorativos se destaca en cada espacio, creando ambientes acogedores y sofisticados.
En resumen, la sección de porfolio de comedores de Carlotta Design es un reflejo del compromiso del equipo con la excelencia en el diseño de interiores, mostrando su habilidad para crear ambientes únicos y personalizados que sobresalen por su belleza y funcionalidad
El movimiento moderno en la arquitectura venezolana tuvo sus inicios a mediados del siglo XX, influenciado por la corriente internacional del modernismo. Aunque inicialmente fue resistido por la sociedad conservadora y los arquitectos tradicionalistas, poco a poco se fue abriendo camino y dejando una huella importante en el país.
Uno de los arquitectos más destacados de la época fue Carlos Raúl Villanueva, quien dejó un legado significativo en la arquitectura venezolana con obras como la Ciudad Universitaria de Caracas, considerada Patrimonio de la Humanidad por la UNESCO. Su enfoque en la integración de la arquitectura con el entorno natural y la creación de espacios que favorecen la interacción social, marcaron un punto de inflexión en la arquitectura venezolana.
Otro arquitecto importante en la evolución del movimiento moderno en Venezuela fue Tomás Sanabria, quien también abogó por la integración de la arquitectura con el paisaje y la creación de espacios abiertos y funcionales. Su obra más conocida es el Parque Central, un complejo urbanístico que se convirtió en un ícono de la modernidad en Caracas.
En la actualidad, el movimiento moderno sigue teniendo influencia en la arquitectura venezolana, aunque se ha visto enriquecido por nuevas corrientes y enfoques que buscan combinar la modernidad con la identidad cultural del país. Proyectos como el Centro Simón Bolívar, diseñado por el arquitecto Fruto Vivas, son ejemplos de cómo la arquitectura contemporánea en Venezuela sigue evolucionando y adaptándose a las necesidades actuales.
3. Formatos de imagen
Existen dos maneras de representar gráficos en
un computador:
1. Vector
2. Bitmap (mapa de bits)
4. vector
Las formas y colores son el resultado de
operaciones matemáticas ("vectores").
5. vector
Ventajas
• Independiente de la resolución (se pueden
agrandar hasta el infinito sin perder calidad)
• Archivos muy livianos
Desventajas
• Sólo sirve para formas básicas
• No está lo suficientemente soportado en la
Web
6. vector
Software que crea imágenes de vector
Adobe Illustrator Freehand Inkscape Corel DRAW
8. BITMAP
Las imágenes Bitmap (o mapa
de bits o Raster) representan
la información mediante una
cuadrícula de píxeles
(cuadrados pequeños de
colores).
Las fotografías son
representadas mediante
bitmaps.
9. BITMAP
Son dependientes de la resolución: si
agrandamos demasiado la imagen, veremos la
cuadrícula (conocido como imagen pixelada)
10. BITMAP
Ventajas
• Fidelidad absoluta
• Es la única manera de representar fotos
• Altamente compatible con la Web
Desventajas
• Dependiente de la resolución
• Tamaños de archivo mucho mayores
13. ¿qué formato elegir?
Para la Web (y al menos por ahora)
necesitamos usar bitmaps para nuestros
gráficos.
Pero… PNG, JPG o GIF?
Para saberlo, debemos entender el concepto
de compresión.
14. compresión
Todos los formatos de imagen bitmap intentan
comprimir de una u otra forma la información
para disminuir el tamaño del archivo.
(Ya sabemos que la Web es lenta y que el
usuario es impaciente)
15. compresión
La compresión busca abreviar
la información gráfica (pixel
por pixel) con la menor
pérdida posible de calidad.
En lugar de decir
"píxel negro, píxel negro,
píxel negro…" podemos
abreviar diciendo "9 píxeles
negros".
16. JPG
• Permite reproducir millones de colores
• Comprime basado en que el ojo humano es
más sensible a ciertos cambios de color,
saturación o luminancia que a otros.
• A mayor compresión, menor definición
Original (38 Kb) Calidad 50 (5,5 Kb) Calidad 0 (1,7 Kb)
17. JPG
Recomendado para
• Fotografías
• Ilustraciones de muchos colores
• Gráficos con gradientes, sombras y efectos
No recomendado para
• Figuras geométricas
• Logos y texto
• Formas demasiado definidas
18. GIF
• Trabaja con una paleta restringida o
indexada de colores (máximo 256)
• Obtiene formas definidas al pixel
• Permite animación
• A mayor compresión, menos colores
Original (38 Kb) GIF muy comprimido (5 Kb)
20. GIF
Recomendado para
• Logos, texto, figuras y gráficos de pocos
colores
• Animaciones
• Transparencias sencillas
No recomendado para
• Fotografías
• Gradientes
• Efectos de sombra, resplandor, etc
21. PNG
• PNG fue creado para ser libre, gratuito (no
usa patentes como GIF y JPG) y flexible
• Es el único formato para la Web que permite
comprimir sin pérdidas
• Es el único formato que admite
transparencia gradual
• Viene en 3 sabores: PNG-8, PNG-24 y PNG-
32
22. PNG-8
• Se comporta exactamente igual al GIF: con
una paleta indexada y transparencia simple
• En ocasiones es más liviano que el GIF, otras
veces no (siempre hay que probar!)
23. PNG-24
• Formato sin pérdidas.
• No es posible definir un rango de
compresión: "Comprime hasta donde
puede" sin afectar la calidad
• Para fotografías puede generar archivos muy
pesados
• Ideal para logos con efectos, gradientes,
sombras, etc.
24. PNG-32
• Idéntico a PNG-24, con la diferencia que
permite transparencia gradual…
Transparencia GIF Transparencia PNG-32
25. ¿Cómo elegir?
• Programas como Fireworks o Photoshop
tienen funciones llamadas Optimizar o
Guardar para Web.
• Selecciona distintos formatos y ve cuál pesa
menos conservando la calidad requerida.
• Haz zoom a la imagen para asegurarte de
que la calidad sea la adecuada (en especial
para logotipos y textos)
26. tipografía en la Web
• Así como la Web tiene sus limitaciones, la
tipografía en la Web también las tiene…
• Es indispensable conocerlas para poder
mejorar nuestro diseño.
27. tipografía en la Web
Limitación 1: no puedes usar cualquier
tipografía
• NADA garantiza que el usuario tenga en su
computador la tipografía que estás usando
• Windows tiene ciertas fuentes, Mac otras,
Linux otras…
28. tipografía en la Web
Limitación 1: no puedes
usar cualquier tipografía
• Pero existen ciertas
fuentes que tienen
equivalentes similares
en la mayoría de los
sistemas:
• ..sí, son pocas.
29. tipografía en la Web
Limitación 2: No todos los sistemas operativos
suavizan el texto de la misma forma
• Y eso quiere decir que tus páginas se verán
distintas en Windows que en Mac o Linux…
• Y el "color tipográfico" también será distinto.
• Incluso el espacio que ocupan las letras a
veces tampoco es el mismo.
30. tipografía en la Web
Limitación 2: No todos los sistemas operativos
suavizan el texto de la misma forma
Windows Mac
31. tipografía en la Web
Limitación 3: El texto TIENE que ser accesible
para la Web
• Sería muy fácil ponerlo todo como una
imagen para conservar mis tipografías
(algunos "diseñadores" lo hacen…)
• Pero la Web es accesible; es parte de su
naturaleza y de su potencial
32. tipografía en la Web
Web Fonts y CSS al rescate
• Hace mucho tiempo que se está buscando
una solución para poder usar fuentes
personalizadas en la Web, manteniendo la
compatibilidad y la accesibilidad.
33. tipografía en la Web
Web Fonts y CSS al rescate
• CSS 3 estrenó una regla llamada @font-face,
que permite adjuntar una tipografía para
usarla en una página.
• Problema: no todos los navegadores lo
soportan.
34. tipografía en la Web
Web Fonts y CSS al rescate
• Dada esta limitación, apareció Web Fonts.
• Existen varias técnicas para las Web Fonts,
pero todas tienen lo mismo en común: dibuja
gráficos vectoriales que simulan ser las
tipografías y esconden detrás texto
seleccionable (y accesible)
35. tipografía en la Web
Web Fonts
• Google Web Fonts
• Cufón
• WebINK
36. tipografía en la Web
Variables a considerar al manejar tipografías
en la Web
• Interlineado
• Espaciado entre caracteres
• Tamaño de texto
40. banners y publicidad
La publicidad en Internet puede ser vista como
una limitante (muy probablemente DEBAMOS
lidiar con ella) o como un desafío (cómo
ofrecer anuncios de calidad y que no disgusten
al visitante)
41. banners y publicidad
• La inmensa mayoría de los recursos de
Internet son gratuitos.
• Alguien tiene que pagar eso… por ende,
debemos acostumbrarnos a trabajar con la
publicidad en la Web
42. banners y publicidad
• Internet y la Web ofrecen una amplia
variedad de canales a las marcas y a sus
agencias de publicidad:
– Avisaje en sitios de alto tráfico
– Avisaje en buscadores (Google Adwords)
– Avisaje en Facebook
– Estrategias de redes sociales (Twitter, Facebook
Fan Pages, Virales, YouTube…)
– Landing Pages para consolidar campañas
43. banners y publicidad
Muchas marcas están comenzando a tratar a Internet
como un punto de venta físico…
44. banners y publicidad
Cómo influye el avisaje en nuestro diseño Web
• 3 grandes formas de incluir publicidad en
sitios Web:
– Lateral o complementaria
– Obtrusiva
– Integrada con el contenido
49. Efectos visuales
Photoshop ("Estilos de capa") y Fireworks
("Filtros") poseen galerías de efectos para jugar:
• Sombras difuminadas y sólidas
• Iluminaciones (Glow)
• Biseles (Bevel)
• Rellenos de color
• Transparencias
• Gradientes
• Etc.
52. bocetos y wireframes
• Ambos son de enorme utilidad para diagramar
y tener una idea gráfica para el cliente, antes de
lanzarse de cabeza a prototipar el diseño
53. bocetos y wireframes
• "Corregir un error en la fase de
planificación cuesta 1 dólar… corregirlo
en la fase de prototipado cuesta 10
dólares… y corregirlo en la fase de
producción cuesta 1000 dólares"
54. bocetos y wireframes
• La gracia de los bocetos y wireframes es: tener
la mayor cantidad de feedback y correcciones
posibles del cliente, antes de invertir tiempo y
diseño en producir.
• Sumado a la Arquitectura de Información, a una
buena investigación y a una correcta elección
del layout… tenemos todo para crear con
comodidad :)
57. bocetos y wireframes
• Primero el boceto, después el Wireframe
• Siéntase libre boceteando: después se pone
límites
• Haga rayones, borrones, manchas
• No Necesita Dibujar Bonito Para Bocetear.
• (Haga la prueba dibujando un cubo. Pudo?
Maravilloso. Tiene todo lo necesario)
58. bocetos y wireframes
• El Wireframe es un poco más estructurado.
Puede incluir ya el trabajo con grids, y
usualmente se realiza al tamaño real del diseño
definitivo.
59. bocetos y wireframes
• Aplicaciones para hacer wireframes:
– Photoshop
– Illustrator
– Balsamiq Mockups
60. bocetos y wireframes
Consejos para Wireframes
• No use color (salvo azul para indicar links)
• Use letra Arial (algunos usan Comic Sans)
• No incluya el logo, íconos ni otra información
gráfica a menos que sea estrictamente
necesaria
• No incluya exceso de detalle: sea simple
63. buscar inspiración
Busca en Google:
• Web design inspiration
• Web design examples
• Web typography examples
64. buscar inspiración
Date una vuelta por
templatemonster.com
(sin prejuicios!)
• Observa los diseños,
mira los detalles
• Encuentra uno similar a
lo que necesitas crear
• No tengas miedo a
imitar lo bueno
65. buscar inspiración
Date otra vuelta por nettuts.com
• Realiza los tutoriales paso a paso
• Aprende nuevas técnicas
• Saca ideas
66. buscar inspiración
Nunca, nunca, nunca dejes de
"vitrinear".
• Mira afiches
• Mira portafolios de amigos y gente
exitosa
• Mira concursos de diseño Web
• Aprende recursos nuevos