Articulos de diseño de Paginas Web

Simple CSS: Creación de texto más legible

2009-11-26T14:12:00.001-08:00

Simple CSS: Creación de texto más legible
por David Rodríguez - 21 de abril 2008

La tipografía es una parte importante del diseño Web. Al igual que en el mundo de la impresión, su contenido debe ser legible por los espectadores para que pueda ser de alguna utilidad. Como regla general, usted quiere asegurarse de que su sitio web ofrece la menor resistencia posible al usuario y el sitio es más fácil de leer, mejor. CSS proporciona tres propiedades muy útiles para mejorar la legibilidad de su sitio: la fuente, la línea de altura, y la letra de espaciado.
Una página de muestra de

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Vamos a comenzar con una página web de muestra pequeños. Puedes verlo aquí. Esta página utiliza un diseño pequeño, bastante estándar con algunas bajas colores clave para ayudar a destacar el contenido. Este es un buen uso del diseño y el color si el sitio se inscribe en el "contenido es el rey" categoría (y la mayoría de los sitios lo hacen), especialmente si su contenido se compone de los artículos u otros bloques de texto largos, como un blog.

Lo que hay que notar aquí es que el texto hace su trabajo: se comunica un mensaje y el usuario puede abandonar después de haber consumido su contenido. Pero el texto es el mismo en toda la página, con la excepción de un cambio de color en la subpartida pequeñas por debajo del texto del encabezado y el posicionamiento de la misma. Aquí está la CSS que está siendo utilizado en la página de muestra.

body (
text-align: center;
margin: 0;
padding: 0;
background-color: # 363942;
color: # 382513;
)

# container (
margin: 15px auto;
text-align: left;
background-color: # D8CAA8;
border: 1px solid # 4B1E18;
padding: 0px;
width: 850px;
)

body (
height: 80px;
border-bottom: 1px solid # 284907;
margin-bottom: 15px;
padding: 15px;
)

# header h1 (
position: relative;
vertical-align: center;
color: # 382513;
margin-bottom:-10px;
)

. subpartida (
color: # 284907;
)

# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
)

# content (
padding: 0 15px;
)

# footer (
claro: los dos;
border-top: 1px solid # 284907;
padding: 15px;
margin-top: 15px;
)

Selección de las fuentes

Para facilitar la lectura, nos querrá elegir una fuente que se ve bien con los colores que hayas elegido y en el tamaño que planea realizar un texto. Típicamente, un no-serif es conveniente que el contenido principal, mientras que los encabezados se benefician de la vistosidad añadido de serif. Si usted viene de un fondo de impresión, esto puede sonar hacia atrás. Por lo general, en el mundo de la impresión, remates son los preferidos para los bloques de texto, porque el serifas ayudan al ojo distinguir cada línea. Sin embargo, los sistemas operativos modernos tienen opciones para suavizar los bordes de las fuentes de pantalla automáticamente, de manera no-serif salido mejor aspecto como el contenido principal y serif se ven bien en pequeñas dosis.

Con esto en mente, voy a utilizar una de mis frases favoritas cuando se trata de CSS y las fuentes:

font-family: Arial, Helvetica, sans-serif;

Estas fuentes son algunos de los más seguros que puede utilizar en su diseño, y si la compatibilidad entre navegadores es una preocupación, memorizarlas. Son buenos para usar por su cuenta, o puede utilizar como punto de partida para su texto no serif. En este caso, para simplificar, me voy a quedar con sólo estos tres para el contenido. La sección del cuerpo de la CSS ahora se ve así:

body (
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: # 363942;
color: # 382513;
)

Y con ese pequeño cambio, la legibilidad del conjunto de la página ha cambiado ligeramente a mejor: ver por sí mismo.

El ligero cambio es bueno, pero todos los de la fuente sigue siendo la misma familia y esto crea un mal tipo de uniformidad. Queremos una distinción pasando aquí, así que vamos a poner nuestras partidas y subpartidas del resto del contenido. Vamos a pasar por alto el H1 en la parte superior un poco, ya que querrá hacer algo un poco diferente con el que en un segundo.

Por el subtítulo y el título en el contenido, voy a estar utilizando un tipo serif. Al igual que anteriormente, esta línea siguiente es probablemente una de mis favoritas:

font-family: Georgia, "Times New Roman", Times, serif;

Una vez más, estas son algunas de las más seguras fuentes que puede utilizar en Diseño Web, incluso si es sólo un punto de inicio y planea expandir su tipografía un poco más tarde. Reserva de esta línea para los jefes y otros lugares en los que se vería bien en pequeñas dosis, el ojo tiene un tiempo de lectura más difícil serif en una pantalla que los no-serif para bloques enteros de texto serif puede ser impactante.

Así que ahora, nuestra clase subpartida se parece a esto:

. subpartida (
color: # 284907;
font-family: Georgia, "Times New Roman", Times, serif;
)

Y tenemos que crear una nueva regla para las etiquetas H2 en la sección de contenido. Lo hacemos de esta manera:

# content h2 (
font-family: Georgia, "Times New Roman", Times, serif;
)

Bien, ahora la información del encabezado es más separada del contenido, lo cual es bueno. Echa un vistazo aquí.

Ahora, ¿qué hay que h1 cabecera que tenemos en la parte superior de la página? Vamos a hacerlo más grande y le dan menos contraste con el fondo. Esto es para que los usuarios sepan lo que están en el sitio, pero no se distraiga con el encabezado.

Lo haremos con este código:

color: # 6B5846;
font-size: 48px;

Y el encabezado completo h1 regla dice lo siguiente:

# header h1 (
position: relative;
vertical-align: center;
color: # 6B5846;
margin-bottom:-10px;
font-size: 48px;
)

Usted puede ver el encabezado vez aquí.

Ahora dirigimos nuestra atención hacia la barra lateral y pie de página. El texto de la estos lugares es el mismo que el cuerpo del texto en el área de contenido principal. La barra lateral y el pie en general juega un papel secundario, por lo que les vamos a dar más pequeños de texto y una familia de fuentes diferentes, con una regla única fuente:

font: 12px Verdana;

Ahora, nuestra barra lateral y divs pie de página tiene la CSS:

# footer (
claro: los dos;
border-top: 1px solid # 284907;
padding: 15px;
font: 12px Verdana;
margin-top: 15px;
)

# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
color: # 5A4735;
)

Ahora, el texto contenido se siente un poco abrumador. Vamos a reducir su tamaño con esto:

font-size: 15px;

Y lo pondremos en la norma de contenido, por lo que ahora se lee:

# content (
padding: 0 15px;
font-size: 15px;
)

Y ahora tenemos nuestra quinta iteración de la página CMRT. Hemos tomado algunos pasos en asegurarse de que las diferentes secciones de nuestro sitio cada uno tiene su propia mirada y sensación, mientras que todavía se sentía unificado. Ahora, podemos dar un paso más con la propiedad line-height.
line-height - Sé bueno con tus visitantes!

Sus visitantes están allí para ver cualquier contenido que tienen en su sitio web. Han venido a verte y que son tus invitados! Tratarlos bien. Usted no quiere forzar sus ojos al ver tu página. Utilice la línea de altura para que el texto más legible. Adición de altura más la línea a su texto aumenta la cantidad de espacio entre cada línea, y ayuda a los ojos hacen que saltan mientras se mueve por su contenido.

Nosotros le daremos el div contenido de una altura de línea de 160%, lo cual le da 60% de la altura más línea de lo que normalmente tiene, basado en el tamaño de la fuente. Esta es una cantidad decente de la altura de la línea y le da al texto un espacio para respirar. Para la barra lateral, ya que el texto es más pequeño, sólo voy a dar una altura de línea de 140%. Así que, ahora nuestro contenido y CSS barra lateral son los siguientes:

# content (
padding: 0 15px;
font-size: 15px;
line-height: 160%;
)

# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
line-height: 140%;
color: # 5A4735;
)

Y con esto, el texto adquiere un aspecto mucho más agradable. Ver aquí. Los ojos no tienen que trabajar tan duro para leer el texto ahora, por lo que es más fácil para sus visitantes de consumir su contenido.
Ajuste de espacio entre las letras

Sólo hay un par de lugares donde espaciamiento de la letra entra en juego con esta página, pero también puede desempeñar un papel en el aumento de la legibilidad de su sitio y ayudar a que cada elemento de la página más clara. Los encabezados y las partidas suelen ser buenos candidatos para el espaciamiento de la letra. Desde un punto de vista del diseño, puede utilizar espacio en su carta el texto de cabecera para añadir algunas imágenes más adecuadas a la página, como vamos a hacer en el div encabezado con esto:

letter-spacing: 20px;

Esto aumenta el espacio entre las letras de su texto por 20px. 20px es un número grande de texto normales, pero para el encabezado en la parte superior de la página, que está a sólo 4 letras, que le ayuda a estirar a ser casi tan ancha como la subpartida debajo de ella, dándole más de un encabezado de sentir.

Para las partidas (de las etiquetas H2) en el contenido de la página, vamos a aumentar la carta de separación por sólo 2px. Esto dará los títulos más destacados se siente y separar aún más a partir del texto, y el ajuste es de menor importancia suficiente como para que no se distraiga de la lectura:

letter-spacing: 2px;

Así que la cabecera H1 y H2 CSS de nuestro contenido CSS de ahora este aspecto:

# header h1 (
position: relative;
vertical-align: center;
color: # 6B5846;
margin-bottom:-10px;
font-size: 48px;
letter-spacing: 20px;
)

# content h2 (
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 2px;
)

Usted puede ver lo que todo parece cuando se hace bien aquí.
Ampliando este CSS

Hay un montón de maneras diferentes que usted puede aplicar estas propiedades, también. Para el diseño de la página a propósito utilizó un diseño sencillo y más intuitivo para poder centrarse en el texto, ya que cambió durante los pasos anteriores, pero aplicando este tipo de CSS en el diseño mucho más dinámico y elegante, puede mejorar drásticamente su efecto sobre la a sus visitantes. No tengo la intención de "embellecer" la página de ejemplo CMRT, y si lo hago, será por un artículo totalmente separados, pero si deseas tomar una grieta en lo que se vea más bonita, preservando la fuente y texto los ajustes, me golpeó y vamos a hablar de ello.

Manténgase sintonizado para más de la serie Simple CSS!

El futuro del Diseño web y el software

2009-11-26T13:56:00.001-08:00

Mañana de Diseño Web: Diseño de Software Popular Challenge
por David Rodríguez - 18 de abril 2008

Recientemente, tomé un proyecto. Un compañero de trabajo de la mina creado un sitio web completamente en estándares XHTML compatible desde el principio titulado HTML para principiantes, que será lanzado pronto. Su código fue escrito a mano y es elegante y funcional. En la página principal del sitio, se utilizó un diseño de tres columnas con un encabezado y pie de página, y en las páginas interiores del sitio se utilizó un diseño de dos columnas. Éstos son capturas de pantalla (la apariencia de la página final puede cambiar, por lo tanto, no hay enlaces directos HTML):

El diseño original; estricto, XHTML válido, página de nivel superior:

El diseño original; estricto, XHTML válido, página interior:

Mi proyecto iba a tener cuatro programas: CoffeeCup Visual Site Designer, Microsoft Expression Web, Adobe Dreamweaver y Microsoft FrontPage 2003 y el intento de recrear los dos diseños anteriores. Aquí está el truco: sólo podía utilizar la interfaz WYSIWYG (lo que ves es lo que obtienes) características de cada programa. Yo no podía modificar el código directamente a todos.
¿Por qué hacer esto?

Fui al sur de este año by Southwest Interactive Festival y asistió a un panel no titulado, "¿Tiene el mundo de mañana falta diseñadores?" El propósito detrás de todo el grupo era conseguir algunas reflexiones meta pasando. El enfoque y la idea general es que en el (posiblemente cerca) el futuro, los individuos las herramientas para crear de forma sencilla y "diseño" visual único para todas las cosas - Páginas web, calzado, automóviles, lo que sea - sin la necesidad de un diseñador profesional . Incluso fue educado que en una peor de los casos, incluso la inteligencia artificial podría conseguir tan avanzado que podría "aprender" de diseño y crear cosas como los únicos, sitios atractivos en el momento.

Yo no estoy tan seguro de que la última parte. Pero la parte sobre el Joe cotidiana contar con las herramientas que necesita para diseñar su sitio sin las habilidades y conocimientos de un diseñador (es decir, sin saber HTML, CSS, o tener el ojo entrenado de alguien que ha estado trabajando con la Web durante años y ha visto sus tendencias) me interesaba. Por lo tanto, armar a mí mismo con una serie de los editores WYSIWYG más populares, me puse a ver que tan cerca esta realidad que hemos llegado.
Primero: Inicio 2003

Entré en esta solicitud a sabiendas de que esto es viejo. Old aunque puede ser, todavía está en una buena circulación y sigue siendo uno de los programas más utilizados para la matanza de la Web con el código de hinchado y en el cuadro basado en diseños construcción de sitios web.

En general, la construcción del diseño WYSIWYG en modo de sólo con Frontpage fue un dolor de torpe en la parte trasera. Me vi obligado a señalar a las células de diseño de la mesa y el "estilo" con Microsoft Office herramientas de estilo, como, "Formato de la célula ..." y "Propiedades de Celda". Fue bastante torpe es todo lo que puedo decir, y muchas veces, las células no quería quedarme donde ponerlos. Cuando se agrega un nuevo diseño de la célula, todos los demás tratan de adivinar de dónde se supone que deben ir en relación, dejando a arrastrar manualmente de vuelta a sus puntos de destino, o el uso de la herramienta Borrador molesto (que a veces se borra en los puntos correctos , y, a veces no) para borrar las fronteras y las células que la disposición añadido por su cuenta cuando lo agregó a su celular deseado.

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y sitios web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Hubo algunas cosas que simplemente no podía hacer, como agregar la imagen de fondo a la cabecera, sin manual de codificación. Así que el fondo tuvo que quedarse fuera. Al final, sin embargo, el producto salió en busca muy aseado en el diseñador:

Inicio de 2003, en la vista de diseño:

Lamentablemente, sin embargo, en un explorador Web, el diseño no parecía ser el mismo:

Inicio de 2003, página superior, visto en un verdadero navegador (Firefox 2):

El diseño de página interior llegó muy cerca, sin embargo:

Inicio de 2003, página interior, visto en un verdadero navegador (Firefox 2):

FrontPage 2003 Pros:

* Porciones y porciones de características
* Sistema de ayuda decente

FrontPage 2003 Contras:

* El software de manera obsoleta
* Sin embargo prefiere utilizar tablas para maquetar
* Un montón de características, pero la mayoría nunca va a usar
* El número de características lanzado en usted puede ser abrumadora
* No es novato amistoso
* No veterano amistoso
* Apenas intermedios amistoso
* Una página puede buscar una manera en la vista de diseño, pero radicalmente diferente en la producción, y porque la vista de diseño se ve bien, ¿cómo se supone que tienes que arreglarlo?

Y en esta esquina: Adobe Dreamweaver CS3! (Mac version)

Yo sabía Inicio sería una pesadilla, por lo que decidí trabajar con él primero. Yo realmente no sabía qué esperar con Dreamweaver. Yo había oído cosas buenas, yo había oído cosas malas.

Tengo que decir que fue un buen cambio de ritmo de Inicio. Dibujar un esquema de una manera similar como lo hice en Inicio mucho más fácil, porque en realidad podría utilizar divs en lugar de tablas para el diseño. La forma más sencilla de hacerlo es utilizar el AP (posición absoluta) divs en lugar de los divs normal, porque para sacar el máximo provecho de un no-AP divs que tendría que hacer algo de codificación manual.

Dibujar el diseño fue un broche de presión. Lo redacté en cuestión de segundos, y sólo tomó unos minutos para ajustar las posiciones así lo fueron casi pixel-perfect. Puede seleccionar un div y moverla píxel por píxel con las teclas de flecha del teclado, de modo que era agradable. Entonces me llena cada div con el contenido que quería antes de que el estilo de divs.

Aquí es donde las cosas se pusieron un poco torpe. Hay muy pocas herramientas WYSIWYG para añadir los colores de fondo, cambiando el texto (excepto el tamaño y la cara), añadiendo márgenes / relleno, alineación de una imagen de fondo, etc busqué durante bastante tiempo la forma de estilo de mi página sin tener que teclear mi CSS propia, pero fue inútil. Con el tiempo me vino abajo y uso de la "CSS" botón, que parecía ser la única manera de estilo de estos divs hasta el punto de que serían capaces de imitar el diseño original que estaba trabajando. El botón CSS planteado un semi-diálogo intuitivo que me permitió añadir estilo al objeto seleccionado, y cuando terminé, el estilo fue hacia el panel en la parte derecha de la ventana.

Fue en este panel de poco que hice casi todos los de mi estilo, utilizando casi codificadas a mano CSS. Digo "casi" porque hay cuadros desplegables que le permiten elegir de una lista de elementos, como "cuerpo", "H1", "A", "a: hover", etc Dado que no estaba realmente en la archivo HTML primas y escribiendo mis estilos manualmente, pensé que esto era algo que podía "chirriar por" como WYSIWYG. Aunque en realidad, alguien que no conoces CSS tendría dificultades para construir un sitio atractivo, moderno de esta manera.

Dicho esto, creo que Dreamweaver CS3 es un gran programa en un sentido profesional. Si no estuviera limitada por este proyecto a modo de sólo el WYSIWYG y podría utilizar el editor de código, puedo ver Dreamweaver ser muy útil para aquellos que gustan de las aplicaciones profesionales para este tipo de cosas. (Sigo personalmente prefiero un editor de texto y una versión local de Apache / PHP / MySQL). Sin embargo, es un poco demasiado técnico, el texto de algunas de las opciones y los métodos de diseño que utilizan podría ser más intuitiva y eficiente.

Al final, esto es lo que el sitio parecía en vista de diseño de Dreamweaver:

Dreamweaver CS3, página superior, en vista del diseñador:

Y esto es lo que el resultado final se ve como en un navegador:

Dreamweaver CS3, página superior, en un navegador (Firefox 2):

Dreamweaver CS3, página interior, en un navegador (Firefox 2):

Observe en la página de nivel superior como Dreamweaver tenido un poco de dificultad para la conversión de algunos de los símbolos cuando el texto fue pegado en ella. En conjunto, sin embargo, el resultado final fue agradable y se acercó al diseño original. Lamentablemente, sin embargo, no puedo decir que Dreamweaver CS3 es una herramienta rápida y fácil-de construir un sitio si usted tiene poco conocimiento de CSS.

Pros Dreamweaver CS3:

* Puede hacer algunas cosas avanzadas con el editor visual si conoce la CSS
* Adición de las propiedades básicas de CSS para divs con un botón de CSS es rápido en la creación de
* Dibujo un diseño con divs AP es un buen guía de inicio rápido

Dreamweaver CS3 Contras:

* No muy novato amistoso
* Estilo mínimo que se puede hacer sin el conocimiento de CSS
* Gestión de su estilo y divs puede ser un dolor, una vez que ya ha creado
* Muchas de las funciones y herramientas en lugares ilógicos, obligando a cazar alrededor de ellos
* Es necesario tener conocimientos de HTML y CSS si va a ir solo y usar el programa, no hay herramientas para principiantes

¡Ah, Expression Web. Vamos a ver lo que tienes.

El sucesor de Microsoft para el Inicio de fecha muy próxima al escenario. Así es como se cayó.

Se me presentó con la interfaz de Expression Web y, al mismo tiempo que definitivamente hay mucho que hacer allí, se organizó muy bien. tag just sitting there on the right side of the window; in a neat little pane." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Sólo la interfaz de exploración con mis ojos, casi de inmediato vio la etiqueta

allí sentado en la parte derecha de la ventana, en un panel de bonito. tag five times." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Sabiendo que necesitaba cinco divs para el sitio, y ver cuánto tiempo tuvo que enviar a ajustar la posición y estilos en Dreamweaver cuando yo absolutamente posicionado-divs, me doble clic en la etiqueta

cinco veces. Cinco divs se dejó caer en mi ventana de diseño, indicado por un div pequeño "ficha" y un esquema de puntos, uno encima del otro en formato de bloque.

Dentro de cada div que podía escribir y editar texto o añadir imágenes / cuadros / lists / lo que sea, como si cada div era su propio documento de Word poco, utilizando todas las herramientas familiares de Microsoft Word. Esto hizo que añadir los divs y su contenido fácil. Así que en pocos minutos, yo tenía cinco divs en mi página en bloques, todos llenos de todo su contenido en 12-point Times New Roman. Ahora venía la parte difícil: todo un estilo. Si este iba a ser algo parecido a los programas WYSIWYG otros que he usado (ver arriba), esto sería un ejercicio de tropezar sin rumbo hasta que encontré lo que necesitaba.

Afortunadamente, Expression Web no son los otros programas. Me di cuenta de una "nueva" que aparece en la parte derecha de la ventana de Expresión Web. He hecho clic en él. Un diálogo apareció con un menú en el lado izquierdo con las modificaciones más comúnmente utilizadas CSS. Secciones como "Box" para rellenar el modelo de caja (y márgenes), "Diseño" para el posicionamiento y flotante, "List" (lista para cuando se desea que el estilo, no me hacen mucho uso de esto, pero hizo fácil cambiar el tipo de bala, cuando yo necesitaba, y pude ver que sea fácil de crear un flotaba-navbar lista con este), y otros como "Antecedentes", "Fuente", y así sucesivamente. Este diálogo fue bastante intuitivo, y como siempre que se sepa los fundamentos de la CSS, se puede tropezar en ella como en torno a un usuario intermedio y lograr lo que estás buscando. Fui capaz de usar este diálogo para asignar fondos, márgenes y el relleno, flotando, y el posicionamiento a todos mis divs, porque hay una marca poco clara en la parte superior del diálogo que dice "se aplican al objeto página seleccionada." Así que si seleccionar un div todo, se hace la CSS. Seleccione sólo una palabra o elemento li, y sólo el que consigue el estilo. Y yo no tenía a mano el código un poco de ella.

Como he añadido estilos para todos mis divs, saltaron por toda la página para encajar en su lugar. Cosas (como el pie de página) que se ajusta a "claro: tanto" (a través de la modalidad de diseño) saltó a la parte inferior de la página y llena todo el ancho de la ventana, como se pretendía. El texto que debe envolver envuelto en todos los lugares correctos, Expression Web manejado bastante bien.

En este punto, mi página fue esencialmente hecho. Sólo necesitaba para hacer algunos retoques a la página. Aquí es donde las cosas empezaron a ponerse un poco más difícil. Intuitivamente, yo sería capaz de seleccionar cualquiera de mis divs u otros elementos dentro de los divs y pulse el botón derecho, y luego editar el CSS en el mismo diálogo que he creado de entrada, sino que, al intentar algo como esto, le lanza Expression Web a la vista de Split, mostrando el HTML puro / CSS de la página en un panel superior y la vista de diseño en el panel inferior. Este fue estremecedora, yo no quería modificar el código (que no era el punto de mi proyecto), quería cambiar el CSS en el diseño.

Resulta que hay un "Administrar estilos" panel de la derecha que tiene una lista de todos los estilos que has creado. Si mouseover cualquier elemento de tu página, te dice qué estilo que está utilizando. A continuación, encontramos que el estilo en el Administrador de estilos, haga clic en él y, a continuación, haga clic en Modificar estilo. Creo que "Editar Estilo" habría sido una mejor redacción, y en segundo lugar, la búsqueda de esta característica fue estremecedora. Todo había salido tan bien hasta ese punto.

En cualquier caso, Modificar el estilo usando planteado que el diálogo mismo y hacer ajustes era bastante sencillo. Sin embargo, tuve que hacer varios ajustes (quería ir de nuevo a algunos divs y añadir un borde inferior, y yo también quería volver a un par de las listas y aplicar imágenes de bala costumbre; además, quería cambiar el vínculo colores sólo en un div). Hacer ajustes varios se consume demasiado tiempo, porque para cada uno de modificar, tuve que pasar el ratón el elemento que quería el cambio, averiguar qué nombre de estilo Expression Web había dado, y luego en el Administrador de estilos, haga clic en el estilo, Estilo y haga clic en Modificar y, a continuación, haga clic en Aplicar / Aceptar antes de que se hace el truco. Cuando tenga que hacer varios ajustes, esto no es la manera más intuitiva.

Después de realizar todos los ajustes necesarios, la página salió casi exactamente como yo quería en el diseñador.

Expression Web, página superior, en vista del diseñador:

Y los resultados en un navegador eran buenas también.

Expression Web, página superior, en un navegador (Firefox 2):

Expression Web, la página interior, en un navegador (Firefox 2):

Profesionales de Expression Web:

* Si usted conoce un poco de HTML / CSS, usted puede saltar adentro derecho
* Fácil de obtener el diseño de la página creada con divs varios.
* Grandes estilos de diálogo para ayudarle a estilo de una página entera o sólo un objeto individual.
* Casi todo lo que se explica por sí mismo.
* Fácil de escanear el programa con su ojo para encontrar la herramienta que necesitas.
* Cada div crear siente como un documento de Word mini, con texto de todas las herramientas de formato familiar.
* Software más fácil para alguien con un poco de conocimiento de HTML / CSS para sólo recoger y ejecutar con.
* Las páginas creadas en este software parecía prácticamente perfecta en los principales navegadores que probé en (IE7, Firefox 2, Safari, WebKit, Opera).
* De todos los programas, Expression Web y Visual Designer de la web fue la más cercana a la reproducción de la página tema exactamente. (Más información sobre la CIV en un poco).

Contras de Expression Web:

* Hacer ajustes menores es rápido ... Si desea hacer una pellizcar de menor importancia. Usted tiene que seguir una serie de pasos para cambiar algunas de las cosas más pequeñas, y si usted desea cambiar un montón de pequeñas cosas que se necesita más tiempo de lo que debería.
* El menú del botón derecho es semi-útil en vista de diseño, sino un "estilo" Edición "la opción que hacer maravillas para este programa, por lo que es correr suave como la seda en lugar de" muy bien ".
* Un gran programa, un poco de un alto precio. No es bueno para los principiantes.

Verdaderamente WYSIWYG: Diseñador web Visual

Ya he indicado que por encima de: Expression Web y Visual Designer de la web fue la más cercana a reproducir exactamente la página de tema exactamente. Pero, ¿cómo diseñador visual de la web realizar?

Si se me permite expresar la respuesta en una palabra: "realmente bien". (Bueno, dos palabras.) Al abrir el programa, me presentó con tres opciones: Nuevo Sitio Web, Open Web y uso de plantillas. Tentados como yo a navegar por las plantillas, no era mi objetivo. He hecho clic en Nuevo Sitio Web, y tengo un pequeño diálogo que me pide los fundamentos de mi diseño. Título, altura, anchura, color de fondo y de enlace / colores de los enlaces visitados. Después de llenar estos ajustes, hice clic en Aceptar y la vista del diseñador apareció. Una pantalla en blanco con las herramientas en el lado izquierdo y en la parte superior de la ventana.

Sólo se tomó un breve momento para familiarizarme con las herramientas que estaban allí, y era fácil saber lo que cada instrumento tenía un vistazo gracias por los iconos de colores. Todas las herramientas que no fueron etiquetados de forma directa (como la página, de relleno, efectos, Link, y las herramientas de Estilos) había tooltips mouseover y un diálogo útil explicar lo que hacen cuando se utilizan las primeras veces que se puede desactivar a través de un "no No mostrar este diálogo la próxima vez "casilla de verificación.

No hubo divs, sin etiquetas HTML, no estilos CSS, el diseñador de todo es verdaderamente WYSIWYG. Crear el diseño de mi página fue Braindead simple: elegir la forma de rectángulo de herramientas, le dan un color, dibujar. Me llamó la cabecera, barras laterales, y pie de página en cuestión de segundos, y fue capaz de ajustar sus formas, colores y tamaños en la ventana de objeto. La ventana de objeto es una característica poco clara, sino que flota como una pequeña ventana separada, y cambia para representar la configuración de cualquier herramienta que usted ha seleccionado. De esta manera, usted nunca tiene que mirar alrededor para su configuración de la herramienta, que siempre están en la ventana de objeto de modo que siempre sabe dónde buscar.

Después de dibujar el diseño de la página, que era el momento de añadir el texto. Al hacer clic en la herramienta de texto cambió la ventana de objeto que me cambie la fuente y el tamaño de la familia, y pude ver que hay otras opciones que me permite hacer cosas como añadir sombras, o incluso girar texto si quería. Lamentablemente, este diseño no convocatoria de estas características en busca de diversión así que tuve que descartar por ahora y sólo de tipo normal, de color de texto.

Cuando hace clic en mi página con la herramienta de texto, un cuadro de texto en rojo apareció con una pequeña asa en la parte superior que podría utilizar para arrastrar, y las flechas izquierda / derecha en ambos lados de la caja, así que podría ampliar / reducirla. Me estiré el cuadro a un tamaño decente y escrito en el contenido, a continuación, puso de relieve el texto y el formato con los colores correctos / tamaño en la ventana de objeto. Repitiendo este proceso para cada sección de mi página, se hizo con el contenido de la página en cuestión de minutos.

Del mismo modo, cayendo en las imágenes fue una brisa. Haga clic en la herramienta de imagen, busque la imagen, haga clic en Aceptar. Ahora usted puede arrastrar libremente en cualquier lugar de tu página. Una vez más, en la herramienta de objeto, lo vi más características que yo necesitaba, como agregar una luz / sombra, o la configuración de la imagen (esquinas redondeadas, pentágono, círculo, etc), pero una vez más mi diseño no convocatoria de este modo que tuve que jugar con los que más tarde.

En el momento en que tenía mi página expuesto todo el asunto era del 95% hecho, tuve un montón de objetos en la página. Barras laterales, una cabecera, un pie de página, una imagen de fondo para el encabezado, un pocos cuadros de texto, un par de imágenes ... ninguno de estos por sí mismos era ningún problema en absoluto para crear. Sin embargo, cuando tenía que volver atrás y cambiar algo, me encontré teniendo que vigilar cuidadosamente cuando hice clic en el ratón. No hay forma de "bloquear" los objetos en el lugar en el diseñador visual de la web, así que cuando yo quería para seleccionar el texto en una barra lateral, por ejemplo, tuve que tener cuidado para seleccionar el texto en lugar de la barra lateral, o bien yo podría terminar arrastrando la barra lateral por accidente o, peor aún, cambiando algunos de sus atributos. Esta no fue una falla importante, porque no es un multi-paso de deshacer en caso de que accidentalmente hacer algo como esto, pero toda la operación en el diseñador visual de la web parecía diseñado para ser rápido y suave, y en su mayor parte, se trataba, pero este pedacito de tecnicismo obstaculizado el "buen diseño sin preocupaciones" sensación de que cuando se utiliza el software.

Un tiempo muy grande en función de ahorro de diseñador visual de la web es su página de "copia" la función. Al hacer clic en "Añadir página" para crear una segunda página (que tenía que hacer para el interior), me dieron la opción de copiar una página existente. He copiado la página principal, y se creó una réplica exacta de la página que acababa de crear. Ahora, todo lo que tenía que hacer era ajustar la barra lateral izquierda y quitar la barra lateral sobre la derecha, a continuación, cambiar el contenido y se hizo con la segunda página. Si quisiera crear más páginas, definitivamente sería utilizar la función de copia de la página para mantener mi diseño y mantener intactas todas las páginas de uniforme.

Ni una vez tuvieron que escribir una línea de código HTML o CSS para hacer esto. De hecho, yo no podía: Diseñador web visual es totalmente WYSIWYG, que no tienen acceso directo a la página HTML / CSS. Diseñador web Visual maneja todo por ti en el fondo. Sin embargo, esto no quiere decir que si usted desea utilizar HTML no se puede, el diseñador de la web de Visual dispone de una herramienta de HTML que le permitirá insertar un objeto en HTML. Básicamente, esto crea un div de cualquier tamaño / forma / posición que desea, y usted puede insertar escrito a mano HTML, CSS, JavaScripts, lo que sea. Lamentablemente, por el bien de este proyecto, no pude usarla.

Así que, al final, esto es lo que la página que parecía de diseñador visual de la web:

Diseñador web Visual, página superior, en vista de diseño:

Y en un navegador, los diseños parecen bastante cerca de la página original.

Diseñador web Visual, página superior, en un navegador (Firefox 2):

Diseñador web Visual, página interior, en un navegador (Firefox 2):

Visual Designer ventajas de la web:

* Realmente rentable. A sólo $ 49.00 USD, en comparación con $ 399 (Dreamweaver), $ 299 (Expression Web) o $ 129 (Inicio, a través de Amazon.com).
* Realmente fácil de usar.
* De todos los programas, diseñador visual del sitio Web y de Expresión fue el más cercano a la reproducción de la página exactamente.
* En verdad WYSIWYG, sin necesidad de conocimientos de HTML o CSS. Extremadamente los principiantes.
* Más rápido de todos los editores de Web para completar el trabajo.
* Construida en un solo clic en Cargar.
* Maneja todos sus archivos para usted.
* Todas las herramientas de la sensación de exclusividad, que comparten la misma ventana de propiedades para que siempre sepa dónde buscar para cambiar la configuración.
* Muchas formas para elegir, y guías irremplazables con coordenadas XY hacer más fácil el diseño de un diseño.
* Creación de nuevas páginas de su sitio, manteniendo el mismo diseño que es fácil, basta con crear una nueva página, y seleccionar la página de "copia" la función para copiar una página ya existente y simplemente cambia el contenido.

Visual Designer contras de la web:

* No se vista de código, no se puede editar el código HTML directamente (sin embargo, hay una herramienta de HTML que le permitirá un uso avanzado de HTML y scripts en su página en una forma basada en objetos).
* No se puede editar las páginas que ya existen. CIV sólo pueden crear nuevos sitios, o modificar los sitios web que ha creado.
* Haga clic con cuidado, usted no quiere mover accidentalmente algunos de los elementos de la página si tiene varios apilados uno encima del otro. Esto no es un defecto importante, porque siempre se puede deshacer, pero si estás en un apuro de forma accidental, puede seleccionar un objeto que no desea seleccionado.

Entonces, ¿el mundo de mañana los diseñadores necesitan?

Diablos, sí. En pocas palabras, yo no recomendaría a nadie Frontpage 2003 para cualquier propósito, para ser perfectamente honesto. Dreamweaver CS3, sin embargo, podría ser una buena aplicación para el desarrollo web graves para aquellos que ya conocen la parte técnica de las cosas, y realmente creo que podría ser bueno para los desarrolladores web en un entorno profesional, pero debido a su alta "técnico-ness , "definitivamente no es una herramienta que podría permitir que el Joe medio crear una" Web 2.0 "del sitio.

Expression Web y Visual Designer de la web, sin embargo, son pasos en la dirección correcta, si ofrece fácil de utilizar las herramientas WYSIWYG es el futuro del diseño web. En una revisión de la realidad, sin embargo, en la mayoría de estos programas, no podría haber creado algo cercano a los diseños que hice anteriormente, si no estaba familiarizada con el diseño web. Si yo fuera a desafiar el Joe promedio con el proyecto anterior (exactamente a copiar un diseño ya existente a partir de cero), que tendría que sentarse a hacer algunas investigaciones en primer lugar, y me imagino que es razonable pensar que eso podría tomar días para llevar a cabo la tarea.

La única excepción es diseñador visual de la web, en la que básicamente se puede simplemente llamar la página. Pero incluso con este software intuitivo y rápido-a-maestro, las herramientas no son un substituto para el conocimiento y habilidad en el campo del diseño.

Expression Web y diseñador visual de la web son dos herramientas de Grado A, pero profesionales y aficionados, incluso los diseñadores Web están muy lejos de ser sustituidos por tales instrumentos, aunque los principiantes, intermedios y veteranos pueden encontrar algo que como en estos dos programas.

El siniestro, levantamiento inminente de la inteligencia artificial que diseña sitios web maníaca, por el contrario, puede ser algo de qué preocuparse ...

!2 tips que todos las paginas web necesitan

2009-11-26T13:34:00.000-08:00

Doce cosas más sitios necesitan - Parte I
por Mike Cherim - 25 de febrero 2008

Hay una gran cantidad de webs por ahí, cada uno único en su diseño, su contenido, de marcas, características, funcionalidad, y en una miríada de otras maneras. Sin embargo, a pesar de estas diferencias, hay necesidades específicas que deben ser satisfechas con cerca de coherencia, de Internet de todo, independientemente del sitio. Echemos un vistazo a las doce de estos denominadores comunes. A continuación se presentan los seis primeros. Ellos aparecen en el orden en que me procesador 'em up. Son sólo números para que usted pueda referirse a ellas más fácilmente.

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

1. Un menú de navegación adecuada

Cualquier dominio en la Web que consta de más de una página es una página web y como tal debe navegables. Ahora bien, esto puede parecer obvio, pero si esto es así, ¿por qué me encuentro en ocasiones con la navegación de sitios de misterio de carne? O, en un nivel más profundo, son inaccesibles debido a que requieren JavaScript o imágenes con el fin de la función. Estos deben ser una capas superiores compatibles con una mejora progresiva, no un requisito. Un fácil de usar y el menú de navegación accesible debe estar disponible. También existen otras preocupaciones en lo que respecta a la creación de un menú de navegación adecuada, así, como ...

* Su estilo del enlace: hover,: enfoque, y: pseudo elementos activos.
* El uso semántico de listas para organizar adecuadamente sus vínculos en un menú adecuado.
* E incluso yendo tan lejos como el marcado de la página actual.

2. Una significativa y bien formados Título

Por significativo título me estoy refiriendo específicamente al elemento de título - lo que se muestra en la barra de título del navegador. Lo ideal sería que el título del contenido debe venir antes de que el sitio (esto ayuda a los usuarios buscar encontrar cosas como el contenido de su título principal, en lugar de ver su nombre de sitio una y otra vez) y, si es posible, cada página debe tener su propio título. Este es un ejemplo de un uso eficaz de los elementos del título:
Twelve Things Most Sites Need | Web page Design For Designers © " onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'"> doce cosas más sitios necesitan | Diseño de página Web para diseñadores ©

Nota: Yo prefiero usar un separador de guión, pero la barra vertical o tubo utilizado en este sitio está muy bien.
3. Un Método de contacto

No puedo recomendar poner su dirección de correo electrónico en su sitio, incluso ofuscado salvo que se realice de una manera que es realmente seguro (darse una vuelta, pero el comprador tenga cuidado, muchos métodos promocionado no funcionan de manera indefinida), pero que ofrece un medio de contacto es casi siempre necesario. No sólo se presta al sentido de legitimidad, es simplemente lo que hay que hacer en el servicio a sus visitantes. Para facilitar esto, ofreciendo un número de teléfono y la dirección es buena, si es posible, y un formulario de contacto es una buena opción en lugar de un mailto: enlace de correo electrónico que no todos los visitantes podrán utilizar de todos modos. Sin embargo, dado que algunos visitantes son los robots o las personas en nada bueno, utilice un formulario de contacto seguro. Se ha argumentado que el cliente filtro spam niega la necesidad de proteger a su dirección de correo electrónico en la Web, pero su familia le puede ser cosechada y puesta en uso. No hay ganar esta guerra - no tanto como los nombres de cuenta común, como info@yourdomain.com, contact@yourdomain.com y admin@yourdomain.com puede ser objeto de un uso tan pronto como se registre un nombre de dominio - pero doesn No significa que debamos hacerlo más fácil.
4. Un Mapa del sitio

No todos los visitantes del sitio son bien servidos por un mapa del sitio y no todos los sitios requieren una. Digamos, por ejemplo, tiene un sitio de base cinco páginas con un menú de navegación clara y coherente, y fácilmente disponibles,. Probablemente se podría hacer sin un mapa del sitio. Pero, ¿cuántos sitios de congelación en cinco páginas? La experiencia adquirida me ha enseñado dominios tienden a la expansión de las nuevas necesidades inspirar a las nuevas páginas o aplicaciones. Consulta el mapa del sitio tan pronto como empieza a crecer, o considerar añadir a su sitio desde el principio. Al principio puede enlazar a él desde el pie de página, luego mover el vínculo a una ubicación más evidente que el sitio crece, ya que los visitantes encontrarán más útil. En los sitios pequeños a menudo se incorporará al mapa del sitio en ayudar a un "sitio" o "site info" página, matando a numerosas aves, con una piedra - la accesibilidad y derechos de autor, la política de privacidad, etc Si aún no estás convencido, También sabemos que muchos usuarios, especialmente los ciegos, buscará un mapa de sitio por primera vez desde que les da una visión instantánea de las ofertas de los dominios, por así decirlo.

Un mapa de sitio puede ser tan simple como una página Web con una lista desordenada. El mantenimiento puede ser muy simple: añadir un nuevo elemento de la lista cuando se agrega una nueva página. La parte más difícil es en realidad el recuerdo de actualizarlo. Ahí es donde la belleza de los mapas de sitio dinámico de verdad destacan. Las aplicaciones como WordPress, como sólo un ejemplo, permiten a los usuarios la oportunidad de crear de todo, desde simple a los mapas de sitio complejo y no hay mucho más que una simple llamada a función. "Plugins" también están disponibles simplificar aún más el proceso para los usuarios novatos. Y si usted desea caminar hasta una muesca, usted también puede ofrecer un mapa del sitio XML, pero saben que un mapa del sitio HTML es lo que me refiero. La gente debe venir primero no, robots y arañas.
5. Pasivo Accesibilidad

No voy a aburrir con un soliloquio. Voy a decir esto, sin embargo: su sitio web debe ser accesible. Sea o no lo hace para sus visitantes o para ti es irrelevante. Si lo hace meramente para satisfacer sus propias necesidades de sus visitantes también se beneficiarán ... no se puede evitar. Por lo tanto, está todo bien. Si usted no está familiarizado con las ventajas de tener un sitio accesible, tal vez esta presentación le ayudará a explicar por qué la accesibilidad tiene sentido. Si usted no está familiarizado con la accesibilidad Web, hay enlaces de ayuda en la última página de la presentación. También puede obtener algo de información básica de la Iniciativa de Accesibilidad Web (WAI).
6. De marcado estandarizado

Esto, al igual que ofrece un menú de navegación adecuado, puede parecer obvio, pero es un gran defecto en la Web. De la utilización de tablas para el diseño, el uso indebido de las rupturas, a la utilización de un "big-bold" estilo de la fuente en lugar de una partida. Utilizando el margen de beneficio adecuado para su propósito designado, sin pasar por la borda por el estiramiento que uso, no es útil no sólo la accesibilidad y la usabilidad, pero la práctica de utilizar el marcado semántico ayuda a garantizar la compatibilidad hacia adelante. A decir verdad, si usted está a punto de construir un nuevo sitio web y estás planeando sobre el uso de tablas y las viejas prácticas, fuggedaboudit. Usted no va a hacer usted mismo o su cliente un favor si usted no hace la paz con CSS y HTML 4.01 válido (por un rato) o XHTML 1.0/1.1. (Un poco de toma de conciencia de accesibilidad no se va a matar a usted.) Las normas no son una broma Web y su cooperación en su adopción es de gran importancia.

Doce cosas más sitios necesitan - Parte II
por Mike Cherim - 3 de marzo 2008

En la primera entrega, doce cosas más sitios necesitan - Parte I, me ofreció un paquete de seis que no deben faltar. Específicamente sugerí sitios deben tener un menú de navegación adecuado, un sentido, bien formado título, un método de contacto, un mapa del sitio, la accesibilidad pasiva, y de marcado estandarizado. Ahora, cuando me ofreció los últimos seis, en el orden en que me procesador 'Em Up, aquí está el equilibrio.
7. A Peso Page útil

Irónicamente Solía odiar la Web. Empecé con dial-up y fue una experiencia miserable. Por otra parte, de vuelta en el día, parecía que cada sitio que visitó requerido algún tipo de complemento o add-on para que funcione. Francamente, la Internet era un dolor en el trasero. Esto ha cambiado en algunos niveles. La necesidad de plugins o add-ons es muy reducido, con lo que los sistemas operativos pre-cargado con todo el apoyo necesario. Sin embargo, algunas personas todavía tienen dial-up. Durante los últimos seis años he tenido cable de banda ancha y es un sueño. Estoy echado a perder. Y es muy fácil olvidarse de los menos afortunados y vaya jabalí, la carga de mis páginas, con gráficos pesados. Es fácil olvidarse de cómo hacer esto hará que para un menos-que-la experiencia feliz de línea tradicional y distantes usuarios de DSL. Tengo que mantener el peso.

No estoy diciendo que el lugar no es una web para los pesos pesados, que es, pero con la debida consideración. Si desea ofrecer gráficos de peso pesado y otras cosas, permitirá a los visitantes navegar a ellos, en lugar de ofrecerles la carga de la página inicial. Y advertir a los usuarios si algo grande se acerca. Es justo para permitir que aquellos que quieran optar por la oportunidad de hacerlo.

Me sugieren aspirar a un límite máximo de 100kb por página de fondo combinada y las imágenes incrustadas (esto es comprobable). Usted puede comprar un montón de 100kb. Para sacar el mayor provecho para el dólar, sobre todo reducir el número de imágenes, optimizar los exportadores sólo desaparece, los archivos comprimidos, y por favor el tamaño pre-imágenes incrustadas para su ubicación (asegurándose de que se suma la altura y la anchura de los atributos del elemento img ). He visto en miniatura tamaños que en realidad eran 900kb monstruos con los estilos de descuento! Eso es incorrecto.
8. Una página de error útiles

Si alguna vez ha perdido, siempre es agradable ver a un alma muy útil dispuestos a dar instrucciones (suponiendo que están dispuestos a admitir que estás perdido). En la Web puede ser que el alma de ayuda. No sólo, como se menciona en la última cuota, puede ofrecer un mapa del sitio de forma proactiva de guía a sus visitantes, puede ofrecer un partido amistoso, de estilo "404" de error de página (o páginas si se quieren cubrir más errores). Su página de error debe ofrecer a la oferta mínima de una casa muy enlace, un menú de navegación, y al menos un enlace al mapa del sitio. Si usted desea ser un alma realmente útil, sin embargo, tratar de peinar la mayoría si no todas sus herramientas de navegación y ponerlos en una página. Realiza una perfecta página 404 que ofrece un mapa del sitio en la página (fácil con los mapas de sitio dinámico), de búsqueda, incluso información de contacto, y más.

Esto no es difícil de hacer. Pregunte a su host web para empezar. Específicamente preguntarles acerca de las páginas de error personalizadas desde que usted desea proporcionar algo útil y la mayoría de las páginas del servidor por defecto de error, incluso los de estilo, no son realmente muy útiles a todos.
9. Buenas partidas

En la última entrega le hablé de la importancia de utilizar la marca a punto adecuada para la finalidad a la mano. Que he mencionado las partidas, pero no entrar en detalles. Eso es porque las partidas son tan importantes que, bueno ... que se merecen un título propio. El uso de las partidas es lógico, y un estilo que está abierta, sólo tiene que utilizar su imaginación.

¿Qué tan buenos son? Ofrecen la demarcación de la sección, la semántica y pedidos, la belleza en las manos adecuadas, un beneficio de la indexación de búsqueda, la mayor accesibilidad, e incluso una fuente de navegación para algunos usuarios de las tecnologías de asistencia, como lectores de pantalla. ¿Qué más incentivo podría usted necesidad de actuar sobre esta recomendación?
10. Saltar Enlaces de Siempre

Es posible que haya detectado por mis sugerencias hasta ahora que soy grande en ayudar a los usuarios del sitio web. Creo que la más fácil mis sitios son de usar, el mejor de su experiencia será. Quiero que no sólo encuentran los bienes, con el apoyo en el camino como sea necesario, de forma pasiva y en la demanda si es posible, pero quiero a querer volver. Así, uno de mis doce va a tener que ofrecer saltar o saltar enlaces. Me parece que son muy útiles para todos con excepción de la mayoría de los que utiliza el ratón o el puntero - y que un mayor número de personas que te imaginas. Un enlace permite saltar a los usuarios la oportunidad de saltar a la página con el contenido o la navegación, de by-pass secciones redundantes o largo, contenido de ayuda de acceso, y volver a la página si se considera un vínculo superior o de nuevo a menú vínculo un vínculo salto . Yo. Algunos pueden argumentar que es una réplica de los enlaces que ofrece el comportamiento del navegador de este tipo, pero no he oído recientemente de un número record de surfistas en navegador inteligente si sabes lo que quiero decir. Además, están simplemente inocuo útil.

Una regla: Si usted va a ofrecer enlaces de salto, lo mejor es hacerlos visibles, pero no siempre es necesario. Hay maneras de ocultar vínculos saltar a la vista, manteniendo un alto nivel de accesibilidad y usabilidad de un porcentaje muy grande de usuarios. Hacer notar, sin embargo, que mostrar de ellos aumenta ese porcentaje a 100.
11. Focus Estilos

Yo no soy un usuario del teclado dedicado, pero yo uso mi teclado mucho. Es útil a veces, conveniente en otras ocasiones. Es una opción. A veces puedo usar mi teclado en la Web, en páginas de tabulación, rebotando de enlace en enlace, siguiendo el orden natural de la fuente de la página. A veces, sin embargo, dependiendo del sitio, esto puede ser difícil. Estaré a lo largo de la tabulación, pensando en mis cosas, cuando de repente zas,, estoy perdido. Yo no sé donde estoy en la página. La razón es, invariablemente, el desarrollador del sitio no se ofrecen de uno a la más simple de alojamiento: link: el foco. Probablemente debido a la simple ignorancia. Pero estoy aquí para cambiar eso.

Ofrecer enlaces enfoque implica nada más que una simple entrada de hojas de estilo, como este:
a: enfoque, a: active (color: negro; background-color: yellow;)

La A: activo es para Internet Explorer, y para proporcionar el estilo, cuando activados en otros navegadores gráficos. Obviamente, usted puede obtener más creativa, pero que por encima ayudará a hacer sus páginas Web mucho más navegable para los usuarios de teclado y nadie va a sufrir una experiencia disminuido.
12. Archivo Robots.txt

Usted se estará preguntando por qué he incluido algo tan mundano como un archivo robots.txt en el line-up, pero creo que es muy útil tener uno. Proporciona instrucciones a los robots de indexación honesto y arañas, como Googlebot, diciéndoles que permanecer fuera de ciertos directorios que realmente no queremos que de todos modos. ¿Por qué han perdido su ancho de banda innecesariamente?

Algunas personas, que he oído, a la derecha desea deshabilitar, haga clic en sus sitios pensando que de alguna manera pueden realmente tener éxito en impedir que la gente de la copia de sus imágenes (no se puede hacer), pero no tienen un archivo robots.txt con exclusión de las imágenes del directorio. Este último sería mucho más útil. Es muy fácil de hacer uno, incluso hay herramientas que puede utilizar para ayudarle a conseguir el trabajo hecho.
¿Hay más?

La respuesta corta es sí, por supuesto. Pero si se cumplen los doce artículos en este artículo de dos partes, que ha hecho bien. Se le ofrece un sitio de calidad que es un corte por encima de muchos sitios de la Web. Y los beneficios, puede encontrar, será realmente notable, y tal vez incluso tangibles. Happy coding.

HTML los fundamentos de la web

2009-11-26T13:21:00.000-08:00

HTML, los fundamentos de la de la Web

por Matthijs Niels - 3 de marzo 2008

HTML está caliente de nuevo. Hace algún tiempo la máquina promocional HTML5 se levantó a la velocidad, causando un pequeño mini-escándalo. En un universo paralelo, otros todavía están poniendo mucho tiempo y esfuerzo en el desarrollo de xHTML2. Este (público), la renovación del interés en HTML causado mucha discusión, revelando varios puntos en blanco en los conocimientos generales de HTML. En este artículo se espera que conecte uno de los agujeros más notorio cerrada.

Por delante de muchos desarrolladores de final, HTML sigue siendo principalmente una excusa. Es visto como un lenguaje de anzuelos, construido para añadir JavaScript, CSS y otras mejoras a los documentos web. En los recientes acontecimientos, este pistoletazo de salida un pequeño debate de nuevo la semántica, donde la gente recuerda sobre el valor semántico de HTML. Un recordatorio de la voz de la furia de standardista, siendo despedido por encima de los debates antes peleaban y batallas de sensibilización.
HTML! Semántica =

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Todo el mundo con una pasión por el desarrollo de front-final será reconocer la importancia de la standardista cuando se trata de HTML de sensibilización. Sin embargo, esto no significa que sus métodos deben ir totalmente acrítica. Con toda la atención que planteó para la función semántica de HTML, algunas personas han empezado a ver HTML como un lenguaje puramente semántica. Que no lo es.

Prueba de ello puede verse en divitis la "cuestión que siguieron a la subida inicial de los estándares web. Cuando frente a los desarrolladores final se instó a cambiar de mesa basados en diseños a div diseños basados en algunos tomó el consejo un poco demasiado literalmente. Se convertía todo en divs, ignorando el efecto semántico de los elementos en la mano. Esto provocó una reacción cada vez más grandes de la standardistas y llevó a la demonización del elemento div. Divitis fue considerado como el SIDA, de desarrollo de front-final y el uso de divs se convirtió casi en un tabú. Sólo cuando sea absolutamente necesario se les permitió.
Introduzca mínima HTML

El temor de elementos puramente estructurales (divs y luces) se separaron de un nuevo movimiento. Un grupo de personas que no creen en la absoluta necesidad de que los elementos estructurales y trató de construir páginas con elementos puramente semántica tanto como sea posible. Se desterrado divs adicional cuando se usa para el estilo, pero se olvidó de la función original de la DIV y SPAN en el camino. Al final, hicieron un peor lenguaje HTML de lo que se suponía que debía ser.
dos diseños, diferentes por su estructura

Considere las siguientes dos diseños de página de base. Un diseño simple que consiste en cuatro áreas principales. El área de contexto da información contextual sobre el área de contenido principal. Una disposición como esta no (teniendo en cuenta las mejoras de diseño gráfico) se podría hacer con cuatro divs. Esta es la configuración A, preferido por los minimalistas. El programa de instalación B muestra una situación donde el diseño es construir con cinco divs. Tome un momento para pensar que el programa de instalación que prefiera, sobre una base puramente estructural.
HTML = Semántica + Estructura

HTML es más que la semántica, se trata también de la estructuración de su documento. La principal diferencia entre ambos tipos de elementos es que los elementos semánticos explicar el propósito de un elemento, mientras que los elementos estructurales de explicar la relación de su contenido al contenido de otros elementos en un documento.

En una configuración tenemos cuatro divs separada, estructuralmente todos en el mismo nivel. Esto nos dice que todos los divs se relacionan de la misma manera, sólo el orden de aparición se indican algún tipo de relación. En la configuración de B el contenido principal y el área de contexto se agrupan en un div contenido. Esta es una indicación de que la relación entre el contexto y el contenido principal es mucho más fuerte, o al menos diferente de la relación con el otro elemento. Y por otro lado, el área comparte el contenido de una relación similar con el encabezado y pie de página.

Estructuralmente, B, programa de instalación no sólo tiene más información acerca de la relación entre las distintas áreas, también es más correcto. Esto hace que sea la mejor aplicación de los dos. El div extra utiliza para agrupar los contenidos principales y el contexto no es inútil, pero añade significado útil para el documento.
Introduzca Minimalitis

Minimalitis es la enfermedad formado por la aversión de divitis, y es igualmente peligroso como divitis. Las personas que sufren de minimalitis a escribir documentos mal estructurado ya menudo mal uso (o simplemente el abuso) los elementos para evitar el uso de divs (a menudo usan AP etiqueta) y se extiende (EM, fuerte e incluso la etiqueta son populares b). Otra señal es la combinación de bloques y elementos en línea en el mismo nivel. Si bien esto no es exactamente ilegal, es una seria advertencia de minimalitis posible y estructuración de malo.

Y, sin embargo, la cura para esta enfermedad es simple. Restablecer el poder del DIV y SPAN, sino que lo utiliza para los fines previstos. Divs uso y se extiende para que la estructura de su documento. Contienen elementos que comparten una relación similar en el mismo nivel. Utilízalo para elementos separados de otros que comparten una relación diferente. Y el uso en conjunto con un sentido de clase o id siempre que usted no tiene un elemento semántico válido para describir su contenido.
El futuro de la Estructuración de

Afortunadamente, la gente que trabaja en HTML5 han entendido, y añadió un par adicional de elementos estructurales de la lengua. En vez de dejarnos con un simple div y la duración, dos elementos con un significado estructural simple, añadieron elementos como el pie de página, encabezado, artículo, sección y de un lado para ayudarnos a definir mejor las estructuras en los documentos HTML.

Lo divertido de estos elementos es que no sólo tienen un significado estructural, sino también el sentido semántico. En lugar de simplemente la estructuración de un documento que apuntan a la relación de elementos llevan a otros elementos o la página en general. Etiquetas como el encabezado y pie de página no sólo contienen una sección de un documento, que también apuntan a la función de los elementos contenidos y la relación con los demás elementos de la página.

Esperemos que esto le dará la oportunidad a aquellos que sufren de divitis o minimalitis a escribir mejor código estructurado, manteniendo el documento en semántica como sea posible. Hasta entonces, sólo sabemos que un div tiene más poder que la simple adición de una esquina redondeada o frontera para el diseño gráfico. Los elementos estructurales están ahí para revelar las relaciones entre los elementos, un poder a veces se olvida de HTML.
Personal Promo

Niels Matthijs pasa su tiempo libre que combina la vida de lujo de no tener hijos y una novia maravillosa con la presión angustiosa de los blogs en su monicker Onderhond. Como un desarrollador de front-final que es criado y alimentado a arquitectos de Internet, una empresa belga de invertir mucho tiempo en hacer la Web más accesible y más agradable lugar.

Construir un Lifestream con SimplePie

2009-11-26T10:05:00.000-08:00

Construir un Lifestream con SimplePie

por Raena Jackson Armitage

Un pieIf Berry eres como yo, usted tiene pedazos de tu vida en línea totalmente dispersos por todas partes - fotos, comentarios, tweets, blogs, enlaces favoritos - guardadas en todo tipo de perfiles. Y, por supuesto, muchos de los perfiles de oferta de los canales RSS, maduro para la maceración. ¿No sería agradable para todos los agregados en una página? Yo creo que sí!

En este tutorial vamos a construir una página que recoge los feeds RSS de todos los pedacitos de su vida y se presenta a todos juntos en un solo lugar. Para ello, usaremos SimplePie, un feed de análisis de clase escrita en PHP. Es potente, es de código abierto, y es fácil de usar. A continuación, le hachazo en la salida un poco, y hacen que todo parezca magnífico con HTML y CSS. Las técnicas que vamos a cubrir también son útiles si usted encuentra que usted necesita RSS agregado de muchas fuentes, como una página de noticias. Vamos a empezar!
Lo que usted necesitará

* La biblioteca SimplePie.
* Un servidor web que es capaz de ejecutarlo - hay una prueba de compatibilidad en el paquete de SimplePie que le dirá si su servidor es bueno para ir.
* Si usted Tweet, agarra esta función de Alison Gianotto para ayudar a las auto-Link tweets
* Por supuesto, usted necesitará su editor de texto de confianza!
* Para mayor brevedad, una parte del código está excluido de este tutorial. Si desea ver el cuadro completo, ver el ejemplo terminado o descargarlo.

Let's Begin

En primer lugar, por supuesto, tendremos que identificar las fuentes que desea incluir en la página. Como he dicho, tienen perfiles en muchos lugares, pero por ahora me mantenga a corto y dulce - voy a agarrar mi blog, Twitter, fotos de Flickr, y las pistas Favorito de Last.fm.

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Usted tendrá que recoger las direcciones URL de los feeds a los que desee y, a esconder a algún lugar seguro. Para ello, busca iconos RSS en la página o en la barra de direcciones de tu navegador. Pegar las URLs en un archivo de texto para referencia posterior.

A continuación, tendremos que comprobar que SimplePie es compatible con nuestro entorno de alojamiento. Hay un montón de cosas en esta descarga - por ahora, sólo puede cargar el compatibility_test directorio en un lugar de acceso web en el servidor, y tomar un vistazo en un navegador web. Con suerte, habrá una serie de mensajes que le informa de que está habilitado un número de dependencias. Si es así, es hora de cargar el resto de la biblioteca. (Si usted tiene una carpeta en la prueba llamada de descarga, es seguro que excluir uno.)

Mientras que usted está hurgando en su servidor web, ahora es un buen momento para crear un directorio para SimplePie utilizar como caché. Usted debe hacer este directorio se puede escribir. He elegido la caché.

Tome nota de que has subido SimplePie, y su directorio de caché. En mi caso, ambos están en el mismo directorio donde pienso poner mi página de lifestream.
Preparar de feeds

Vamos a agarrar los feeds! Abre un editor de texto nuevo y comenzar un archivo PHP nuevo, al que llamaremos lifestream.php. Esta será la página que muestra nuestro tiempo lifestream.

En primer lugar, vamos a incluir un componente muy importante - la biblioteca SimplePie sí mismo:
1 De su script PHP. En este ejemplo, acabo de muestra el contenido del elemento del cuerpo de la brevedad, aunque, por supuesto que son: la cabeza! DOCTYPE, y otras necesidades:
1

Mi lifestream awesome
2
3

4
Mi blog
5

6
7
8
9

10
Mi tweets
11

12
13
14
15

16
Mis fotos
17

18
19
20
21

22
Mis melodías
23

24
25
26
Plain View | Imprimir

Mi lifestream awesome

Mi blog

Mi
tweets

Mis fotos

Mis melodías

Revelan los artículos de

Ahora que tenemos un caparazón de un documento, es el momento para empezar a añadir algo más de PHP a esta página para recorrer cada uno de los artículos y se hacen eco de las partes pertinentes de cada elemento - títulos, descripciones, cerramientos, enlaces y mucho más - y envolver el marcado adecuado a su alrededor. Para saber lo que está disponible, examinar el origen de sus alimentos, y echar un vistazo a la documentación SimplePie, específicamente la materia que comienza con get_. Usted encontrará una lista aquí.

Pensando en mis cuatro canales, cada conjunto de elementos debe ser ligeramente diferentes. Con mi blog, te desea incluir un título, descripción, fecha, y hipervínculo. En el feed de RSS de Twitter, el título y la descripción son idénticos, así que voy a utilizar el título. Para los elementos de Flickr, sólo quiero mostrar la imagen. Las pistas, en Last.fm sólo necesita un título, vínculo, y la fecha. Por lo tanto, tendré que crear cuatro circuitos independientes.

Aquí está el bucle para escupir mis artículos de blog, que he colocado dentro de la lista no ordenada en el interior de blog # div. Ésta es bastante sencilla:
1 get_Items ()
Tema 2 US $):?
3

4

5
7 get_title ();?>
8
9
10

11 get_description ();?>
12
13

14
16 get_date ();?>
17
18
19
20
Plain View | Imprimir

get_Items ()
as $ item):?

get_title ();?>

get_description ();?>

get_date ();?>

Este bucle se debe generar una serie de la lista de artículos como este, para cada entrada de blog en mi feed:
1

2

3
4 Título
5
6
7
descripción de blog de entrada de texto
8

9
10 01 de enero 2010, 12:00 am
11
12
13
Plain View | Imprimir

Título

de entrada de texto de descripción del blog

01 de enero 2010, 12:00 am

Demasiado fácil!

Al examinar mi feed de Twitter, me he dado cuenta de que cada Tweet se prefija con mi nombre, dos puntos y un espacio. En este caso, me quieren quitar ese texto. También me gustaría convertir los hashtags, referencias de nombre de usuario y las URL de hacer clic en hipervínculos. En este ciclo, cuando me hago eco del título del tema de la alimentación, voy a envolver $ item-> get_title () en un comunicado str_replace, y luego envolver que en la función de twitterify:
1 get_Items ()
Tema 2 US $):?
3

4

5 get_title ()
8)
9);?>
10
11

12
14 get_date ();?>
15
16
17
18
Plain View | Imprimir

get_Items ()
as $ item):?

get_title ()
)
);?>

get_date ();?>

Flickr feeds 'descripciones son menos que ideales para mis propósitos: que incluir el texto "Nuevo nombre de usuario de una foto", la imagen de tamaño mediano rodeada de un enlace a la página de la foto y la descripción de la foto de Flickr. Sin embargo, me gustaría presentar la más pequeña versión de la imagen y el hipervínculo y, a utilizar el título de la imagen como el texto alternativo. Afortunadamente, Flickr proporciona la dirección URL de la imagen en la forma de un recinto, por lo que voy a utilizar en su lugar.

Flickr cajas siguen siendo de tamaño mediano, pero quiero que el mono, miniatura cuadrados. Eso es tan sencillo como sustituir toda referencia a _m.jpg con _s.jpg.
1 get_Items ()
Tema 2 US $):?
3

4
5 get_enclosures ()
Caja 6 US $):?
7 get_link ()
10);?> "
11 alt = " get_title ();?> "/>
13
14
15
16
Plain View | Imprimir

get_Items ()
as $ item):?

get_enclosures ()
US $ recinto):?
get_link ()
);?> "
alt = " get_title ();?> "/>

Por último, sólo necesito los títulos y las fechas de mi lista de Temas favoritos de Last.fm:
1 get_Items ()
Tema 2 US $):?
3

4

5
7 get_title ();?>
8
9
10

11 get_date ();?>
12
13
14
Plain View | Imprimir

get_Items ()
as $ item):?

get_title ();?>

get_date ();?>

Encontrarás mi ejemplo completado como lifestream.phps en la descarga de código, o más, verla en su totalidad aquí. Si va a utilizar como base para su propio trabajo, recuerde cambiar la URL de marcador de posición para su propio alimento!

Cuando haya terminado de afinar sus artículos, es el momento de subirlo al servidor web, y verla en tu navegador. Si todo ha ido bien, debería ver una serie de listas no ordenadas, cada uno con regalos diferentes de los canales RSS.

Lo único que queda ahora es el estilo de la página y añadir cualquier otras golosinas interesante que considere necesarias. En el ejemplo, usted encontrará un conjunto de estilos muy simple: no dude en utilizar como base para el suyo propio.
Hay más ...

Por supuesto, hay mucho más para SimplePie que el ejemplo muy fácil que hemos visto hoy. Montones de buceo en el wiki y ver lo que es posible - no hay soporte para la visualización de la caja, la capacidad de combinar múltiples canales en una corriente de gigante, y la manera fácil de agregar botones de intercambio de medios de comunicación social a los elementos. Usted encontrará algunos ejemplos de gran SimplePie potencia sitios en el wiki. Disfrutar!

El desastre de Google al indexar paginas Flash

2009-11-26T10:02:00.000-08:00

El desastre de Google al indexar paginas Flash

por Kevin Yank

El 1 de julio, Google anunció que, utilizando la tecnología proporcionada por Adobe, que había mejorado el motor de búsqueda de Google para indexar el texto incrustado en películas Flash. Lo que siguió el consejo era malo de Google, las conjeturas de los desarrolladores web, y, finalmente, algunas respuestas recta.

El anuncio inicial de Google era tan increíblemente vaga como para hacer todo, pero inútil. Desarrolladores marché sabiendo que Google estaba haciendo algo diferente con su contenido de Flash, pero eso es todo.

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Sin embargo, Dion de Google Almaer sugirió que los motores de búsqueda han sido siempre cajas de negro y que era a nosotros a descubrir lo que había cambiado a través de pruebas, casi todo el mundo estaba llorando falta.

La credibilidad de Google fue de inmediato en cuestión debido a la evidente mala asesoría que contenía:

"Si usted prefiere Google para ignorar su menor contenido informativo, tales como los derechos de autor" o "carga" de mensajes, considere reemplazar el texto de una imagen, lo que hará efectivamente invisibles para nosotros ".

Para el registro, en sustitución rápida, accesible, inténtalo de texto de contenido con una imagen de voluminoso simplemente para ocultarlo de los motores de búsqueda no es nunca una buena idea.

Lista de Google de advertencias en el anuncio fueron igualmente desconcertante:

"Googlebot no ejecuta algunos tipos de JavaScript. Así que si su carga de la página web de un archivo de Flash a través de JavaScript, Google puede no ser consciente de que el archivo de Flash, en cuyo caso no serán indexados".

¿Qué tipos de JavaScript? Mejores prácticas establecidas para la publicación de contenido de Flash es utilizar la biblioteca SWFObject JavaScript para superar errores en los navegadores más antiguos, por lo que fue Google diciendo que sólo indexar el contenido de Flash que fue escrito usando roto / HTML obsoletas técnicas solamente?

"En este momento no adjuntar el contenido de los recursos externos que se cargan por los archivos Flash. Si el archivo Flash carga un archivo HTML, un archivo XML, otro archivo SWF, etc, Google separado índice de ese recurso, pero aún no se se considerará parte del contenido de su archivo de Flash. "

Cualquier desarrollador de Flash con experiencia sabe que si usted va a tener una cantidad significativa de texto en el contenido de Flash, su mejor opción es para pegarlo en un archivo XML y lo carga sobre la marcha, por lo que no tiene que reconstruir su Flash película cada vez que cambie el contenido.

Aparentemente no, Google no sólo se vea el contenido de Flash autor de esta manera, pero va a rastrear el archivo XML en cualquier caso y el índice como una página independiente en su sitio! Así es, Google amablemente dirigirá personas en busca de su contenido en el archivo XML que contiene en bruto, en lugar de su mancha, frente Flash-final.

Todas estas cosas tan poco sentido, que muchos desarrolladores se preguntó si era en realidad Google puede indexar contenido Flash de la consecuencia. Dentro de pocos días, sin embargo, el buscador de blogs Guerra ha podido comprobar que Google era de hecho la indexación de contenido Flash.

Finalmente, después de varios días de protestas de desarrolladores, Google admitió que había quedado sin respuesta muchas preguntas, y cuatro días más tarde, que registró una importante actualización que vale la pena leer si usted tiene cualquier contenido de Flash en su sitio.

Aquí está un resumen rápido de lo que hoy conocemos:

* El 1 de julio de liberación no indexar el contenido de Flash insertado con el método de publicación dinámica de la biblioteca SWFObject, que escribe el contenido de Flash en la página completamente con JavaScript. El método recomendado por la publicación estática (en el que dos anidados etiquetas se incluyen en la página) fue indexada. Google es ahora el despliegue de una actualización que se apoya el método de publicación dinámica también.

* El contenido de texto cargado en la marcha de un archivo XML no está indexada, pero Google está trabajando en la fijación del mismo en el corto plazo.

* Google hará todo lo posible para detectar el contenido duplicado cuando está allí para proporcionar una alternativa HTML para el contenido de Flash, y sólo muestra una de las dos versiones en los resultados de búsqueda. Ninguna pena se aplica a la clasificación de búsqueda debido a duplicar el contenido de un sitio.

Todavía hay incógnitas aquí, pero que siempre será el caso con el motor de búsqueda de Google. Aunque se tomó unos días, Google está respondiendo a las preguntas lo que puede, y responder a las preocupaciones de desarrolladores con mejoras.

Antes de mucho tiempo, la mayor parte del texto basado en Flash en sitios Web hará su camino en el índice de búsqueda de Google. Sin embargo, la incertidumbre se mantendrá durante lo profundamente Google es capaz de sonda de contenido de Flash por un tiempo todavía. Proporcionar no el contenido de Flash alternativa seguirá siendo un medio eficaz de garantizar el contenido de su más importante de un lugar en el índice de Google. También ofrece a los usuarios de los no habilitados con Flash de los navegadores (como el iPhone), algo para mirar.

Aunque el mensaje inicial de Google fue bastante a medio cocer, el seguimiento ha puesto la mayoría de mis preocupaciones. ¿Qué tal el tuyo?

Donde el diseño web encaja

2009-11-20T11:10:00.000-08:00

Como diseñador, ¿sabes dónde está tu trabajo en realidad se inscribe en el proceso de diseño?

A todos nos gusta el diseño web. Mirar un cuadro en blanco en una pantalla de ordenador y utilizando sólo el ojo de su mente, un ratón y un teclado para convertirlo en la vida, la respiración Sitio Web no es una hazaña menor, y sin duda hay un pico creativo a la hora de hacer algo como este. Diseño web puede ser una salida de gran valor artístico e inevitablemente trae consigo la alegría que viene con mirar su obra terminada y presentar a los demás.

Sí, en una palabra, el diseño web es muy divertido. Pero seamos realistas: si va a hacer dinero con el diseño Web, a continuación, también se convierte en un negocio.

Si el diseño Web es su negocio, entonces usted debe asegurarse de que está en la perspectiva correcta y se utiliza el procedimiento adecuado cuando se trata de su trabajo. Usted no quiere que sus diseños a fallar, pero, por desgracia, hay una fuerte posibilidad de que van a hacer exactamente eso. Permite dar un paso atrás por un minuto y definir lo que un diseño no es, y por qué no.

Ya tienes pagina web? Crea tu pagina web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosting en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

A falta de diseño de diseño no es necesariamente mala. Esto significa que un diseño "no" no es necesariamente un sitio web feo. Más bien, un diseño no es algo que no funciona correctamente para el sitio donde se utiliza. Un diseño puede ser muy bonito, pero ser terrible para su propósito.

Si a usted (o su cliente) con el objetivo de una página web es para vender algo o generar entusiasmo por una idea específica o de la campaña, tendrá que diseñar en consecuencia. Para un sitio como este, que no desea utilizar una imagen de mar en calma, como el encabezado de los blues de los fondos oceánicos y los negros en su diseño. Claro, usted puede ser capaz de hacer un muy bonito diseño de esta manera, pero es un diseño no porque no completar el objetivo del sitio o un mensaje.

El ejemplo anterior es una exageración, pero sirve para mostrar por qué fracasan tantos diseños. El problema radica en la incomprensión del proceso de diseño.
El Proceso de Diseño Web

Así que muchos diseñadores, sobre todo nuevos, los trabajadores independientes, mezcla el proceso de diseño. Lo peor es que este es un camino directo al fracaso y que ni siquiera lo saben. Nos centraremos en cada uno de los aspectos del proceso de diseño en tan sólo un poco, pero primero, vamos a ver un panorama general. Esto, en su forma más básica, es el proceso de diseño:

* Planificación
Antes de siquiera tener una sola idea en su cabeza sobre lo que su último diseño de Web que va a parecer, que tiene que hacer toda la planificación adecuada. Sobre todo, esto incluye conocer las respuestas a preguntas importantes.
* Contenido de construcción
Es necesario construir todo el contenido de su sitio después de tener un plan claro. Esto no significa necesariamente obtener todos los detalles abajo, pero lo que necesita saber lo que su contenido será y dónde ir.
* Diseño
Ahora vamos a diseñar el sitio Web. Este es un paso crucial, por supuesto, pero si usted ha hecho la planificación y la creación de contenidos en primer lugar, esta parte será la más divertida, y muy probablemente el más rentable! Pero tenga en cuenta que hay varias consideraciones clave que será teniendo en cuenta, por lo que no será en celo con sus pinceles digitales de aquí.
* Desarrollo
Una vez finalizado su diseño, le convierten en XHTML / CSS / PHP / MySQL y todo lo demás necesidades de su sitio. Desarrollo general se refiere a la parte técnica de diseño Web: la materia de codificación y de servidor.

Como se puede ver (atención a esta parte, es importante!), Diseñar el sitio llega tarde en el juego. Muchos diseñadores cometen el error de querer entrar de lleno en la etapa de diseño, porque es donde los talentos de un diseñador brillo. Pero si evitar o simplificar la planificación y las medidas de creación de contenidos, puede acabar con un diseño que probablemente se inscribe en el sitio bastante bien, pero en última instancia, no para ayudar al sitio lograr sus objetivos.

Por lo tanto, es importante que usted conozca y siga este proceso en su trabajo profesional. Echemos un vistazo al proceso con mayor detalle.
Paso 1: Planificación

Hay mucho trabajo por delante antes de que usted realmente llegar a empezar a dibujar, colorear, por el que se fuera, y en general el diseño de su sitio web. Primero, usted necesita las respuestas a estas preguntas. Usted sabrá de estas respuestas si está diseñando un sitio para usted, o su cliente se conocen.

Usted necesita saber las respuestas a estas:

* ¿Cuál es su objetivo con este sitio?
¿Estás tratando de vender algo? Entregar un mensaje? Compartir información? Manténgase en contacto? Etc.
* ¿Quiénes son los visitantes de su sitio web?
En otras palabras, quién es su público objetivo? Esto a veces puede ser tan vaga como "estudiantes" o tan específicos como "revisión anunciantes restaurante publicación."
* ¿Qué quieres que tus visitantes a hacer?
Por lo general, si usted está recibiendo los visitantes a su sitio, usted quiere realmente hacer algo. Algunas respuestas a esta pregunta podría ser, "comprar un producto", "suscribirse a un boletín de noticias", o "aprender a crear mejores sitios Web". Esta es una pregunta importante, asegúrese de que tiene una buena respuesta clara para él.
* ¿Por qué deberían hacerlo?
Mira a este sitio desde la perspectiva del espectador. ¿Por qué deberían estar interesados en su sitio? ¿Qué hay para ellos?

Si usted o su cliente no tiene respuestas claras para las preguntas anteriores, es tiempo de hacer algunas investigaciones. Encontrar algunos de sus clientes y obtener estas respuestas, o hacer algunas llamadas. Visita otros sitios que son similares a la suya en la idea y saber qué tipo de gente que está dibujando. Si este es el tipo de gente estará trabajando, entonces usted tendrá algunas respuestas.

Una vez que haya buenas respuestas claras a todas estas preguntas, usted puede comenzar a crear contenido para su sitio y empezar a hacer algunas decisiones de diseño. Con sólo estas respuestas, se puede determinar los aspectos básicos, como:

* Color
* Diseño
* Familia de fuentes
* Tamaño de la fuente

Colores? Diseños? Fuentes? ¡Ah, aquí vamos, esto está empezando a sonar más como el diseño del Web! Si usted sabe, por ejemplo, que su objetivo es proporcionar consejos de seguridad de vida silvestre para los campistas nuevos, tendrá un diseño que le permite proporcionar texto claro y legible. Debido a que sus consejos le vienen en su mayoría en forma de texto y las ilustraciones, usted querrá un montón de espacio del cuerpo y una fuente que se ve bien en pantalla y espacio y con CSS (Arial es un defecto para algo así). Puesto que usted está tratando con material relacionado con la fauna silvestre, sus colores pueden imitar los de los bosques, con los verdes profundos, los tonos de arena y barro, de madera oscura y colores.

Pero no a los hechos y Photoshop abierta todavía! Usted no está aún bastante listo para empezar a dibujar y colorear. A continuación, usted quiere construir el contenido de su sitio.
Paso 2: Creación de Contenido

Hay una frase que a menudo lanza alrededor en el mundo de desarrollo web: "el contenido es rey". Esto es cierto para la mayoría de webs que hay. La mayoría de sitios web quieren ser encontrados y una manera clave de los sitios que se descubren es a través de consultas de búsqueda. Los motores de búsqueda a menudo la "araña" de su base de datos de sitios web para los nuevos, claro, hasta a la fecha y el contenido original, y sitios web de contenido que tienen buenos son recompensados con más alto rango y por lo tanto se encuentran más a menudo.

No es de extrañar, entonces, que la creación de contenido es un paso tan importante en el diseño Web. Con las respuestas que obtuvo de Paso 1: Planificación, usted debe saber qué tipo de contenido que se quiere empezar a construir. Si su objetivo es vender la música y la electrónica, y su público objetivo son los estudiantes universitarios que buscan comprar cosas como iPods y cámaras digitales, entonces usted querrá escribir algunos contenidos que es alegre, los pies en la tierra, y al momento, mientras sigue construyendo en el estilo de vida popular "," tendencia que vende aparatos como estos tan bien.

O, como otro ejemplo, si su público objetivo es un grupo de profesionales en el campo de la investigación médica y su objetivo es plantear un desafío de nuevas ideas para la colaboración o la discusión, usted querrá escribir el contenido que sale como algo de un blog técnico .

En última instancia, sin embargo, la cosa más importante que quiere hacer en este paso es conseguir que todas sus ideas para el contenido en papel o en un archivo de texto. No es necesario escribir los anuncios de su música y la electrónica de ahora, por ejemplo, y por supuesto usted no quiere pasar el tiempo en este paso para escribir una larga entrada revista médica. Por ahora, es suficiente sólo para obtener todo el contenido en taquigrafía. Sólo asegúrese de tener todo.

Una vez que tenga toda su información en un lugar donde usted puede mirar, usted desea construir su sitio. Este es el paso final antes de empezar a diseñar el sitio. Puede utilizar un programa de computadora para dibujar su mapa de sitio como lo hice a continuación, pero la mayoría de las veces un lápiz y papel que funciona mejor para esta parte.

Echemos un vistazo a un mapa del sitio pequeña muestra de la música y la electrónica de la tienda los que hablamos antes.

Mi música y Electronics Store Mapa del sitio

Aquí podemos ver que nuestra página web enlaces a cuatro otras páginas: Tiendas, Música, Electrónica, y Contacto. La música y las páginas Electronics cada enlace con los incisos diferentes. La página de música le permite elegir un género de música a comprar, y la página Electronics le permite navegar a través de distintos gadgets.

Al diseñar su sitio, es importante recordar el 3-clic en Regla. Simplemente, el 3-clic en la regla establece que un usuario nunca debe tener que hacer clic en más de tres veces en su sitio para hacer nada. En nuestro sitio de ejemplo, podemos ver que si un visitante quería obtener nuestros otras tiendas, sólo se necesita 1, haga clic en la página principal. O, si quieren navegar a través de la música rock a comprar, sólo sería necesario, en Música en la página principal, a continuación, Rock en la página de música. A tan sólo 2 clics.

Si bien la construcción de su sitio, usted debe asegurarse de que cada cuadro (o página) en el mapa de sitio lo tienen algunos de los contenidos que se indica anteriormente. Todo su contenido debe tener un lugar en su sitio, y usted tiene que ser capaz de ver visualmente en qué páginas te ponen cada bit de su contenido.

Y ahora que tenemos la planificación y la creación de contenido de hecho, vamos a diseñar!
Paso 3: Diseño

Muchos diseñadores cometen el error de saltarse los pasos 1 y 2, saltando lugar aquí al Paso 3: Diseño. Pero si ha llegado hasta aquí después de haber hecho el trabajo necesario de antemano, entonces estás en el buen camino!

En el Paso 1: Planificación, usted probablemente ya tiene una buena idea de qué tipos de diseños y el diseño que desea utilizar. Deje que su flujo de la creatividad aquí. Recuerde, hay varios diseños probablemente necesite para su diseño. Usted querrá un diseño para su página web, que, de acuerdo a su sitio, sólo contendrá una información de ingreso o reflejos, algunos enlaces y, dependiendo de sus objetivos, tal vez algunas imágenes interesantes.

Usted también querrá un diseño para páginas de transición. Las páginas de Transición son las páginas que acaba de traslado al usuario a cosas más importantes. En el sitio del ejemplo anterior, la música y las páginas Electronics son sólo páginas de transición. La página de música podría ser pequeña, y contener enlaces a los diferentes géneros de la música de abajo (País, Hip Hop, Música clásica, y Rock). La página Electronics también sería pequeña, y sólo contienen pequeños trozos de información, al tiempo que se vincula a las cosas más importantes, como los reproductores de DVD, televisores, reproductores de MP3 y cámaras digitales páginas. Diseños de página de Transición debe coincidir con el sitio, sino también ser sencillo para que los usuarios pueden emplear el menor tiempo posible en ellas.

Es probable que no quiere oír esto, pero incluso en este punto, usted podría considerar dejar de Photoshop cerrado un poco. En su lugar, intente dibujar varios diseños para su sitio en papel. Es una buena idea crear múltiples presentaciones sólo para ver cómo se "siente" con el sitio que estamos construyendo, y usando Photoshop para crear un montón de diseños que usted puede ser que ni siquiera uso es mucho tiempo. Es mucho más rápido para hacer algunas presentaciones rápida y sucia en papel para tener una idea aproximada de qué manera quiere ir con el diseño.

En este punto, probablemente tienes un dedo en el gatillo derecho twitchy acerca ahora a la hora de disparar su arma de fuego de diseño. Pero tómelo con calma. Aquí hay algo a considerar sobre el diseño.

¿Sabía usted que Apple, la compañía detrás del diseño del iPhone un enorme éxito, el iPod y ordenadores iMac y MacBooks, utiliza un proceso de diseño que ellos llaman "10-3-1?" Es verdad, en el 2008 South by Southwest Interactive Festival, asistí a una presentación de Michael Lopp, director de ingeniería senior de Apple, donde se reveló poco pequeña de la información a una sala abarrotada lleno de diseñadores.

He aquí cómo funciona. Los diseñadores de Apple deben cumplir con la regla 10-3-1, donde los diseñadores primero se dan mucha libertad creativa y llegar a 10 bueno, los diseños saludable para algo. Esto podría ser para un sitio o un producto, entre otras cosas. Luego, después de subir con 10 buenos diseños, que deben pasar por las dolorosas ya menudo difícil tarea de eliminar 7 de ellos, dejándolos con 3 diseños muy buenos para trabajar.

Entonces, los diseñadores de Apple pasar algunos meses en estas 3 diseños mejorarlos y ajustarlos a la caza de Apple. Finalmente, después de todo este trabajo, los diseñadores más que eliminar 2 de los diseños, hasta que se queda con sólo 1 de diseño de gran alcance que se realiza el trabajo final y se le da la bien conocida marca Apple y el polaco.

En los últimos años este tipo de pensamiento ha sido muy bueno para Apple, y sus diseños han tenido algún éxito. Si desea que sus diseños para tener éxito, así, entonces es aquí, en este paso, Paso 3: Diseño, que debe tomar el tiempo antes de abrir el Photoshop para realmente planificar su diseño, teniendo en cuenta todo lo que aprendieron en el paso 1 y saber lo que el sitio fluirá como en el paso 2.

Asegúrese de finalizar su diseño. Una vez tengas tu diseño listo, no hay vuelta atrás.
Paso 4: Desarrollo

Si ha finalizado su diseño (ya sea para usted mismo o con su cliente), entonces usted puede comenzar a desarrollar el sitio. Dependiendo de cómo desea que el sitio funcione, esto podría entrañar complejas como la programación PHP y MySQL backend, o simplemente podría ser tan simple como algunos básica en HTML y CSS. De cualquier manera, este paso consiste en la codificación real del sitio.

Algunos diseñadores son los únicos diseñadores y tratar sólo los aspectos básicos de XHTML y CSS, optando por trabajar con un socio o contratar a alguien para hacer la codificación de un sitio. Otros diseñadores conocer el desarrollo y la codificación de lado tan bien como la parte de diseño, pero estos diseñadores no son del todo demasiado común.

De cualquier manera, no vamos a entrar en el desarrollo del sitio aquí. A los efectos de este artículo, es suficiente para decir que este es el paso final, después de que el diseño está hecho, en la creación de una página web.
Así que, como se puede ver ....

Así que, como se puede ver, en realidad el diseño de una página web viene casi por completo por última en el proceso de diseño web. Si desea que sus diseños para tener éxito, usted tomará las medidas necesarias para trabajar hasta el diseño.

Es fácil trabajar con la mentalidad de "me gustaría obtener este diseño hecho para que yo pueda añadir a mi cartera". Sí, su cartera es una parte importante de ser un diseñador web. Pero también es clave para producir un producto que realmente funciona para sus clientes (y para usted mismo). Si su trabajo es de alta calidad y éxito, entonces usted puede esperar un gran éxito para ti, también.

Diseño de paginas web y accesibilidad

2009-11-20T10:48:00.000-08:00

Para el tercer grupo minoritario más grande en los Estados Unidos - más de 40 millones de personas - la gran mayoría de los sitios web son parcial o totalmente inaccesibles.

La idea de una página web que excluye a los afro-americanos o latinos es casi impensable, pero los estadounidenses con discapacidades se enfrentan constantemente a webs que no toman en cuenta sus necesidades. Afortunadamente, Yahoo muchos de los sitios web más populares del mundo - entre ellos!, Google, YouTube y Wikipedia - están trabajando para ser accesible a los discapacitados, pero hay muchos, muchos sitios más por ahí que todavía tienen un largo camino por recorrer.

Ya tienes pagina web? Crea tu pagina web ahora facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosting en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y dominios MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Todos sabemos que nadie intencionalmente se propone crear un sitio inaccesible. Después de todo, el punto de tener una página web es llegar a la gente - y la mayoría de los diseñadores Web que haría cualquier cosa para llegar a 40 millones de ellos. Sin embargo, para muchos diseñadores y desarrolladores, la idea de crear un sitio web accesible es increíblemente abrumadora, o incluso asfixiante.

Tuve la oportunidad de hablar con el diseñador Dan Rubin y desarrollador Chris Heilmann en el Jam Session Webmaster principios de este año. Estos chicos viven y respiran la accesibilidad Web, y fueron más que feliz de contestar a mis preguntas sobre el tema.

"[Hay] un montón de ideas preconcebidas de que las cosas son de alguna manera difícil de aplicar, que se pierde mucho control visual, y que tiene que ser fea", dijo Rubin. "Todas esas cosas están mal."

Heilmann se hizo eco de este sentimiento: "Los desarrolladores piensan, 'no puedo usar el frío, las nuevas tecnologías porque no son accesibles," en lugar de mirar a estas tecnologías y su accesibilidad. Así que es como la gente no ve una interfaz accesible como una oportunidad para hacer un enfriador de interfaz, sino como algo que está bajando el nivel intelectual lo que realmente quiere hacer ".

El hecho es que la accesibilidad no está reñida con el rendimiento o el atractivo de todos. Un sitio web accesible es un buen diseño web - que mucha más gente que los discapacitados puedan disfrutar. Páginas web diseñadas pensando en la accesibilidad también trabajar mejor con conexiones de acceso telefónico y de dispositivos de mano como las moras y iPhones - y como un bono adicional, por lo general también mejor indexadas por los motores de búsqueda como Google.

Vale la pena señalar que incluso puede haber consecuencias negativas de ignorar la accesibilidad. El 27 de agosto de este año, Target pagado más de $ 6 millones como parte de una demanda colectiva presentada por Bruce F. Sexton, Jr. y la Federación Nacional de Ciegos. El peso pesado minorista web era inaccesible para los usuarios ciegos, y el tribunal dictaminó que violó la Ley de Estadounidenses con Discapacidades.

Naturalmente, es una actitud equivocada a sentir fuertes armados en el diseño de un sitio web accesible por temor a ser demandados. La lección a ser tomados de la demanda es que Target perdido mucho más que 6 millones dólares: También perdió millones de clientes potenciales, por no mencionar el respeto de un montón de gente, con discapacidad y discapacitados por igual.

La actitud correcta es el enfoque de diseño web - en particular con el objetivo de la accesibilidad - con una mente abierta y una pasión por la originalidad. También es importante recordar que el establecimiento de límites a veces te puede obligar a ser más innovadoras.

"Como diseñador, las limitaciones son la clave", dijo Rubin. "Si usted no tiene limitaciones, puede perderse muy fácilmente, y no hay ninguna dirección. ... Utiliza las limitaciones a su ventaja. "

Heilmann recomendó que me echa un vistazo a la BBC Ouch! para un ejemplo de un sitio atractivo, exitoso que funciona dentro de las restricciones de accesibilidad. El sitio, que se centra en cuestiones de discapacidad todos los días, es un ejemplo del tipo de diseño Web fuerte que todo el mundo - especialmente los discapacitados - se puede apreciar.

A primera vista, este sitio no es diferente de la mayoría de los demás. Es visualmente atractiva y rica en medios de comunicación tales como imágenes y podcasts. Sin embargo, ¡Ay! También ofrece versión en texto único contraste y alta en fácil de localizar lugares, pero discreta. Este tipo de accesibilidad de las opciones respetuosas son frecuentes en todo el sitio. Para otro ejemplo, echa un vistazo a la opción de ver una transcripción de "Querido Amigo de movilidad reducida", un cómic que aparece regularmente en Ouch!:

Esta transcripción probablemente tuvo todos los de 30 segundos para escribir, y otro minuto más o menos a incluir en el diseño de la página. De ninguna manera lo hace en detrimento de la página - se oculta de forma predeterminada -, sino que proporciona un servicio atento a los visitantes ciegos que muchos sitios web que dejar de incluir. Evidentemente, si tomamos ¡Ay! como ejemplo, la funcionalidad atractiva y la accesibilidad no son mutuamente excluyentes.

Cuando le pregunté a Rubin y Heilmann a darme un ejemplo de un sitio que hace un trabajo pobre de ser accesible, Rubin bromeó con una sonrisa irónica, "Todo lo demás".

"No tenemos tiempo", agregó Heilmann.

"Eso es lamentable", le dije.

"Lo más lamentable es que no es intencional", dijo Rubin. "Es debido a la falta sólo de los conocimientos y la conciencia. La ignorancia, en realidad, pero las personas son ignorantes de lo fácil que es hacer que funcione para todos. Y eso es todo lo que necesita, es una falta de pensamiento, la falta de conciencia, y las cosas pueden ir muy mal. "

Con el fin de evitar que las cosas van muy mal, es importante saber quién debe ser el diseño para. Tome en consideración las personas con problemas de visión, incluyendo la ceguera, la ceguera de color, y la mala vista. Los ciegos podrán utilizar lectores de pantalla o de hardware que convierte el texto en pantalla a Braille, pero los usuarios de Internet que son hipermétropes simplemente ampliar la pantalla de texto utilizando el navegador o el software de magnificación de pantalla. El texto más grande, en particular, los vínculos, también es útil para las personas con condiciones como la parálisis cerebral, enfermedad de Parkinson, la distrofia muscular, o accidente cerebrovascular, porque no pueden usar un ratón con precisión. Algunos usuarios con discapacidad no puede ser capaz de usar el ratón en absoluto - en su lugar, teclados, software de reconocimiento de voz y dispositivos de acceso único interruptor son todas las alternativas viables.

Otro grupo importante a tener en cuenta son los duros de oído, que dependen de subtitulado, lenguaje de signos, y transcripciones escritas para disfrutar plenamente de audio y vídeo. También es importante recordar que las personas sensibles a las convulsiones pueden no ser capaces de ver las pantallas de parpadear y que las personas con dislexia y discalculia pueden tener dificultades para la lectura del contenido proporcionado.

Las adiciones más útiles que usted puede hacer en su sitio son de alto contraste y versiones de sólo texto, así como transcripciones completas de audio, video, Flash ™, y otros multimedia que aparece. Aquellos que quieran conocer las pautas oficiales para el diseño de la accesibilidad debe comprobar fuera de la Iniciativa de Accesibilidad Web de Accesibilidad para el Contenido Web y la Guía de la Sección 508 de la Ley de Rehabilitación EE.UU.. Este último sólo es necesario para los sitios federales, sino que establece algunas directrices útiles para las personas que quieren diseñar de acuerdo a las normas de accesibilidad del gobierno de EE.UU..

Aunque es útil para entender los diferentes tipos de discapacidad de la página Web puede encontrar, Rubin advirtió que pensar en diseñar para la accesibilidad como "una lista de los tipos de discapacidad."

"Es mucho más que eso", dijo. "Una de las cosas importantes que debe recordar es que hacer un sitio bien accesibles, hace muy fácil de usar para todos".

Eso es porque los sitios accesibles operar en los principios de diseño web adecuado. Como Heilmann explicó, "es todo sobre la estructura y flexibilidad. Si el sitio funciona sin ningún tipo de hoja de estilo, sin JavaScript, y le da una estructura adecuada ... entonces tienes un gran paso hacia un buen producto. "

Esto significa que su sitio debe utilizar semánticamente correcto (X) HTML para la estructura y el contenido y CSS para la maquetación. Su (X) HTML contenido debe ser lógicamente estructurado, y los elementos deben agruparse en una forma coherente. Esto es especialmente importante para las personas que utilizan lectores de pantalla, que la lectura del texto de página en orden y se confunden por las malas (X) HTML, como el diseño basado en la tabla. Los lectores de pantalla tampoco puede leer Flash ™ o JavaScript (no puede ni arañas sitio utilizado por los motores de búsqueda), así que debe asegurarse de que todos los vínculos y el texto son accesibles a través de buenos, pasado de moda (X) HTML.

"Si tienes algo que se actualiza una página, un vínculo real que apunta a un documento real, y no sólo algo de JavaScript al azar o un archivo de película Flash ™ o lo que sea", dijo Heilmann.

Otra regla básica de diseño que resulta sumamente útil para las personas con discapacidad, sino también tiende a perderse en la refriega es el uso de etiquetas ALT para las imágenes y gráficos. Si quieres ir un paso por encima y más allá, incluirá una descripción de la imagen a la "Querido amigo de movilidad reducida." Por lo menos, debe incorporar el contexto apropiado para las imágenes en el texto que los rodea. Esto no quiere decir que usted debe incluir una descripción torpe que ralentiza su narración, pero es una buena práctica para asegurarse de que sus imágenes y texto de trabajo en conjunto. Piense en ello como un artículo en un periódico. La imagen o gráfico no se produce en apenas ocupe espacio - que sirve para complementar la historia.

En el mismo sentido, que nunca deben tratar de compensar el contenido superfluo débil con los elementos visuales. No hay sustituto para el contenido claro y bien escrito. Incluso si no está seguro de sus habilidades de escritura, nunca hay excusas para los errores de ortografía. No sólo es la corrección ortográfica es una buena idea, en general, pero también es importante recordar que los errores ortográficos pueden echar a perder lectores de pantalla, lo que oscurece su significado aún más.

Tal vez la herramienta de diseño más importante para recordar la hora de diseñar para la accesibilidad es la mejora progresiva.

"Cuando se quita la interacción de alto nivel, las capas de alta nivel, para llevar JavaScript, debería seguir funcionando", dijo Rubin. "Quitad CSS, debería seguir funcionando. Eso no es realmente algo difícil de hacer, pero requiere de pensar en ello desde el principio y la creación en esa forma de capas. "

"Se ve en la profundidad de la piscina antes de que saltes", agregó Heilmann.

"Una vez más, duro", dijo Rubin, "pero si no pensar en ello, es fácil de romper el cuello."

Los mejores diseñadores web saben la importancia de mirar antes de saltar. Esto significa que las pruebas de sus sitios en varios navegadores - Firefox, Internet Explorer, Chrome, Opera, Safari, incluso Netscape. Para la accesibilidad diseñador consciente, que sólo tiene sentido para agregar algunas otras medidas a esta rutina de pruebas rigurosas. Esto incluye la visualización de la página en un navegador de sólo texto como Lynx, ver el sitio completo en la pantalla monocroma, probando un texto a discurso del navegador tales como JAWS, Window-Eyes, o Fire Vox, utilizando el sitio sin un ratón , y desactivar JavaScript y CSS para ver si el sitio es aún navegable.

Si el diseñador ha mantenido los principios de la mejora progresiva en mente, se aseguró de utilizar estructuralmente válida (X) HTML, y siempre las alternativas de texto para multimedia - en otras palabras, si el diseñador se ha ceñido a las normas de diseño web adecuado - el portal debería funcionar bien para todos.

"No es tan difícil", dijo Rubin. "Estas cosas no le hará daño, y no es difícil. Es realmente muy fácil, y va a hacer su vida más fácil. Sólo tienes que abrir tu mente a ella ".

Capturas de pantalla tomadas de la BBC Ouch!

Cinco maneras de hacer su sitio más popular

2009-11-20T09:50:00.000-08:00

Cinco maneras de hacer su sitio más popular
por Chris Reynolds - 13 de marzo 2009

La Web se ha convertido en una jungla de verdad, y encontrar nuevos sitios fresco hoy en día no siempre es la cosa más fácil del mundo. Si usted tiene una página web, usted está tratando con el otro extremo de esta cuestión. ¿Cómo hacerse notar en línea, y hay algo que usted puede hacer para aumentar su popularidad?

Hay ciertamente! Éstos son los cinco principales maneras en que puede reforzar su sitio web y aumentar su visibilidad en línea.
1. Hosting Fuerte

Este primer punto es sobre todo importante para aquellos que no tienen su propio sitio web todavía, pero con entusiasmo desea crear una. Después de haber seleccionado el nombre de dominio, el siguiente paso es elegir un plan de hosting. Hay muchas buenas alternativas a precios asequibles, pero lo que los profesionales suelen recomendar es especializada de alojamiento de blogs. Esta forma de alojamiento web te permite crear un sitio web de aspecto profesional en ninguna hora en todos. ¿Por qué es importante mencionar cuando se trata de hacer su sitio más popular? Bueno, sin fuertes de hosting, usted no será capaz de manejar un tráfico a su nuevo sitio Web, lo que significa que no tienen ninguna posibilidad de convertirse en todo muy querido.

Por supuesto, la firme conclusión de alojamiento suele ser más fácil decirlo que hacerlo. La industria del alojamiento ha crecido muy popular en los últimos años, y esto ha dado lugar a un gran número de empresas que ofrecen diversos servicios de alojamiento. Pero no se deje engañar por sus maneras difíciles de hacer sonar como si son los mejores en la industria. Recomendamos su pareja con una empresa que tiene una sólida reputación y experiencia en el negocio. Usted podría comenzar en Web Hosting Buscar comentarios y otra información para ayudarle a encontrar el ajuste correcto.

Cuando se trata de hosting, usted debe comparar las diferentes características se incluye con el plan. Asegúrese de que está garantizado por lo menos del 99,9% y que el apoyo al cliente es fácil de conseguir. Nunca se sabe cuando podría necesitan. Del mismo modo, también es bueno saber exactamente qué tipo de números en términos de espacio en disco y ancho de banda va a estar autorizados a utilizar y administrar. Algunos proveedores también prohíben a sus clientes para cargar música o archivos de vídeo a sus servidores, incluso si es para uso personal. Es importante pedir asistencia al cliente para resolver esas cuestiones antes de comprar un plan. Algunas otras cosas que usted puede ser que se considere preguntarle si tu nombre de dominio de la información del Registro serán protegidos y cuántos diferentes cuentas de correo electrónico va a estar autorizados a utilizar como parte del convenio de acogida.
2. Optimice su sitio web
Un robot cute búsquedas algo de código binario

Para ser un verdadero éxito en línea, usted tendrá que conseguir una clasificación alta en los motores de búsqueda. Para tener éxito en esto, usted debe aprender tanto como usted posiblemente pueda sobre la optimización del Search Engine (SEO). El tema de SEO es enorme y puede ser bastante intimidante al principio, pero una vez que la caída de ella, usted podrá ver los beneficios de inmediato y, probablemente se preguntará por qué no empezar con ella antes. Un par de cosas que usted puede hacer para comenzar es asegurarse de que está utilizando las palabras clave adecuadas y de escribir para sus visitantes, así como para los motores de búsqueda. Escribir para los motores de búsqueda es importante, ya que quiere conseguir alto posicionamiento, y la escritura para los visitantes es de la esencia, porque quiere que quedarse y volver a su sitio web.

Cuando esté satisfecho con las palabras clave y el contenido de su sitio, es hora de empezar a trabajar con la construcción de vínculo. Los motores de búsqueda determinar gran parte del valor de una determinada página / sitio mirando el número de enlaces entrantes. Intercambio de enlaces es una de las más populares y exitosas maneras de obtener un buen ranking en los motores de búsqueda, y es muy fácil de hacer. Basta con visitar un sitio web que te guste y pedir al webmaster si está interesado en un intercambio de enlaces - no tiene que ser más complicado que eso.

Tener algo interesante y distintivo en su página es una gran manera de atraer a socios potenciales del acoplamiento. Por ejemplo, si está ejecutando una página web sobre nombres de dominio, ¿por qué no añadir un nombre de dominio corrector disponibilidad a su página principal? Lo más probable es atraer enlaces de otros sitios relacionados con el nicho, y la gente tiende a volver de nuevo, si quieren saber si un dominio está disponible o no. Trate de ser creativo extra fijarse aparte de los competidores.
3. Tome ventaja de los Social Media Optimization

A pesar de SEO debe ser una parte importante de la optimización del sitio, no debe terminar allí. Social Media Optimization es probablemente tan importante, ya que es una de las herramientas de marketing más potente disponible hoy en día. Una campaña de optimización de los medios de comunicación social deben incluir un par de cosas diferentes. En primer lugar, asegúrese de que el contenido de su sitio o blog es pertinente a su tema y no por la fecha. Visite los sitios similares y unirse a la discusión en dejar comentarios sobre los puestos / artículos - no tenga miedo de decir lo que está en tu mente. Hágase visible en Facebook y MySpace. Otros tres sitios que pueden ser útiles para la optimización de los medios de comunicación social son Twitter, Flickr y YouTube. Los dos últimos no siempre son aplicables. Asegúrese de que sólo se aprovechan de ellos cuando es el momento adecuado - se podría hacer más mal que bien si no lo hacen.

Obviamente, no se olvide de incluir enlaces salientes a su sitio web en cualquier sitio de los medios de comunicación social que utilice. Incluso si su enlace tiene un "nofollow" atributo unido a él (por ejemplo, como en Facebook), todavía atraiga a nuevos visitantes y clientes potenciales para el sitio. Por último, la campaña debe basarse en las plataformas de ayuda, como CoffeeCup Flash Blogger ™, que hacen fácil crear y editar contenido.
4. Trae sus visitantes Participa

Un punto crucial para que su sitio crezca en el número de visitantes es para que participen. Trate de escribir en un estilo personal, y no tener miedo de dejar una pregunta abierta. Si esto no debería hacerlo, ¿por qué no celebrar un concurso? Esto es muy probable que la gente hable sobre su sitio. El premio no tiene por qué costar una fortuna, ya que la gente le gusta competir, independientemente de lo que el premio es - es la naturaleza humana.

Otras maneras fáciles de conseguir sus visitantes en cuestión es mediante la inclusión de un foro en su sitio o la posibilidad de hacer comentarios sobre tus posts / artículos. Todo el mundo quiere expresar sus propias ideas y pensamientos sobre los temas, y por lo que les permite hacerlo, también aumenta la probabilidad de visitantes que regresan a ver cómo se agradece sus comentarios. Como un bono adicional, si el tema es extra popular, el debate podría atraer el interés de otros sitios web también!
5. Hacer hincapié en la usabilidad en el diseño de
Los dedos en un teclado

Invertir en un buen diseño es más importante que algunas personas parecen pensar. Con un diseño hermoso, que crecerán en la confianza entre sus lectores / espectadores. Un hecho importante a recordar es no sobre-el diseño de la web. No importa cuántas horas usted ha puesto en el diseño del sitio web si nadie sabe cómo usarlo. Que algunos no-Internet-amigos conocedores navegar a través de su sitio web antes de lanzarlo a escala completa. Si les resulta fácil, por lo que el resto de sus visitantes.

Es difícil decir exactamente lo que hace un diseño hermoso y funcional. Lo que queda bien para una persona puede parecer terrible para otro. Sin embargo, existen tendencias básicas en el diseño Web, y si usted sigue estos, usted puede estar seguro de complacer a la mayoría de sus visitantes. Una popular pocas tendencias de diseño web para el 2009 son múltiples diseños de columna, grandes ilustraciones, y un montón de espacio en blanco.

Si desea permanecer en el lado seguro, entonces es una buena llamada para hacer la disposición y características de diseño en la página de fácil acceso y fácil de entender. Trate de utilizar la codificación estándar y evitar el exceso de la parte superior animaciones Flash. Algunas personas pueden tener los ajustes del navegador, que les impide ver Flash, lo que significa que podría perder los visitantes valiosos. Trate de pensar cómo piensa el visitante, y su sitio web crecerá más populares y respetadas día tras día.

Articulos de diseño de Paginas Web

Simple CSS: Creación de texto más legible

El futuro del Diseño web y el software

!2 tips que todos las paginas web necesitan

HTML los fundamentos de la web

Construir un Lifestream con SimplePie

5 7 get_title ();?>8 9 10 11 get_description ();?>12 13 14 16 get_date ();?>17 18 19 20Plain View | Imprimirget_Items () as $ item):?

get_title ();?> get_description ();?> get_date ();?> Este bucle se debe generar una serie de la lista de artículos como este, para cada entrada de blog en mi feed:1 2

3 4 Título5 6 7 descripción de blog de entrada de texto 8 9 10 01 de enero 2010, 12:00 am11 12 13 Plain View | Imprimir

El desastre de Google al indexar paginas Flash

Donde el diseño web encaja

Diseño de paginas web y accesibilidad

Cinco maneras de hacer su sitio más popular

5
7 get_title ();?>
8
9
10

11 get_description ();?>
12
13

14
16 get_date ();?>
17
18
19
20
Plain View | Imprimir

get_Items ()
as $ item):?

get_title ();?>

get_description ();?>

get_date ();?>

Este bucle se debe generar una serie de la lista de artículos como este, para cada entrada de blog en mi feed:
1

2

3
4 Título
5
6
7
descripción de blog de entrada de texto
8

9
10 01 de enero 2010, 12:00 am
11
12
13
Plain View | Imprimir