En la entrada No te asocies con otros startups ya exponía mi punto de vista el trabajo con otras empresas pequeñas. Matt Coffin habla sobre el tema con Jason Calacanis en el podcast TWIST de un modo muy similar.
Matt Coffin: Una de mis leciones más importantes y que ví una y otra vez cuando estabamos en el inicio de la evolución de Lower My Bills. Dos empresas jovenes trabajando juntas ... Muy doloroso, Muy doloroso... ¿Quién esta al mando? ¿Mi Idea? ¿Tu idea? ¿Como funciona todo esto junto?. Dos empresas pequeñas no deberían trabajar nunca juntas. Es tan doloroso.
Jason Calacanis: Las asociaciones me parecen como una gran perdida de tiempo para las startups, a no ser que seas un negociador genial.
Un Informe de diseño Web (Web Design Brief) es un documento generado normalmente por las empresas que quieren realizar un proyecto Web para explicar a las agencias de diseño Web el alcance de su proyecto. Tal y como se menciona en el libro Website Owner's Manual, un informe de diseño Web debe incluir siempre los siguientes puntos.
Contexto
Un informe efectivo debe ofrecer información previa sobre el proyecto. En este apartado se debe incluir siempre la audiencia a la se quiere llegar con la Web, información sobre la empresa, objetivos del proyecto e información sobre la competencia.
Requisitos y Entregables
Aquí se deben incluir los detalles sobre el presupuesto, los plazos de entrega, los nivel de accesibilidad, en que consisten los entregables y la propiedad de éstos.
Información sobre la agencia de diseño Web
El cliente debe especificar en su informe la información que quiere recibir sobre la agencia de diseño Web. Debe especificar si quiere recibir un listado de proyectos anteriores, un listado del personal que estará involucrado en el proyecto Web, referencias a otros clientes etc.
Lamentablemente, a menudo no recibimos este tipo de informe de nuestros clientes. Yo mismo he cometido el error de prepar presupuestos sin recibir un informe detallado por parte del cliente. Me he lanzado a preparar un presupuesto habiendo recibido sólo una llamada de trabajo donde se me pedía el envío de un presupuesto para el rediseño de una Web. Nuestros clientes no tienen a menudo preparado un informe sobre el proyecto que quieren acometer. Por esto en Softamo, mi agencia de diseño Web, ponemos a disposición un cuestionario de ideas para que nuestros clientes lo rellenen y nos lo envíen. Tanto si decide encargar este proyecto a nosotros o a otra empresa el tiempo empleado en rellenar este documento le ayudará a definir con mayor profundidad su proyecto. Piense en este documento como un plan de negocios para su pagina Web.
Una parte interesada, stakeholder en ingles, es alguien con un interés personal en el portal Web. Hablar con las partes interesadas mientras se planifica un portal Web es una forma muy valiosa de ganar un contexto más amplio sobre el proyecto. A menudo los diseñadores y desarrolladores no involucramos a las partes interesadas antes del inicio del proyecto y durante el desarrollo del mismo. No saben nada de la Web, nos decimos. Sin embargo, un portal Web debe ayudar a las partes interesadas a alcanzar sus objetivos de negocio (por ejemplo: vender más, facilitar sus tareas del día a día ...). Su comentarios nos ayudaran a modelar la visión del portal Web.
A menudo realizo portales Webs para municipios. Hablar con el personal del ayuntamiento y no sólo el alcalde puede ofrecer un valioso punto de vista. Cuando se trata de un rediseño, no hay nadie como los usuarios actuales de la Web actual para apuntar las deficiencias a subsanar por el rediseño. Por ejemplo:
Comentario de la parte interesada
Acción generada
Muchos ciudadanos vienen a pedir formularios para realizar obras u otros procesos administrativos.
Crear una página donde los ciudadanos se puedan descargar formularios. El personal del ayuntamiento debe ser capaz de gestionar los formularios en dicha página.
La oficina de información turística sólo abre los fines de semana. Nos llama mucha gente pidiendo que le enviemos información turística.
Crear una sección llamada turismo dentro de la página donde los visitantes puedan consultar la oferta gastronómica, de alojamientos y monumental del municipio.
Hay mucha gente que llama para preguntar los teléfonos de determinados departamentos del ayuntamiento. Por ejemplo, facturación o urbanismo.
Crear un listado telefónico donde los usuarios puedan encontrar facilmente lo que buscan.
Tras repetir este proceso con otras partes interesadas en el proyecto, podemos construirnos una imagen de como el portal Web puede ayudar a la organización a alcanzar sus objetivos de negocio.
Entrevistar a las partes interesadas tiene también un beneficio político. Una de las principales causas para la dilatación de un proyecto son las objeciones de las partes interesadas. En el caso de los ayuntamientos, si el alcalde o algún concejal tiene un problema con el resultado del proyecto Web, este no progresará. Probablemente, una de las razones por las que tiene objeciones es por que no ha sido consultados durante el proceso.
Las conversaciones con las partes interesadas durante la fase de planificación, nos permiten lograr dos cosas. Por un lado, identificamos las objeciones iniciales que las diferentes partes puedan tener, dándonos la oportunidad de solventarlas antes que puedan resultar en un conflicto. Por otro lado, permitimos a las partes interesadas expresar sus inquietudes y necesidades. Esto les hará sentirse involucrados en el proceso. Si alguien ha sido consultado, es menos probable que tenga problemas u objeciones más adelante.
Llevar a cabo un series de entrevistas con las partes interesadas es sencillo. Yo recomiendo que estas sean individuales ya que esto facilitará que la otra parte sea honesta. Un empleado de un ayuntamiento puede verse coartado a expresarse libremente delante de un superior. Si es posible, recomiendo que estas sean presenciales. Normalmente con 45 minutos será suficiente. Es importante dejar tiempo entre sesión y sesión en caso que alguna entrevista se prolongue. Es importante dejar las partes interesadas cubran todos los temas de su interés.
Lo que se cubre en cada una de estas entrevistas dependende enteramente de cuanto conozcamos a la otra persona y su función en el organigrama de la organización. Aquí hay algunas sugerencias:
Punto a tratar
Razones para incluir esta pregunta
Hableme de su papel en la organización y en la función de su departamento.
Esta demanda proporciona un contexto a la conversación. Ayuda a identificar areas que vale la pena tratar en mayor profundidad.
Hábleme sobre sus tareas del día a día y como las realiza.
Nos ayuda a crear una imagen de las tareas de trabajo del entrevistado e identifica que areas del portal Web pueden ayudar o dificultar estas tareas.
¿Qué partes de su trabajo llevan mas tiempo y son más exigentes?
Preguntando sobre las exigencias y desafíos, podrías descubrir modos en que las tecnologías Web pueden ayudar a realizar esas tareas de un modo más eficiente.
¿Con que tipo de datos o programas trabajas habitualmente?
Preguntar sobre datos y programas nos puede ofrecer información y documentos (ej: formularios) que pueden ser usados en la Web.
Háblame de lo que piensa de la página Web actual y como podría ser mejorada.
Oir los comentarios de las partes interesadas sobre el portal Web actual es valiosisimo y tiene una aplicación directa obvia. Más aún, hace que las partes interesadas sientan que sus opiniones son valoradas.
El objetivo de una parte interesada es cumplir su papel dentro de los objetivos de la organización. Las entrevistas nos ayudan a identificar las áreas donde el portal Web puede ayudar a esta persona en esta tarea.
Este tema se trata con mayor profundidad en el segundo capítulo del libro de Paul Boag, Website Owner's Manual. Te recomiendo este libro si eres un diseñador de paginas Web o gestionas algún portal.
Hay muchas técnicas para mejorar la posición de su portal en Google pero podríamos dividirlas en tres categorías.
Mejorar la construcción del portal
Mejorar la accesibilidad de los contenidos ofrecidos en nuestro portal repercute positivamente en la posición obtenida dentro de los diferentes buscadores. Evitar el uso de contenidos de difícil acceso para buscadores (ej. Adobe Flash), usar un código HTML semántico, usar atributos como ALT y TITLE en el código de imágenes y enlaces logra que nuestro portal sea más fácil de indexar. Sin embargo, aunque las técnicas mencionadas facilitan la inclusión del contenido de nuestro portal en el índice de Google, no hacen que aparezcan en el mismo en primer lugar.
Los siguientes pasos hacen que Google (u otros motores de búsqueda) descubra el contenido de nuestro portal.
Crear una jerarquía clara. Cada página tiene que ser accesible al menos desde otra página del portal.
Usar enlaces textuales. Los enlaces entre páginas deben ser textuales en vez de imágenes, Flash u otras tecnologías de difícil acceso.
Usar direcciones de Internet (URLs) cortas. - Algunas direcciones de Internet son generadas automáticamente, por ejemplo, en aquellos portales que usan un gestor de contenido (CMS). Los direcciones cortas, con menos parámetros (caracteres después del símbolo ? en la barra de direcciones), son más propensas a ser encontradas por buscadores y usuarios
Notificar de la existencia del portal y enviar un mapa del mismo a Google. La notificación de la existencia del mismo puede acelerar la inclusión de su portal para ser indexado. Dicha notificación y el envío un mapa del portal ayudan a Google a aprender la estructura del portal y aumentar el número de páginas indexadas.
Llegados al punto que los motores de búsqueda puedan acceder a su portal, necesita ocuparse del contenido del mismo.
Mejorar el contenido del portal
La consideración más importante durante la producción del contenido es la inclusión de términos de búsqueda. Antes de escribir una página debe estar claro lo que queremos transmitir a nuestros visitantes y los posibles términos de búsqueda usados por ellos para encontrar dicho contenido. A continuación, debemos incorporar dichos términos de un modo natural al contenido de la página, atributos ALT de las imágenes y al título de la misma. Es importante no abusar del uso de términos de búsqueda. Dos o tres por página es adecuado. Usar más, puede resultar en un contenido más complejo y de mayor dificultad de lectura. Más aún, el ranking individual de cada término puede verse reducido. No se debe llenar la página de términos de búsqueda, ya que podemos ser penalizados. Los términos de búsqueda deben ser incorporados de un modo natural en el contenido.
Lo más importante es crear contenido de calidad. Si el contenido esta bien escrito y es interesante atraerá a visitantes y por lo tanto a enlaces que redundaran en una mejor posición en los motores de búsqueda.
Fomentar los enlaces de calidad
Probablemente usted haya oído que Google clasifica los portales en función del número de enlaces entrantes. Google clasifica parcialmente los páginas basándose en el número de portales que enlazan a ellas. Pero no sólo en la cantidad de enlaces, también la calidad y relevancia de los mismos. Google analiza un número de factores (temática del portal que enlaza, texto que aparece en el enlace, popularidad del portal que enlaza, reputación del portal que enlaza ...)
Normalmente no merece la pena el intercambio de enlaces con otros portales salvo que éstos vengan de portales de calidad con un contenido relevante respecto al de nuestro portal.
Desconfíe de las empresas que le prometan el Nº 1 en Google
Desconfíe de empresas que le garantizan un ranking concreto. Si una empresa le promete que será número uno en Google, pregunte más información. Es relativamente fácil conseguir que un portal aparezca número uno en Google para un término de búsqueda poco conocido. Sin embargo, es mucho más complicado conseguir ser número uno en Google para algo útil desde una perspectiva de marketing.
Pregunte también, ¿Que pasa si dicha empresa fracasa en dicha promesa? ¿Le devolverá parte del contrato?. La respuesta es probablemente no.
Finalmente, pregunte al encargado de dicha empresa que le explique que técnicas se van a usar. Si son evasivos con las respuestas, desconfíe.
Si descubre las técnicas que van a usar, podrá juzgar si la utilización de dichas técnicas pone a su portal en peligro de ser añadido a la listas negra de Google. La inclusión en dichas listas podría suponer incluso la supresión de su portal en los resultados de búsqueda. Técnicas consideradas ilegales por Google son entre otras:
Esta entrada pretende ser un ejercicio para aquellos que tras leer la primera entrada de la serie Curso de Diseño Web, ¿Cómo funciona la Web?, quieran ejercitar lo aprendido.
Imagine que el dueño del cabaret café (un elegante café situado en el teatro Antonio Buero Vallejo de Guadalajara) le pasa esta servilleta con un listado de los cafes que se ofrecen en su local. Quiere que le hagas una página Web sencilla.
Tareas
Abrir un archivo en su editor preferido (Notepad, Textmate, ...)
Escribir dentro del mismo el menú que nos paso el dueño del cabaret Café en la servilleta. Sin la nota en la esquina superior derecha.
Grabarlo como index.html
Abrir el archivo index.html en un navegador
Debería ver algo como lo mostrado en la siguiente imagen
Como puede ver es necesario etiquetar nuestra primera página en HTML. Añada HTML a su archivo y debería ver algo así:
Sin no sabe como hacerlo puede descargar un archivo ZIP con el archivo HTML.
La siguiente tarea es añadir algo de estilo. Intente que su página quede como en la siguiente imagen. Puede descargar un archivo ZIP con el archivo HTML que incluye el código CSS con la solución.
Usamos los siguiente elementos HTML para crear tablas
Use la etiqueta <table> para empezar una tabla.
Cada elemento <tr> es una fila.
Cada elemento <th> es una celda cabecera.
Cada elemento <td> es una celda.
Mejorar la usabilidad de las tablas
El atributo summary no se muestra en la página Web. Este atributo se usa exclusivamente para mejorar accesibilidad y actúa como un texto alternativo que los lectores de pantalla puede leer en voz alta a un usuario para describir la tabla.
<table summary="Descripción de la tabla" ></table>
El elemento caption, por otro lado, se muestra como pie de tabla; sin embargo por defecto, la mayoría de los navegadores la muestran encima de la tabla. La posición de este elemento la podemos controlar con CSS.
Celdas
El modelo de caja en CSS también tiene se usa para representar tablas tal y como se muestra en el siguiente gráfico.
No existe un margen como en el tradicional modelo de cajas; sin embargo podemos usar la propiedad border-spacing para separar nuestras celdas. A menudo nos va interesar que los bordes de las celdas se representen como uno sólo. Para ello usaremos la propiedad CSS border-collapse.
border-collapse: collapse;
Podemos aplicar otras propiedades CSS para dar estilo a nuestras tablas. Por ejemplo, si queremos que nuestras celdas cabecera tengan un color de fondo escribiríamos:
th { background-color: #cc6600;}
En HTML podemos anidar unas tablas dentro de otras y podemos hacer que celdas ocupen varias filas o columnas gracias a los atributos rowspan y colspan. El siguiente ejemplo, donde se usan los atributos mencionados en este artículo, muestra código HTML, CSS y como quedaría en un navegador.
Código HTML:
<table summary="Esta tabla contien los datos adquiridos durante mi viaje para la serie un país en la mochila. He incluido ifnormación sobre las ciudades visitadas,
la fecha de visita, la altitud, población y un ranking de la calidad de las cenas que allí disfrute."><caption>Ciudades que visite durante mi viaje por españa</caption><tr><th>Ciudad</th><th>Fecha</th><th>Temperatura</th><th>Altitud</th><th>Población</th><th>Ranking Cena</th></tr><tr><td rowspan="2">El Baixo Miño (Galicia)</td><td>Agosto 2, 1995</td><td>23º</td><td rowspan="2">200 m</td><td rowspan="2">2.000</td><td>5/5</td></tr><tr><td>Septiembre 2, 1995</td><td>15º</td><td>4/5</td></tr><tr><td>El Maestrazgo de Teruel</td><td>Junio 2, 1995</td><td>20º</td><td>1.300 m</td><td>500</td><td>3/5</td></tr><tr><td>El Priorato Tarragona</td><td>Mayo 1, 1995</td><td>18º</td><td>700m</td><td>800</td><td><table><tr><th>Labordeta</th><td>4/5</td></tr><tr><th>M.Prats</th><td>2/5</td></tr></table></td></tr></table>
Con el atributo list-style-type podemos cambiar la representación (una rayita, un circulo ...) que simboliza cada elemento de nuestras listas. Podemos utilizar las siguientes palabras clave:
disc
circle
square
none
Podemos usar incluso una imagen propia para adornar cada elemento de nuestras listas. Imagine por ejemplo una lista de documentos PDF. Podemos colocar un pequeño icono PDF al comienzo de cada elemento usando la propiedad CSS list-style-image.
Las tablas HTML se usan para estructurar información tabular.
Use los elementos de tabla HTML: <table>, <tr>, <th> y <td>, juntos para crear una tabla.
El elemento <table> define y rodea la tabla completa.
Cada fila contiene una o más celdas de datos definidas con <td>.
Use el elemento <th> para las celdas de dato que esten en filas o columnas cabeceras.
Las tablas se trazan en una parrilla. Cada fila corresponde a un <tr>...</tr> en tu HTML, y cada columna corresponde al contenido <td>...</td> en las filas.
Puede facilitar información adicional sobre sus tablas con el atributo summary y el element<caption>
Las celdas de las tablas tiene interlineado, espacio entre bordes, que es el espacio entre celdas.
Del mismo modo que puedes controlar el interlineado, bordes y márgenes de otros elementos, puedes controlar el interlineado, borde y espacio entre bordes de las celdas de una tabla en CSS
La propiedad border-collapse es una propiedad especial para tablas de CSS que permite combinar los bordes de celda en un borde simple para un aspecto más simple
Puede cambiar la justificación de los datos en las celdas de sus tablas con las propiedades de CSS text-align y vertical-align
Puedes añadir color a tus tablas con la propiedad background-color. El color de fondo puede ser añadido a la tabla completa, a una sola fila o a una simple celda
Si no tiene datos para una celda, no ponga contenido en el elemento <td>. Sin embargo, necesita usar el elemento <td>...</td> para mantener la justificación de la tabla
Si necesita que una celda ocupe varias filas o columnas, puede usar los atributos rowspan o colspan del elemento <td>
Puedes anidar tablas dentro de tablas posicionando el elemento tabla y todo su contenido dentro de una celda.
Las tablas se deben usar para información tabular, no para diseñar sus páginas. Use CSS para lograr posicionamientos con múltiples columnas.
list-style-type permite cambiar el tipo del marcador que usamos en las listas.
list-style-image permite especificar una imagen como un marcador de lista.
Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.
En la siguiente imagen se muestra el llamado modelo de caja en HTML. Por cada elemento de HTML hay tres características optativas margen, interlineado y borde. Controlamos la visualización de estas características por medio de las propiedades de CSS margin, padding y border. El texto es lo que llamaríamos área de contenido.
Color del border
Use la propiedad border-color para especificar el color del borde. Puedes usar cualquiera de los métodos comunes para definir color. Las siguientes tres lineas de código son equivalentes:
Las siguientes lineas son equivalente pero usan notación compacta. La notación compacta da cuatro valores que siguen el movimiento de las agujas del reloj (arriba, derecha, abajo, izquierda). Si tanto los valores de arriba y abajo como los de izquierda y derecha son iguales, podemos usar una notación aún más compacta como se muestra abajo.
padding: 0px 20px 0px 20px; padding: 0px 20px;
Imágenes de fondo
Para lograr unos diseños más impactantes se usan a menudo imágenes de fondo. La propiedad background-image nos permite referenciar la imagen que vamos a usar como fondo. La propiedad background-repeat nos permite indicar si la imagen se va a repetir. Podemos, por ejemplo, repetir un patrón y lograr un efecto muy vistoso. La propiedad background-position nos indica donde posicionar nuestra imagen de fondo (por ejemplo, coloca la imagen arriba a la izquierda). Las siguientes lineas de código muestran como usar estas propiedades.
background-image: url(imagenes/background.gif); background-repeat: no-repeat; background-position: top left;
Atributo Class
A menudo necesitamos aplicar a un estilo a varios elementos. Imaginemos que tenemos un listado de nombres de alumnos y direcciones de email. Si queremos que el nombre de los alumnos aparezca en negrita podemos marcar todos los nombres de alumnos como pertenecientes a la clase "nombreDeAlumno" y aplicar un estilo a esta clase. En la vida real podemos asemejar clases con la pertenencia a clubs. Podemos pertenencer a varios (club de montaña, club de cocina) o a ninguno. En HTML usamos el atributo class para designar la pertinencia de un elemento a una clase. Los siguiente puntos describen el uso de este atributo.
Use el atributo class para añadir elementos a una clase.
Use en CSS un . entre el nombre del elemento y la clase para especificar el elemento de la clase.
Use en CSS .nombreDeLaClase para seleccionar todos los elementos que pertenecen a la clase.
Cualquier elemento puede pertenecer a más de una clase. Para ello colocamos el nombre de las clases separado por espacios en el atributo class.
Atributo ID
Similar al atributo class, se puede usar el atributo ID en todos los elementos HTML. La diferencia es que cada elemento puede tener sólo un id y este deber ser único para la página; sólo puedes tener un elemento en tu página con id "pieDePagina". El atributo id debe empezar con una letra y ser seguido sólo por letras y dígitos. No se permiten espacios o caracteres especiales.
<p id="pieDePagina">Gracias por su visita</p>
Class y ID en CSS
Los siguiente ejemplos muestran el uso de clases y identificadores en CSS.
Selecciona sólo párrafos que pertenecen a la clase oferta
p.ofertas { color: red;}
Selecciona todos los elementos que pertenecen a la clase oferta
.ofertas { color: red;}
Esto selecciona todo los elementos que tengan un id pieDePagina
#pieDePagina { color: red; }
Selecciona un elemento <p> si tiene el id pieDePagina
p#pieDePagina { color: red; }
Elemento DIV
<div> es un elemento que sirve para agrupar elementos de bloque. Normalmente un elemento div viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento div en nuestro CSS. El siguiente ejemplo ilustra el uso de un elemento div. Imagina que estamos construyendo una página Web para un bar de nuestra ciudad. En esta se ofrece un listado de los cocteles que el bar ofrece. Cada coctel tiene una cabecera, una imagen y una descripción. Si quisiéramos dar un estilo común a todos nuestro cócteles. Por ejemplo una imagen de fondo o un borde necesitaríamos agruparlos con un div. El siguiente código ilustra esto:
<div id="coctelAmarillo" class="coctel"><p><img src="images/yellow.gif" alt="Bebida brisa de limón" /></p><h3>Brisa de Limón</h3><p>Nuestro coctel más sano, combina hierbas, minerales, vitaminas y un toque de limón. Creaun concentrado de limón que nos ayudará a mantener altas las defensas.</p></div>
Elemento SPAN
<span> es un elemento que sirve para agrupar elementos en linea y texto. Normalmente un elemento span viene acompañado de atributos id o class. Usamos estos atributos para referenciar el elemento span en nuestro CSS. El siguiente ejemplo, ilustra el uso del elemento span. Imaginemos una lista de artistas y álbumes. Si queremos que el nombre del artista aparezca en negrita y el nombre del álbum en cursiva. Podemos rodear los nombres de artista y álbumes con span y usar clases para referenciar el estilo como se muestra en el siguiente código.
Podemos especificar diferentes hojas de estilos dependiendo del medio (teléfono móvil, impresora, pantalla) desde el cual se acceda a nuestra página . El atributo media te permite especificar para que tipo de dispositivo se usará la hoja de estilos referenciada. Si no proporcionamos un atributo media, el estilo se usará para todos los dispositivos.
CSS usa un modelo de caja para controlar como se muestran sus elementos.
Las cajas consisten en una área de contenido y un interlineado, borde y margen opcionales.
El área de contenido contiene el contenido del elemento
El interlineado se usa para crear espacio visual alrededor del área del contenido.
Los márgenes que rodean el borde, interlineado y contenido añaden espacio entre este elemento y otros elementos.
Interlineado, borde y margen son opcionales.
El fondo de un elemento se mostrará en el área de contenido y el interlineado, pero no en el margen.
El interlineado y el margen pueden ser declarados en píxeles o porcentajes.
El ancho de borde puede ser declarado en píxeles o usando las palabras clave thin, medium o thick.
Hay ocho estilos diferentes para bordes incluyendo solid, dashed, dotted y ridge.
Cuando fijamos márgenes, interlineados o un borde CSS nos proporciona las herramientas para que fijemos todos los lados (arriba, derecha, abajo o izquierda) a la vez o cada uno de ellos individualmente.
Usar la propiedad line-height para añadir espacio entre lineas de texto.
Puede posicionar una imagen como fondo de un elemento con la propiedad background-image
Use el atributo class para elementos a los que quiera dar estilo juntos, como un grupo.
Use el atributo id para dar a un elemento un nombre único. Puede usar también el atributo id para dar un estilo único a un elemento.
Puede seleccionar elementos por su id usando el selector de identificadores #. Ejemplo: #cocteles
Un elemento puede tener sólo un identificador; sin embargo, puede pertenecer a varias clases.
Los elementos <div> se usan para agrupar elementos relacionados en secciones lógicas
Crear secciones lógicas, puede ayudar a identificar las áreas principales de contenido, la cabecera y el pie de tus páginas.
Puedes usar elementos div para agrupar elementos juntos que necesitan un estilo en común.
Usar elementos <div> anidados puede añadir más estructura que sirva para aplicar estilo con mayor claridad. Aunque no se debe añadir estructura a no ser que se necesite realmente.
Una vez que has agrupado juntas secciones de contenido con elementos <div>, puedes aplicar estilo a los <div> del mismo modo que hacías con cualquier otro bloque. Por ejemplo puedes añadir un borde alrededor de un grupo de elementos usando la propiedad borde al <div> que los anida.
La propiedad width fija el ancho del área de contenido de un elemento.
El ancho total de un elemento es el ancho del área de contenido, más el ancho del interlineado, borde y márgenes que añadas.
Una vez que fijas el ancho de un elemento, ya no se expande para ocupar el ancho entero de la ventana del navegador.
La propiedad text-align es un propiedad para elementos de bloque que centra todo el contenido en línea que hay dentro elemento de bloque. Es heredado por todos los elementos de bloque que estén anidados.
Puede usar selector descendentes para seleccionar elementos anidados dentro de otros elementos. Por ejemplo, el selector descendente: div h2 { ...} selecciona todo los elementos <h2> dentro de los elementos <div> (incluyendo hijos, nietos, etc).
Puede usar abreviaciones con propiedades relacionadas. Por ejemplo: padding-top, padding-right, padding-bottom y padding-left están todos relacionados con el indentado, y puede ser especificado con una abreviación: padding
Las propiedades padding, margin, border, background y font se pueden fijar con abreviaciones.
El elemento en linea <span> es similar al elemento <div>. Se usa para agrupar elementos en lineas relacionados y texto.
Como con <div>, puede añadir elementos <span> a clases ( o dar a los elementos <span> un id) para estilizarlos.
El elemento <a> es un ejemplo de un elemento con diferentes estados. El estados principales de <a> son unvisited, visited y hover.
Puede estilizar cada uno de estos estados por separado con pseudo-classes. Las pseudo-classes más usadas a menudo con el elemento <a> son :link para enlaces sin visitar, :visited para enlaces visitados y :hover cuando se pone el ratón encima.
Otros elementos soportan la pseudo-class :hover y algunos navegadores también soportan :first-child, y :focus para otros elementos.
Puede usar más de una hoja de estilos en su HTML
Si tiene varias hojas de estilo que crean conflicto, la última en el archivo HTML gana.
Puede crear estilos para otros dispositivos como dispositivos como impresoras (print) o teléfonos móviles (handset) usando el atributo media del elemento link
Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.
Nada más entrar en Tuenti una de las primeras cosas que un usuario hará es cambiar la foto de su perfil. Esto es lo que sucede para todos los usuarios que entran a tuenti por primera vez.
Ven que su perfil tiene una foto por defecto y deciden cambiarla
Pulsan el botón cambiar foto
La aplicación deja elegir entre las fotos en las que salgo y las fotos subidas por mi. Sin embargo, dado que soy un usuario nuevo no tengo ninguna foto subida.
El usuario busca durante un tiempo la posiblidad de subir una foto directamente
Sale del menú "Cambiar Foto perfil"
Busca en la interfaz como subir una foto. En el menú superior me el menú vídeo, sin embargo no fotos. Ah, a la derecha hay un botón llamado "subir fotos"
Sube una foto
Entra en otra vez en el menú "Cambiar foto" del perfil y selecciona la foto subida.
Lo que debería pasar es:
Ven que su perfil tiene una foto por defecto y deciden cambiarla
Pulsan el botón cambiar foto
Dado que no hay fotos en el sistema, se ofrece la posibilidad de subir una foto.
La foto subida por el usuario pasa a ser la foto del perfil del usuario.
Motiviación
Con esta serie de entradas defectos de usabilidad quiero crear una colección de fallos de usabilidad que voy encontrando en la Web. La idea no es publicar estos fallos para criticar a los desarrolladores de estos portales sino hacerlos visibles para que todos aprendamos de ellos y podamos mejorar la usabilidad de nuestras páginas y aplicaciones. Todos los desarrolladores, yo el primero, cometemos el error de pensar que todos los usuarios entenderán nuestra aplicación y nuestra página tal y como nosotros la tenemos en nuestra mente. El problema es que a menudo, nuestra imagen mental difiere totalmente de la de nuestros usuarios. Voy a escribir a los creadores de las páginas y aplicaciones para comentar lo que en mi opinión es un fallo de usabilidad. Trataré de actualizar estas entradas con las contestaciones que reciba.
Si has encontrado otro fallo de usabilidad envía un email a support@softamo.com y lo incluire en el blog.
El uso de un tipo u otro de fuente puede dotar a nuestros diseños de un carácter propio. La siguiente imagen muestra algunos de los tipos más usados en el diseño Web.
La siguiente linea de código muestra como declaramos el tipo de letra en CSS:
body { font-family: Verdana, Geneva, Arial, sans-serif;}
Puedes especificar más de una fuente usando la propiedad font-family. Escribe el nombre de la fuente separada por comas. Escribe el nombre de la fuente como se pronuncia, incluyendo mayúsculas y minúsculas. Generalmente la especificación del tipo de fuente contiene muchas alternativas, todas de la misma familia.
¿Porqué necesitamos dar una lista de alternativas?
Porque el diseñador Web no tiene control de las fuentes que el usuario tiene instalado en su ordenador y puede suceder que la fuente especificada no este disponible. Si la fuente mencionada en CSS no se encuentra disponible, el navegador prueba con la segunda alternativa y así sucesivamente. Por esto, es común usar como última fuente el nombre de una familia tipográfica. En CSS hay cinco familias que se muestran en el siguiente gráfico.
La familia sans-serif incluye fuentes sin serif. Los serif son puntas y ganchos decorativos al final de las letras. Las fuentes sans-serif son generalmente consideradas más legibles en pantallas de ordenador que las fuentes serif. La familia serif incluye fuentes con serifs. Mucha gente asocia estas fuentes con prensa escrita.
Tamaño de fuente
Podemos fijar el tamaño de fuente de una letra por medio de la propiedad font-size. Ésta se puede fijar usando px, %, %em o palabras clave. Las siguientes lineas de código ilustran los diferentes modos.
body {font-size: 14px;} h1 {font-size: 150%;} h2 {font-size: 1.2em;}
En la cabecera de primer nivel h1 decimos que el tamaño de letra es 150% el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h1 es (14*150)/100 = 21px. En la cabecera de segundo nivel h2 decimos que el tamaño de letra es 1.2em el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h2 es (14*1.2) = 16.8 px. O lo que es lo mismo aproximadamente 17 pixeles.
Podemos usar las siguientes palabras clave para definir el tamaño de letra
xx-small
x-small
small
medium
large
x-large
xx-large
¿Por que no usar siempre pixeles?
El usar unidades relativas como % o em nos ofrece una mayor libertad a la hora de cambiar nuestros diseños. Es habitual definir el tamaño de letra en body, de modo que sea heredado por todos los elementos, y sobreescribir este valor con un unidades relativas en los elementos que deseamos. Si en algún momento queremos cambiar el tamaño de nuestra página podemos hacerlo fácilmente editando sólo un valor, el del elemento body.
Color
Podemos fijar el color de una letra por medio de la propiedad color. Esta se puede fijar usando palabras clave o una escala de rojo, verde y azul. La siguiente imagen muestra los 17 colores definidos por medio de palabras clave en CSS.
Las siguientes lineas de código ilustran los diferentes modos de definir la cantidad de rojo, verde o azul necesaria para formar nuestros colores. Podemos hacerlo en tanto por ciento, en una escala de 0-255 y en hexadecimal. Las siguiente lineas son equivalentes. Un 80% es 204 en escala 0-255. 204=(255*80)/100.
Podemos fijar el peso de una letra por medio de la propiedad font-weight. Se pueden usar los siguientes valores:
lighter
normal
bold
bolder
Decoración del texto
Añade incluso más estilo a tu texto con la propiedad text-decoration. Por ejemplo los elementos a, los enlaces, tienen por defecto la propiedad text-decoration fijada en underline para aparecer subrayados.
none
underline
overline
line-through
blink
Resumen
CSS te da mucho control sobre el aspecto de tu tipografía, incluyendo tipo de fuente, peso de la fuente y estilo de la fuente.
Una familia de fuentes es un conjunto de fuentes que comparte ciertas características.
Las familias de fuente para la Web son serif, sans-serif, monospace, cursive y fantasy. Serif y sans-serif son las más comunes.
Las fuentes que tus visitantes vean en tu página Web depende de las fuentes que tengan instaladas en sus ordenadores.
Es una buena idea, especificar fuentes alternativas a la familia que desees para que se usen estas alternativas cuando el usuario no tenga instaladas las fuentes mencionadas como primera opción.
Escribe siempre la última fuente como una familia genérica como serif o san-serif, de modo que el navegador pueda encontrar una substitución adecuada si no se encuentran otras fuentes.
El tamaño de las fuentes se especifica normalmente usando px, em, % o palabras clave.
Si usas pixeles (px) para especificar el tamaño de letra, le estas diciendo al navegador como cuantos pixeles de alto quieres que tengan tus letras.
em y % son tamaños de letra relativos. Especificar el tamaño de letra usando em y % significa que el tamaño de las letras será relativo al tamaño de letra del elemento padre.
Usar tamaños de letra relativos puede hacer que tus páginas sean más fáciles de mantener.
Puede hacer que su texto este en negrita usando la propiedad CSS font-weight.
Use palabras clave para definir el tamaño de letra básico en una regla para el elemento body. De modo que todos los navegadores pueden escalar el tamaño de la fuente en el caso de que los usuarios quisieran fuentes más grandes o más pequeñas.
La propiedad font-style se usa para crear texto en cursiva o oblicuo.
Los colores Web se usan mezclando diferentes cantidades de rojo, verde y azul.
Si mezcla 0% de rojo, 0% de verde y 0% de azul obtiene negro.
CSS tiene 17 colores predefinidos, incluyendo negro, blanco, rojo, azul y verde.
Puede especificar el color que quiere usando porcentajes de rojo, verde y azul. Para ello usara valores numéricos de 0-255 para el rojo, verde o azul o usara un código hexadecimal que represente al color deseado.
Un modo fácil de encontrar el código hexadecimal del color que quiera usar es mediante la herramienta de selección de color de una programa de edición de imágenes o alguna de las numerosas aplicaciones online.
Los códigos hexadecimales tienen seis dígitos de 0-F. Los primeros dos dígitos representan la cantidad de rojo, los segundos la cantidad de verde y los dos últimos la cantidad de azul.
Puede usar la propiedad text-underline para subrayar texto. El texto subrayado se confunde a menudo con el texto usado en enlaces. Debido a esto se debe usar esta propiedad con cautela.
Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.
Para aplicar estilo a nuestras páginas podemos usar el lenguaje de programación conocido como CSS. CSS es la abreviación de hoja de estilos en cascada. El siguiente código (explicado en los pasos a continuación) fija como rojo el color de fondo de los párrafos de nuestra página y nos permite ver el aspecto de CSS.
p { background-color: red;}
Seleccionamos el elemento al que queremos aplicar estilo. En este ejemplo, el elemento <p>. Observe, que en CSS no se pone <> alrededor del nombre de la etiqueta.
Especificamos la propiedad a la que queremos aplicar estilo, en este caso el color de fondo del elemento. En ingles background-color.
Entre el nombre de la propiedad y el valor de la misma ponemos dos puntos.
Para definir el color de fondo como rojo, fijamos el valor de la propiedad a red.
Al final ponemos punto y coma
Recuerde colocar todos los elementos de estilo para el elemento <p> entre {}.
Para añadir estilos CSS directamente en HTML, añada las etiquetas de apertura y cierre del elemento <style> con el atributo type de valor text/css en el elemento <head>. Esto se muestra a continuación:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Rock and Beer Guadalajara</title><style type="text/css">p { background-color: red;}</style></head><body>......</body></html>
A menudo, nos va interesar que todas nuestras páginas usen las mismas reglas de estilo. Los periodicos, por ejemplo, usan a lo largo de todas sus páginas el mismo tamaño de letra para los encabezados, el mismo espacio entre lineas etc. ¿Cómo podemos hacer que todas nuestras páginas tengan las mismas reglas de estilo?. Imaginemos un portal con dos archivos; index.html (la página de inicio) y bebidas.html. Para lograr aplicar a ambas páginas las mismas reglas de estilo, realizaríamos los siguientes pasos:
Sacar las reglas CSS del archivo index.html y colocarlas en un archivo llamado estilo.css.
Crear un enlace externo a este archivo desde el archivo index.html
Añadir el mismo enlace externo en el archivo bebidas.html
Usamos el elemento link para enlazar con información externa. En este caso enlazamos con un archivo externo de estilos. El código sería algo así:
Con el atributo type indicamos que el tipo de esta información es text/css. En otras palabras una hoja de estilos en cascada, un CSS. El atributo href indica donde se encuentra el archivo de estilos. En este caso un camino relativo, aunque podría ser una URL completa. El atributo rel especifica la relación entre el archivo HTML y lo que estamos enlazando. Estamos enlazando una hoja de estilos, por lo que le damos el valor stylesheet.
CSS permite agrupar declaraciones de estilo comunes para varios elementos en una sola regla. Por ejemplo:
Sin duda la propiedad más interesante de CSS es la herencia de reglas de estilos entre elementos. Podemos imaginarnos nuestros archivos HTML como un árbol invertido de elementos que se anidan los unos en los otros. Si quisieramos fijar la tipografía de nuestras s de primer nivel a sans-serif escribiríamos una regla como la siguiente:
h1 { font-family: sans-serif;}
Con CSS, sólo podemos aplicar estilo a los elementos dentro del elemento body. Debido a esto los siguientes gráficos no muestran los elementos dentro de head. La regla anterior seleccionaría todo los elementos <h1> de la página. En este ejemplo sólo hay uno como se muestra en el siguiente gráfico.
Si quisieramos cambiar la tipografía de las s de primer y segundo nivel escribiríamos la siguiente regla.
h1, h2 { font-family: sans-serif;}
Ahora el selector selecciona todos elementos los <h1> y <h2>
Si quisieramos cambiar la tipografía de los parrafos escribiríamos la siguiente regla.
p { font-family: sans-serif;}
El selector se aplica a todos los elementos <p> del árbol. Más aún, los elementos anidados dentro de los parrafos como son <a>, <em> y <a> heredan también la propiedad font-family de sus elementos padres. El elemento <img> es un hijo del párrafo, pero no tiene ningún texto por lo que no se ve afectado.
Usando la herencia de CSS, podemos simplificar las reglas de estilo que hemos usado en los ejemplos anteriores.
Podemos lograr el mismo efecto si movemos la propiedad font-family de los párrafos y cabeceras al elemento body. Ahora, todos los elementos anidados bajo body heredan la propiedad font-family. A continuación se muestra el código y el gráfico que ilustra el cambio.
body { font-family: sans-serif;}
¿Cómo sobreescribir una propiedad heredada?
La propiedad font-family se define en la regla body, de modo que cada elemento dentro de body la hererda. Puedes sobreescribir el valor de font-family que has heredado. Si decides usar, por ejemplo, la tipografía serif para los elementos <em>, el siguiente código lo lograría.
body { font-family: sans-serif;} em { font-family: serif;}
El siguiente gráfico muestra ahora los elementos con la tipografía fijada en sans-serif. Puedes ver que el elemento em ya no esta afectado.
Una regla proporciona el estilo para una selección de elementos HTML.
Una regla típica consiste en un selector junto con un o más propiedades y valores.
El selector especifica a que elementos podemos aplicar la regla.
Cada propiedad finaliza con un punto y coma.
Todas las propiedades y valores van entre {}.
Puede seleccionar cualquier elemento usando su nombre como selector.
Separando mediante comas los nombres de elementos podemos seleccionar varios elementos a la vez.
Una de las maneras más fácil de incluir estilo en HTML es mediante la etiqueta <style>
Para portales Web de alguna complejidad, debería enlazar a una hoja de estilos externa.
El elemento <link> se usa para incluir una hoja de estilos externa.
Muchas propiedades se heredas. Por ejemplo, si una propiedad que se hereda se define para el elemento <body>, todo los elementos hijos de <body> la heredarían.
Siempre puede sobreescribir propiedades heredadas creando una regla más especifica para el elemento que queremos cambiar.
Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.
La Web es una industria con una historia corta pero intensa. En los últimos veinte años la explosión de contenido ha llevado consigo una evolución tecnológica y de estándares. A continuación repasamos la historia de HTML:
1989 / 1991 HTML 1.0 - 2.0 Los primeros días de HTML. Se podía guardar todo lo que se necesitaba saber sobre HTML en un cajón. Las páginas no eran bonitas, pero al menos se enlazaban las unas a las otras. Nadie se preocupaba mucho de la presentación y sólo de que todo el mundo tuviera su propia Web.
1995 HTML 3 El periodo conocido como la guerra de los navegadores. Durante el cual Microsoft y Netscape se peleaban por el control del navegador. Durante la guerra, ambos navegadores mantuvieron una carrera para soportar diferentes elementos y extensiones propias. A veces se tenían que escribir dos páginas Web, una para Netscape y otra para IE. Un mal periodo para los diseñadores.
1998 HTML 4 El final de las guerras de navegadores y la aparición del W3C (World Wide Web Consortium). Su plan separar el contenido de la presentación en dos lenguajes. Un lenguaje para la estructura (HTML) y un lenguaje para la presentación (CSS). No obstante la parte más complicada era convencer a los fabricantes de navegadores que estaba en su mejor interés adoptar estos estándares.
1999 HTML 4.01 HTML 4.01 entra en escena en 1999 y es la versión más actual de HTML. Todo el mundo esperaba que HTML 4.0 fuera la versión definitiva, sin embargo se necesitaban algunos arreglos. Estos arreglos llegaron con la versión 4.01. La llegada de HTML 4.01 supuso que escribiendo código estándar, este funcionará prácticamente sin problemas en todos los navegadores.
2000 XHTML 1.0 Por supuesto, aparecieron nuevas tecnologías. Apareció otro lenguaje de etiquetado conocido como XML (Extensible Hypertext Markup Language). Juntando los conceptos de XML y HTML nació XHTML 1.0. Éste unía la popularidad y funcionamiento en navegadores de HTML a la extensibilidad y reglas estrictas de XML.
¿Cómo decimos al navegador la versión de HTML usada?
Para decir al navegador la versión que estamos usando hay que añadir un definición del tipo de HTML que usamos al comienzo de nuestros archivos HTML. A continuación se muestra la definición de tipo para HTML 4.01 en su variante estricta.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Para comprobar que nuestro código cumple los estándares que queremos, la W3C pone a nuestro disposición diversas herramientas. Por ejemplo, el validador de HTML permite saber si nuestro código es correcto.
Guía para HTML 4.01
No olvides el elemento <html>
Recuerda usar los elementos <head> y <body> dentro de <html>.
Usa siempre <title> dentro de <head>
Pon dentro de tu elemento <body> elementos de bloque <h1>,
<h2>, ... <h6>, <p>, <blockqoute>
No pongas elementos de bloque dentro de elementos en linea. Dentro de los elementos en linea sólo puede ir texto u otros elementos en linea.
No poner elementos de bloque dentro de <p>
Sólo los elementos <li> están permitidos dentro de los elementos <ul> y <ol>
Pon todo lo que quieras dentro de <li>
El elemento <blockqoute> requiere uno o más elementos de bloque.
Sea cuidadoso anidando elementos en linea dentro de otro elemento en linea. Por ejemplo, no se puede anidar un enlace dentro de otro.
¿Qué son las etiquetas meta en HTML?
Usamos las etiquetas meta dentro de head. Estas etiquetas indican al navegador que le vamos a decir algo sobre la página. Por ejemplo par indicar la codificación de nuestros archivos podemos usar:
El atributo content es donde especificamos la información sobre el tipo del contenido. Con la parte text/html indicamos que es un archivo HTML. La parte ISO-8859-1 indica al navegador la codificación que estamos usando.
Resumen
HTML 4.01 es el estándar HTML más soportado por los navegadores.
El W3C (World Wide Web Consortium) es la organización internacional que define que es estándar HTML.
Muchos navegadores tienen dos modos de representar HTML: modo "rareza" (quirks en ingles) para HTML antiguo y modo estandarizado para HTML 4.01
Si no dices al navegador que versión de HTML estas usando, algunos navegadores usaran el "modo rarezas", que causara inconsistencias en la representación de la misma.
El DOCTYPE (Document Type Definition) se usa para decir al navegador en que versión de HTML esta escrita la página.
El DOCTYPE estricto se usa si estas escribiendo HTML 4.01 totalmente estándar.
La etiqueta <meta> dentro del elemento <head> se usa para proporcionar al navegador información adicional sobre una página Web, como el tipo del contenido y la codificación del texto de la misma.
La codificación de texto se usa para decir al navegador que estándar de codificación (UTF-8, ISO 8859-1 ...) se usa.
La mayoría de los lenguajes usados en el este de Europa pueden ser pueden ser representados con la codificación ISO-8859-1
El validador W3C es un servicio online gratuito que comprueba que la página cumpla los estándares.
Use el validador para asegurarse que tu HTML este bien construido y que los atributos cumplan los estándares.
Cumplir los estándares, hace nuestras páginas carguen más rápidas y que haya menos diferencias entre navegadores.
Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.
En primer lugar hay que entender como funciona la carga de de un archivo HTML con imágenes en un navegador. El navegador comienza con un lienzo en blanco que ha de pintar con las respuestas que le proporciona el servidor tal y como se muestra en la siguiente imagen:
El servidor manda el archivo HTML pedido, que el navegador comienza a pintar. El navegador examina el archivo recibido y se da cuenta que éste contiene imágenes. Al no disponer de estas imágenes todavía no puede pintarlas. Pide estas imágenes al servidor, como se muestra en la siguiente imagen. En HTML usamos para incluir imágenes el elemento img.
Conforme va recibiendo las imágenes, el navegador las muestra y continua pidiendo las restantes.
Es posible que no nos demos cuenta de este proceso porqué los navegadores más modernos realizan la petición de imágenes en paralelo y porqué en la actualidad disponemos de conexiónes a Internet bastante rápidas.
Como hemos visto en los gráficos anteriores las imágenes se cargan después de leer el HTML. Podemos usar los atributos width y height para ayudar al navegador a dibujar nuestra página al decirle que ancho y alto van a tener nuestras imágenes. Si no usamos estos atributos el navegador tiene que identificar ambos valores al recibir las imágenes. Siempre que podamos es bueno ayudar al navegador, para obtener una carga más rápida de nuestras páginas Web.
A continuación se muestra un extracto de HTML que usa el atributo alt. Este atributo se usa para ofrecer un texto alternativo.
<img src="http://softamo.com/images/logo.gif" alt="Logotipo de la empresa Softamo"/>
El atributo alt debe ser un texto corto que describa la imagen
Si la imagen no se encuentra (fallo en el código, se ha movido a otro directorio), algunos navegadores, muestra este texto alternativo en su lugar.
Los lectores de pantalla usan este texto alternativo para describir a los usuarios con minusvalías visuales lo que verían en pantalla.
¿Podemos crear enlaces a otras páginas por medio de imágenes?
Sí, de hecho es muy fácil crear enlaces por medio de imágenes. Para ello debes rodear el elemento imagen (img) con el elemento enlace (a), que presentábamos en la segunda entrada de este curso, tal y como se muestra a continuación.
Use el elemento <img> para posicionar imágenes en su portal Web.
Los navegadores tratan los elementos <img> de un modo algo diferente que el resto de los elementos. Después de mostrar el HTML de la página, el navegador obtiene cada imagen del servidor Web y la muestra.
Si tiene más de una imagen grande en su página Web, puede hacer la página más usable y más rápida creando miniaturas - imágenes que el usuario puede pulsar para ver una versión más grande de la imagen.
El atributo src es como especificas la localización de la imagen. Puede incluir las imágenes de su portal usando caminos relativos en el atributo src, o imágenes desde otros portales usando una URL.
El atributo alt del elemento <img> es una descripción significativa. Es mostrada por algunos navegadores si la imagen no puede ser encontrada, y es usada por lectores de pantalla para describir la misma a las personas con minusvalías visuales.
Un ancho de menos de 800 pixeles es una buena general para la imágenes de un portal Web. La mayoría de los imágenes creadas por cámaras digitales son demasiado grande para usarlas en páginas Web, así que hay que reducir su tamaño.
Imágenes demasiado grandes para un navegador hace que los portales Web sean menos usables y más lentos para descargar y mostrar.
Un pixel es el punto más pequeño que se puede representar en la pantalla. Cada imágenes está compuesta por miles de pixeles. Dependiendo del monitor, puede haber desde 72 pixeles por pulgada a 100 pixeles por pulgada.
JPEG y GIF son dos formatos para imágenes que están soportados extensamente por todos los navegadores.
El formato JPEG es más adecuado para fotografías y otras imágenes complejas.
El formato GIF es más adecuado para logotipos y otras imágenes simples con colores sólidos, lineas y texto. Las imágenes JPEG se pueden comprimir en diferentes calidades. Debe escoger un balance entre calidad y tamaño de archivo según sus necesidades.
El formato GIF permite tener imágenes con fondo transparente.
Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML Compre dicho libro si quiere aprender HTML y CSS rápidamente.
Hace dos días, mi pareja y yo, unimos fuerzas para lanzar un nuevo proyecto Web. Se llama Bebes y Mujeres. La siguiente cita resumen la visión del proyecto:
No sería genial tener un portal Web donde los papas puedan acudir cuando tengan una duda relacionada con sus bebés o las mujeres encuentren respuesta a sus dudas sobre su salud (adolescencia, embarazo, parto, postparto...). Un portal donde poder formular preguntas y donde la mayoría de las veces estas ya hayan sido preguntadas y respondidas por una gran comunidad de usuarios. No sería genial si las respuestas aparecieran ordenadas por relevancia. No sería genial tener un portal Web donde para formular o responder una pregunta no haya que registrarse.
Esta es la visión detrás de Bebes y Mujeres. Te invito a ayudarnos a hacerla reliadad.
Bebes y Mujeres es un lugar donde padres primerizos o experimentados y mujeres en general pueden acudir para formular preguntas y comprartir sus experiencias con otros. A diferencia de los foros habituales, que archivan las preguntas cronologicamente, bebesymujeres.com está basado en un software que permite ordenar las respuestas por relevancia. Es decir aquellas respuestas más útiles primero. Las respuestas más votadas apareceran al comienzo de la página, justo debajo de la pregunta. Nuestra visión es que bebesymujeres.com sea un compendio de conocimiento de libros, otros portales Web y experiencia personal. Todo ordenado por como de útil ha sido para otros padres y mujeres. El portal está diseñado para ser incluido en los principales motores de búsqueda. De modo que cuando alguien escriba una pregunta en Google, debería ver las respuestas más relevantes de bebesymujeres.com en los primeros resultados de la lista. Esta es una página construida por padres y mujeres para todos los padres y mujeres.
Esta página te permite ganar "reputación" basandose en las respuestas que das y como ayudas a la comunidad. Si tienes mucha reputación, puedes ayudarnos a mejorar el portal marcando preguntas como no deseadas, añadiendo "tags" a las preguntas e incluso editando o votando par a cerrar preguntas. Piensa en tags como etiquetas que ayudan a encontrar más tarde una pregunta.
El reto en los próximos meses consiste en crear una comunidad entusiasta que disfrute del poderoso interfaz que usa la Web. Os animo a notificar a vuestro contactos de la existencia del sitio y unirse a la comunidad.
. Te recomiendo este libro si eres un diseñador de paginas Web o gestionas algún portal.
. Compre dicho libro si quiere aprender HTML y CSS rápidamente.
