SlideShare a Scribd company logo
1 of 14
Textos - Imágenes
El texto es el elemento central de cualquier sitio Web.
No es lo mismo escribir para la Web que para un escrito
impreso.
Público a quien se dirige
Tipo de público
Formato de hora, fecha y
número de acuerdo al idioma
Lenguaje claro y Sencillo
No usar lenguaje muy
técnico
No usar siglas ni
regionalismos
Usar verbos
Evitar redundancias
Usar tipografía legible
Para visualizar correctamente una fuente de Internet esta debe estar
instalada en el equipo del visitante. Hay una serie de tipografías
instaladas por defecto en prácticamente todos los sistemas operativos,
estas son las tipografías estándares.
Las tipografías estándares son:
Arial
Arial Black
Comic Sans
Georgia
Impact
Lucida console
Lucida Sans unicode
Palatino
Tahoma - Geneva
Times New Roman - Times
Helvatica
Verdana
Tipografías estándares en la Web
No usar imágenes de
fondo
No usar cursivas ni
abusar de las mayúsculas
Usar títulos y subtítulos
Las imágenes que se utilicen en la web, deben estar
enfocadas a los usuarios y a lo que se pretende mostrar.
Se deben utilizar formato eficientes
para las imágenes, por ejemplo para las
fotografías, se puede usar JPG o PNG..
Usar un formato inadecuado puede
doblar o triplicar el tamaño del archivo
y del tiempo de la transferencia desde
el servidor.
El caso de una fotografía digital.
JPG GIF PNG
Jpg con 20% de compresión.
11Kb
Gif con 256 colores.
22 Kb
Png 24 bits.
68 Kb
Vemos que para obtener una calidad similar los tamaños de las imágenes son muy diferentes, en
este caso, lo más adecuado será optar por el formato JPG.
Cuando se redacta la información de la empresa, como “quienes somos”, es
muy importante ser claros en la razón de ser de la empresa. Indicar en palabras
claras y sencillas qué se realiza la empresa, cómo lo hace, quiénes lo hacen y a
quién va dirigido. Observe que la imagen complementa el texto.
Tomado de http://www.dechicos.net/
La tipografía seleccionada para los textos debe ser clara y legible. En
este caso el tipo de fuente es muy pequeña, además al texto le
aplicaron una especie de sombra que hace no sea muy legible. Además
quisieron dar énfasis en los productos que ofrecen, colocando el texto
más oscuro, con esto el usuario no leerá todo el párrafo sino que
enfocara la lectura en este texto.
Tomado de http://creatividaddigital.com.ar/portfolio/raffo/
Cuando un sitio web ofrece productos o servicios, las imágenes a utilizar
deben ser reales, donde se observen las particularidades del mismo. En
este caso la imagen no es muy óptima, ni describe muy bien el producto.
Esta imagen esta acompañada de un texto explicando las características
de la cuna. Los párrafos están divididos por títulos, el principal tiene una
tipografía más grande que las demás, y los subtítulos tienen un color
diferente o tienen negrita.
Tomado de http://www.dechicos.net/
Una buena galería Web debe mostrar al posible comprador el producto
desde diferentes perspectivas. En este caso el sitio ofrece imágenes
desde diferentes ángulos del morral. Además muestra una imagen de
cómo se debe llevar puesto el morral. Como novedad esta pagina
permite al usuario hacer un zoom sobre la imagen para observar mas de
cerca los acabados del morral. Contiene las características de éste y su
precio. También contiene opciones para agregar al carrito de compras,
o a una lista de deseos y la opción para comentar sobre el producto.
Tomado de: http://www.totto.com/co/totto
En este ejemplo se puede observar los
zapatos desde diferentes ángulos, haciendo
clic en las imágenes en miniatura de la parte
inferior. Además muestra las tallas
disponibles. Pero no tiene las características
del producto, como materiales o colores
disponibles.
Tiene la opción de agregar al carrito de
compra y de redes sociales.
Tomado de: http://velez.dafiti.com.co/

More Related Content

What's hot (20)

Estudio de mercado
Estudio de mercadoEstudio de mercado
Estudio de mercado
 
Estudio de mercado moliss
Estudio de mercado molissEstudio de mercado moliss
Estudio de mercado moliss
 
Reticulas digitales
Reticulas digitalesReticulas digitales
Reticulas digitales
 
Prueba
PruebaPrueba
Prueba
 
sesion 9
sesion 9sesion 9
sesion 9
 
Prueba
PruebaPrueba
Prueba
 
Sesión 09 ci
Sesión 09 ci Sesión 09 ci
Sesión 09 ci
 
Estudio de mercado
Estudio de mercado Estudio de mercado
Estudio de mercado
 
Prueba de texto n°08
Prueba de texto n°08Prueba de texto n°08
Prueba de texto n°08
 
Prueba de texto n°04
Prueba de texto n°04Prueba de texto n°04
Prueba de texto n°04
 
Prueba de texto n°09
Prueba de texto n°09Prueba de texto n°09
Prueba de texto n°09
 
Prueba de texto n°06
Prueba de texto n°06Prueba de texto n°06
Prueba de texto n°06
 
Prueba de texto n°01
Prueba de texto n°01Prueba de texto n°01
Prueba de texto n°01
 
Prueba de texto n°03
Prueba de texto n°03Prueba de texto n°03
Prueba de texto n°03
 
Prueba de texto n°07
Prueba de texto n°07Prueba de texto n°07
Prueba de texto n°07
 
Prueba de texto n°02
Prueba de texto n°02Prueba de texto n°02
Prueba de texto n°02
 
Prueba de texto n°10
Prueba de texto n°10Prueba de texto n°10
Prueba de texto n°10
 
secion 9
secion 9secion 9
secion 9
 
Informe octubre version 1
Informe octubre version 1Informe octubre version 1
Informe octubre version 1
 
Rand 23
Rand 23Rand 23
Rand 23
 

Viewers also liked

Reglas para pantallas, tipografía y color
Reglas para pantallas, tipografía y colorReglas para pantallas, tipografía y color
Reglas para pantallas, tipografía y colorYudyliher
 
Reglas Para Pantalla, Tipografia & Color
Reglas Para Pantalla, Tipografia & ColorReglas Para Pantalla, Tipografia & Color
Reglas Para Pantalla, Tipografia & ColorNombre Apellidos
 
Adobe Illustrator
Adobe IllustratorAdobe Illustrator
Adobe Illustratornaoteking
 
Tipografia web
Tipografia webTipografia web
Tipografia webaldiablo
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorderc1988
 
DiseñO Tipografia Presentacion 2
DiseñO Tipografia Presentacion 2DiseñO Tipografia Presentacion 2
DiseñO Tipografia Presentacion 2lttrini
 
Color y tipografía
Color y tipografíaColor y tipografía
Color y tipografíablogsandra10
 
Tipografia y color
Tipografia y colorTipografia y color
Tipografia y colorErika Nieto
 
DiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y TipografiaDiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y TipografiaRubens Yanes
 
Tipografia para Web - Plau Branding, Type & Design.
Tipografia para Web - Plau Branding, Type & Design.Tipografia para Web - Plau Branding, Type & Design.
Tipografia para Web - Plau Branding, Type & Design.Plau
 
Tipografia y color
Tipografia y colorTipografia y color
Tipografia y colorleonieto937
 
Tipografía y color
Tipografía y colorTipografía y color
Tipografía y colorThomas Kbzoo
 
Trabajo de tipografia
Trabajo de tipografiaTrabajo de tipografia
Trabajo de tipografiaozle rivera
 
La importancia de la tipografía en el diseño gráfico
La importancia de la tipografía en el diseño gráficoLa importancia de la tipografía en el diseño gráfico
La importancia de la tipografía en el diseño gráficoAzury Moya
 
El color en diseño gráfico y periodístico
El color en diseño gráfico y periodísticoEl color en diseño gráfico y periodístico
El color en diseño gráfico y periodísticoRafael Carrasco
 
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB""Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB"ogms
 
Concepto, tipos y uso de la tipografía
Concepto, tipos y uso de la tipografíaConcepto, tipos y uso de la tipografía
Concepto, tipos y uso de la tipografíaRafael Carrasco
 
El uso correcto de la tipografía para un diseño eficaz
El uso correcto de la tipografía para un diseño eficazEl uso correcto de la tipografía para un diseño eficaz
El uso correcto de la tipografía para un diseño eficazPatricia Juberias
 

Viewers also liked (18)

Reglas para pantallas, tipografía y color
Reglas para pantallas, tipografía y colorReglas para pantallas, tipografía y color
Reglas para pantallas, tipografía y color
 
Reglas Para Pantalla, Tipografia & Color
Reglas Para Pantalla, Tipografia & ColorReglas Para Pantalla, Tipografia & Color
Reglas Para Pantalla, Tipografia & Color
 
Adobe Illustrator
Adobe IllustratorAdobe Illustrator
Adobe Illustrator
 
Tipografia web
Tipografia webTipografia web
Tipografia web
 
Reglas para pantalla tipografia y color
Reglas para pantalla tipografia y colorReglas para pantalla tipografia y color
Reglas para pantalla tipografia y color
 
DiseñO Tipografia Presentacion 2
DiseñO Tipografia Presentacion 2DiseñO Tipografia Presentacion 2
DiseñO Tipografia Presentacion 2
 
Color y tipografía
Color y tipografíaColor y tipografía
Color y tipografía
 
Tipografia y color
Tipografia y colorTipografia y color
Tipografia y color
 
DiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y TipografiaDiseñO Nociones Color Y Tipografia
DiseñO Nociones Color Y Tipografia
 
Tipografia para Web - Plau Branding, Type & Design.
Tipografia para Web - Plau Branding, Type & Design.Tipografia para Web - Plau Branding, Type & Design.
Tipografia para Web - Plau Branding, Type & Design.
 
Tipografia y color
Tipografia y colorTipografia y color
Tipografia y color
 
Tipografía y color
Tipografía y colorTipografía y color
Tipografía y color
 
Trabajo de tipografia
Trabajo de tipografiaTrabajo de tipografia
Trabajo de tipografia
 
La importancia de la tipografía en el diseño gráfico
La importancia de la tipografía en el diseño gráficoLa importancia de la tipografía en el diseño gráfico
La importancia de la tipografía en el diseño gráfico
 
El color en diseño gráfico y periodístico
El color en diseño gráfico y periodísticoEl color en diseño gráfico y periodístico
El color en diseño gráfico y periodístico
 
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB""Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
 
Concepto, tipos y uso de la tipografía
Concepto, tipos y uso de la tipografíaConcepto, tipos y uso de la tipografía
Concepto, tipos y uso de la tipografía
 
El uso correcto de la tipografía para un diseño eficaz
El uso correcto de la tipografía para un diseño eficazEl uso correcto de la tipografía para un diseño eficaz
El uso correcto de la tipografía para un diseño eficaz
 

Similar to Contenido web manejo tipografico

PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...3186841042
 
Recomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxRecomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxJohanna767825
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 eaybeth9414
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad webDomestika
 
Edisson te amo monton.docx y yo tre amo mas princesa bueno muami soly luna
Edisson te amo monton.docx y yo tre amo mas princesa bueno muami soly lunaEdisson te amo monton.docx y yo tre amo mas princesa bueno muami soly luna
Edisson te amo monton.docx y yo tre amo mas princesa bueno muami soly lunamegaandrea
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4lilibethmirand
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4lilibethmirand
 
Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaCelina Valenzuela
 
Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104guillermohernadez3104
 
Introducción a NVU
Introducción a NVUIntroducción a NVU
Introducción a NVUrestauracio
 
Principios
PrincipiosPrincipios
Principiosniko a
 
Introducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginasIntroducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginaspaoloarevaloortiz
 

Similar to Contenido web manejo tipografico (20)

PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
 
Recomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxRecomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptx
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 e
 
Paginas web
Paginas webPaginas web
Paginas web
 
Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Libro diseno
Libro disenoLibro diseno
Libro diseno
 
Edisson te amo monton.docx y yo tre amo mas princesa bueno muami soly luna
Edisson te amo monton.docx y yo tre amo mas princesa bueno muami soly lunaEdisson te amo monton.docx y yo tre amo mas princesa bueno muami soly luna
Edisson te amo monton.docx y yo tre amo mas princesa bueno muami soly luna
 
Manual de word
Manual de wordManual de word
Manual de word
 
Procesador de textos Word
Procesador de textos Word Procesador de textos Word
Procesador de textos Word
 
Procesador de textos Word
Procesador de textos WordProcesador de textos Word
Procesador de textos Word
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4
 
Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_Valenzuela
 
Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104
 
Pasos
PasosPasos
Pasos
 
Pasos
PasosPasos
Pasos
 
Introducción a NVU
Introducción a NVUIntroducción a NVU
Introducción a NVU
 
Principios
PrincipiosPrincipios
Principios
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Introducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginasIntroducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginas
 

Contenido web manejo tipografico

  • 2. El texto es el elemento central de cualquier sitio Web. No es lo mismo escribir para la Web que para un escrito impreso.
  • 3. Público a quien se dirige Tipo de público Formato de hora, fecha y número de acuerdo al idioma
  • 4. Lenguaje claro y Sencillo No usar lenguaje muy técnico No usar siglas ni regionalismos
  • 6. Para visualizar correctamente una fuente de Internet esta debe estar instalada en el equipo del visitante. Hay una serie de tipografías instaladas por defecto en prácticamente todos los sistemas operativos, estas son las tipografías estándares. Las tipografías estándares son: Arial Arial Black Comic Sans Georgia Impact Lucida console Lucida Sans unicode Palatino Tahoma - Geneva Times New Roman - Times Helvatica Verdana Tipografías estándares en la Web
  • 7. No usar imágenes de fondo No usar cursivas ni abusar de las mayúsculas Usar títulos y subtítulos
  • 8. Las imágenes que se utilicen en la web, deben estar enfocadas a los usuarios y a lo que se pretende mostrar. Se deben utilizar formato eficientes para las imágenes, por ejemplo para las fotografías, se puede usar JPG o PNG.. Usar un formato inadecuado puede doblar o triplicar el tamaño del archivo y del tiempo de la transferencia desde el servidor.
  • 9. El caso de una fotografía digital. JPG GIF PNG Jpg con 20% de compresión. 11Kb Gif con 256 colores. 22 Kb Png 24 bits. 68 Kb Vemos que para obtener una calidad similar los tamaños de las imágenes son muy diferentes, en este caso, lo más adecuado será optar por el formato JPG.
  • 10. Cuando se redacta la información de la empresa, como “quienes somos”, es muy importante ser claros en la razón de ser de la empresa. Indicar en palabras claras y sencillas qué se realiza la empresa, cómo lo hace, quiénes lo hacen y a quién va dirigido. Observe que la imagen complementa el texto. Tomado de http://www.dechicos.net/
  • 11. La tipografía seleccionada para los textos debe ser clara y legible. En este caso el tipo de fuente es muy pequeña, además al texto le aplicaron una especie de sombra que hace no sea muy legible. Además quisieron dar énfasis en los productos que ofrecen, colocando el texto más oscuro, con esto el usuario no leerá todo el párrafo sino que enfocara la lectura en este texto. Tomado de http://creatividaddigital.com.ar/portfolio/raffo/
  • 12. Cuando un sitio web ofrece productos o servicios, las imágenes a utilizar deben ser reales, donde se observen las particularidades del mismo. En este caso la imagen no es muy óptima, ni describe muy bien el producto. Esta imagen esta acompañada de un texto explicando las características de la cuna. Los párrafos están divididos por títulos, el principal tiene una tipografía más grande que las demás, y los subtítulos tienen un color diferente o tienen negrita. Tomado de http://www.dechicos.net/
  • 13. Una buena galería Web debe mostrar al posible comprador el producto desde diferentes perspectivas. En este caso el sitio ofrece imágenes desde diferentes ángulos del morral. Además muestra una imagen de cómo se debe llevar puesto el morral. Como novedad esta pagina permite al usuario hacer un zoom sobre la imagen para observar mas de cerca los acabados del morral. Contiene las características de éste y su precio. También contiene opciones para agregar al carrito de compras, o a una lista de deseos y la opción para comentar sobre el producto. Tomado de: http://www.totto.com/co/totto
  • 14. En este ejemplo se puede observar los zapatos desde diferentes ángulos, haciendo clic en las imágenes en miniatura de la parte inferior. Además muestra las tallas disponibles. Pero no tiene las características del producto, como materiales o colores disponibles. Tiene la opción de agregar al carrito de compra y de redes sociales. Tomado de: http://velez.dafiti.com.co/