Tema crucial y delicado en el diseño web.  Las imágenes son un apartado importantisimo de nuestro contenido, por lo tanto hay que cuidarlo y trabajarlo con esmero.

Lo primero es la organización de nuestro sistema de archivos. Es conveniente que creemos un subdirectorio que se llame imágenes para no mezclar el contenido html con los archivos de imágenes.

Imaginémonos un proyecto  que estamos creando en la carpeta web1.

Dentro de esa carpeta habrá que crear una carpeta que se denomine imagenes. En esa carpeta copiaremos el contenido gráfico que queramos incluir en nuestra web.

La referencia al archivo quedaría de la siguiente forma <img src=”imagenes/archivografico.jpg”>

Tipos de gráficos soportados por la web.

GIF, JPG, PNG

GIF – 256 colores-transparencia

JPG – millones de colores- sin transparencia

PNG – millones de colores  - con transparencia

Estas son las características principales de las imágenes o de los tipos de archivo.

Colores

Los colores en el diseño web han de expresarse según el sistema hexadecimal, es decir hemos de comenzar con el símbolo # y a continuación indicar los tres pares de números hexadecimales que identifican a los tres colores con los que se componen todos los colores.

Explicación del sistema de color de HTML-CSS

• El sistema de colores se basa en el sistema RGB (Red-Green-Blue) (Rojo-verde-azul).
• Un (cualquier) color se compone mezclando distintas intensidades de los tres color,
• Los tres colores se expresan en el sistema hexadecimal.
• sistema hexadecimal (16 números) 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
• El 0 corresponde a la tonalidad más oscura.
• La F a la tonalidad mas clara.
• Así para crear el blanco debemos de poner las tonalidades mas claras del rojo, verde y azul # FF FF FF
• Por lo tanto para crear el negro deberíamos indicar las tonalidades mas oscuras de los tres colores # 00 00 00

Tabla de colores con saltos de 33 en 33 en hexadecimal, observar como al aumentar los números de un par se consigue que predomine un color , en la primera linea observamos tonalidades azules

Muchas veces queremos conseguir un color y tenemos que realizar muchas pruebas hasta conseguir la tonalidad deseada. Pero hay varias utilidades que nos ayudan para este cometido.Si ya tenemos una muestra del color con el programa gratuito colormania podemos realizar lo siguiente:

• Con la herramientas cuenta gotas obtener el código hexadecimal de cualquier color que tengamos en nuestra pantalla.
• Otros códigos de colores como CMYK.
• Copiar el código (no hay que memorizar).
• Realizar variaciones de intensidad y saturación.

Para que suelo utilizar yo esta herramienta.

El principal uso es para conseguir los códigos de colores de los logotipos e imagenes corporativas de las empresas. Una web tiene que ser reflejo de la empresa y de la imagen que ellos entregan a sus clientes.

Así cuando se realiza una web hay que intentar que los colores sean los mismos si así te lo piden. Imaginaros una empresa grande (Repsol, Carrefour, el corte ingles,….) Todos conocemos sus logotipos pero el naranja, el verde, el azul marino de sus logotipos son identificativos de su marca no podemos ponerle otro azul o verde o naranja que sean parecidos.

Descarga la herramienta colormania

os ire pasando nuevos documentos con los códigos actualizados

Hay infinidad de caracteres, letras o símbolos que son únicos en un solo idioma, el caso más claro lo tenemos con nuestra querida “ñ” o con nuestros acentos. Esto caracteres si no lo escribimos según estándar definido solo se verán en los navegadores de los pc’s que estén configurado en nuestro mismo idioma.

Que quiere decir esto, pues que nuestra web no sera legible en un ordenador que este configurado en un idioma distinto al nuestro. Podemos no dar información  correcta potenciales clientes que no estén en nuestro entorno.

Este enlace de wikipedia os mostrara la tabla ver

Ya que hemos descargado nuestra herramienta para el diseño ahora vamos a descargar los visores de nuestro trabajo. Estos visores son los navegadores web, que nos permitirán interpretar  el código que nosotros escribamos. En el cuestionario inicial  os hice una pregunta sobre donde se interpretaba el código html, y este se interpreta en ……

el ordenador del cliente, yo para ver un fichero html no necesito ni de internet ni de nada mas que un navegador web.

Navegadores web recomendados para ir viendo nuestro trabajo, por ahora solo vamos a trabajar en local

• 
• Google Chrome
• Internet Explorer
• Opera
• Safari

Conclusión para nuestro trabajo necesitamos

• un editor con el que crear las paginas web
• un visor o navegador web para ver el trabajo o la web realizada.

Hoy vamos a empezar a utilizar unas herramientas y webs que nos serán necesarias para la realización de nuestro curso. Habrá que descargar una utilidad y que visitar alguna que otra web interesante.Para poder programar o crear el codigo necesitaremos por ahora un editor de textos. Si sois usuarios de windows os recomiendo una aplicación gratuita que es totaledit, es un editor sencillo con diccionario html.

Descargar desde aqui -> Version gratuita

Aunque este en inglés, es un softaware que aporta lo necesario por ahora.

• Numeración de las lineas
• Cierre automático de las etiquetas de html.
• Y agrupamiento o esquematización por zonas o etiquetas.

Si embargo si utilizas linux, con el magnifico editor gedit, tendrás mas que suficiente no habrá que descargar nada.

Para poder realizar webs con textos largos vamos a utilizar una web que nos aporta unos textos muy extendidos y conocidos en el mundo del diseño y maquetación, los textos que empiezan por “Lorem ipsum”. Es una web muy fácil de usar solo le hemos de indicar el número de párrafos o palabras que queremos y el nos entrega el texto, y con el copiar y pegar ya no tenemos que teclear ni rompernos el cerebro en que pongo de texto. Web en español

Para poder añadir una nueva fuente tendremos que buscarla en Internet, despues descargarla, y por último instalarla en las fuentes del sistema.

Donde buscarlas

Aunque es una página en ingles http://www.1001fonts.com es muy fácil de utilizar.

En la derecha tenemos un listado de etiquetas que agrupan las fuentes por tipo: digitales, caligráficas, graffiti, etcétera …. Pinchamos en una categoría y se muestran ejemplos de las fuentes que estan catalogadas en esa categoria.

Descargar y Descomprimir

Una vez que la hemos visto y nos ha gustado nuestra fuente, hacemos un clic sobre la texto de ejemplo formateado con la fuente.

Se abrirá una nueva pagina donde en la parte inferior hay un get para escribir un texto de ejemplo para ver como queda. Yo lo utilizo para comprobar si la fuente soporta los caracteres característicos de nuestro idioma, es decir la ñ, las vocales con tilde.

Una vez comprobado que los caracteres del castellano están soportados  procederemos a descargar la fuente pinchando en el texto que acompaña a la etiqueta download que esta algo mas abajo que el get anterior.

Descargado el archivo descomprimirlo con el botón derecho o realizando un doble clic sobre él. Cuando realices esto no te olvides de apuntar donde lo descomprimes.

Instalar Fuente

Seguir estos pasos

Menu Inicio

Panel de control

Fuentes

Menu Archivo\ Instalar nueva fuente

En el cuadro de dialogo que se abre seleccionar la ruta donde descomprimimos el archivo descargado. Una vez que lo tengamos marcado aparecera nuestra nueva fuente, la marcamos y pulsamos sobre aceptar.

Comprobar la Instalación

Abrimos el procesador de texto y en el cuadro combinado de la fuente buscamos la fuente instalada. y ya podemos usarla.

Aparte de seleccionar una buena fuente, hay muchas posibilidades para resaltar partes de un texto. Entre estas opciones tenemos el texto en negrita, subrayado o en cursiva.Estas son las opciones estándar que nos da el procesador de textos.  Pero si ahondamos un pocoi mas encotraremos mas opciones como el tachado, el relieve, o las letras versales que se diferencian de las mayúsculas en el tamaño de las letras que si estan escritas en mayúscula.

Para acceder a estas opciones de fuente tenemos el menú Formato – Fuente.

Las opciones que activemos se aplicará sobre el texto que tengamos seleccionado o si no tenemos nada seleccionado a partir de donde tengamos el cursor.

Os dejo un ejemplo para que practiqueis. Me permito un consejo con respecto al formato de texto Escribirlo todo y después seleccionar cada texto y formatearlo segun el ejercicio. Nos ahorraremos el doble de trabajo. Piénsalo.

La función tiene tres parámetros

1. La prueba lógica
2. Opción verdadera
3. Opción falsa
   

En el primer parámetro utilizaremos una prueba lógica del tipo edad >=18, donde tenemos una variable edad, un operador lógico >= y una constante 18. Las pruebas lógicas son preguntas que solo se responden con un si o un no.

El segundo parámetro es lo que devolvería la función en el caso que la pregunta fuera correcta. En este caso podríamos escribir Mayor de edad.

El tercer parámetro es lo que devolvería la función en el caso que la pregunta fueses contestada negativamente, entonces en el ejemplo actual escribiríamos Menor de edad.

En Excel o en el OpenOffice Calc, la variable seria la celda que deseamos evaluar, el operador lógico uno de los siguientes:
<    Menor
>    Mayor
<=  Menor e Igual
>=  Mayor e Igual
=    Igual o Identico
<> Distinto
y la constante un valor determinado u otra celda o función.

A continuación se muestran algunos ejemplos de la Función

En el primero hallamos si es mayor o menor de edad, y en el segundo  se realiza un incremento del importe si lleva iva o se deja igual si no lo lleva.