Página 2 de 3«123»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Configuración del diseño de otros elementos de la web
Configuración del diseño de otros elementos de la web
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 12:44 PM
Estilos de CSS para el calendario

Code
/* Calendar Style */
.calmonth {text-align:right; }
.calwday {border:1px outset; background:#D9D775; width:17px;}
.calwdayse {border:1px outset; background:#D9D775; width:17px; font-weight:bold;}
.calwdaysu {border:1px outset; background:#D9D775; width:17px; font-weight:bold; color:#FF0000;}
.calmday {border:1px inset; background:#F5F5F5;}
.calmdaya {border:1px inset; background:#F5F5F5; font-weight:bold;}
.calmdayis {border:1px outset; background:#EFEFEF;}
.calmdayisa {border:1px outset; background:#EFEFEF;font-weight:bold;}
a.calmonthlink:link {text-decoration:none; color:#938D4A;}
a.calmonthlink:visited {text-decoration:none; color:#938D4A;}
a.calmonthlink:hover {text-decoration:underline; color:#938D4A;}
a.calmonthlink:active {text-decoration:underline; color:#000000;}
a.calmdaylink:link {text-decoration:underline; color:#938D4A;}
a.calmdaylink:visited {text-decoration:underline; color:#938D4A;}
a.calmdaylink:hover {text-decoration:underline; color:#000000;}
a.calmdaylink:active {text-decoration:underline; color:#000000;}
/* -------------- */

Cómo cambiar el aspecto de la barra de desplazamiento

Quote
scrollbar-3dlight-color
Configura el color de los límites derecho e izquierdo de la barra de desplazamiento, su deslizador y flechas.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-arrow-color
Configura el color de las flechas en los botones de la barra de desplazamiento.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-base-color
Configura el color del deslizador y botones-flechas de la barra de deslizamiento.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-darkshadow-color
Configura el color de la “sombra” del deslizador y botones del desplazamiento de la barra de desplazamiento (color de los límites derecho e inferior).
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-face-color
Configura el color del deslizador y botones del desplazamiento de la barra de desplazamiento.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-highlight-color
Configura el color de la parte “alumbrada” del deslizador y botones del desplazamiento de la barra de desplazamiento (color de los límites izquierdo y superior).
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-shadow-color
Configura el color de la parte “no alumbrada” del deslizador y botones del desplazamiento de la barra de desplazamiento (colores de los límites derecho e inferior). No confundir con el color de la “sombra” que es el efecto de scroll-darkshadow-color.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-track-color
Configura el color de la parte efectiva de la barra de desplazamiento, o sea, aquella su parte por la cual mueve el desplazador.
Se apoya por el Internet Explorer a partir de 5.5



El código estándar $LOGIN_FORM$ puede no convenir para cada diseño, o tú simplemente no quieres que la marca “Recordar” siempre sea activa, o tal vez quieras ir practicando la configuración del diseño... El siguiente ejemplo es pa’ ti.

Quote
<form method="POST" name="loginform" action="http://YOUR_SITE_URL/index/">

Login: <input type="text" name="user" size="20" style="width:100px" maxlength="25">
Password: <input type="password" name="password" size="20" style="width:100px" maxlength="15">
<label for="rem"><input id="rem" type="checkbox" name="rem" value="1" checked>remember</label>

<input type="submit" value="Log in »">

<input type="hidden" name="a" value="2"><input type="hidden" name="redirect" value="0">

</form>

<a class="forRegLink" href="javascript://" onClick="window.open('http://YOUR_SITE_URL/index/5','reminder','top=0,left=0,width=300,height=140'); return false;">Forget password</a>
<a class="forRegLink" href="$REGISTER_LINK$">Registration</a>

<script type="text/javascript">document.loginform.redirect.value=window.location.href;</script>

Explicaciones:

Quote
<form method="POST" name="loginform" action="http://YOUR_SITE_URL/index/">

código obligatorio donde solamente es necesario cambiar la dirección de tu web.

Quote
Login: <input type="text" name="user" size="20" style="width:100px" maxlength="25"> Password: <input type="password" name="password" size="20" style="width:100px" maxlength="15">

campos para introducir el login y la contraseña del usuario, el aspecto e inscripciones pueden cambiarse, a excepción de name="user" и name="password"

Quote
<label for="rem"><input id="rem" type="checkbox" name="rem" value="1" checked>remember</label>

bandera que indica si necesita el usuario poner cookie prolongado para que no necesite introducir la contraseña una vez más. Se lo puede quitar, o hacer inactive, es decir, borrar la palabras “checked”.

Quote
<input type="submit" value="Log in »">

botón para enviar el formulario, lo puedes cambiar como quieras, lo principal es que el tipo sea (type=”submit”)

Quote
<input type="hidden" name="a" value="2"><input type="hidden" name="redirect" value="0">

Campos obligatorios ocultos del formulario, sin primer campo el formulario no funcionará, el segundo campo es necesario para la redirección a la página de donde introdujeron el login. Estos tags deben preceder al tag de cierre del formulario </form> (consultar la documentación sobre HTML).

Quote
</form>

tag obligatorio, debe pasar después de todos los tags descritos arriba.

Quote
<a class="forRegLink" href="javascript://" onClick="window.open('http://YOUR_SITE_URL/index/5','reminder','top=0,left=0,width=300,height=140'); return false;">Forget password</a> <a class="forRegLink" href="$REGISTER_LINK$">Registration</a>

Enlaces para el registro y recordatorio de la contraseña, los puedes cambiar a tu gusto, puedes eliminar pero mejor que queden (lee los artículos sobre usabilidad).

Quote
<script type="text/javascript">document.loginform.redirect.value=window.location.href;</script>

Javascript que otorga al campo oculto “redirect” la dirección de la página siguiente, gracias a esto un usuario puede entrar y regresar a la página corriente. Este código debe seguir después del formulario de entrada. Si esta función no se requiere, puede estar en desuso.



De misma manera se puede cambiar también otras variables que exponen el código NTML grande si lo deseas cambiar a tu gusto (por ejemplo: formulario de encuesta, búsqueda etc).

Y una cosa más (seguro de que es más importantísima): en caso de que no hayas comprendido lo escrito aquí, esto significa que todavía es temprano trabajar en uCoz... Ven leyendo artículos sobre HTML.
Para poner una imagen en vez del botón “Entrar” hay configurar el clase loginbutton

Code
.loginbutton{background: url('pictures/logm.gif'); border: 1px solid #000000; color: #ffffff; font-size:7pt;}

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 16 | 2:28 PM
Ni fijo ni líquido, elástico. Como maquetar una web

La eterna discusión sobre qué tipo de diagramación (layout, maquetación) es mejor para cierto tipo de páginas debería quedar al fin zanjada. En un principio, existían dos tipos de diagramación. Estos tipos estaban diferenciados en el tipo de unidades que se usaban para definir los anchos de los elementos. Por un lado estaba el ancho fijo, basado en píxeles, y por otro el ancho variable, basado en porcentajes. Ésto daba como resultado: páginas de anchos inamovibles el primero y páginas que se acomodaban al ancho de la ventana del navegador el segundo.

En una época, el ancho fijo fue el preferido por los diseñadores web no porque fuera mejor que el ancho variable sino porque era más fácil de manejar y controlar el resultado (especialmente usando programas de tipo WYSIWYG). Obviamente, cuando un diseñador web decide “controlar el resultado”, si no atiende a ciertos cuidados, es muy probable que lo haga en detrimento de las preferencias del usuario que usará su página. Una mala costumbre de aquella época era, además de poner anchos fijos a los elementos, definir tamaños fijos (también en píxeles) a la tipografía. Resultado: una gran pérdida en la accesibilidad de las páginas web (que sumada a la costumbre de maquetar con mil tablas anidadas y mil grafiquitos sin más utilidad que “embellecer” la página daba como resultado un verdadero calvario para todo usuario con algún tipo de discapacidad visual).

Los anchos variables estaban reservados a “los que sabían” porque eran más difíciles de predecir y, a la vez, lograr un diseño vistoso que no se “rompiera” cuando se pasaba de verlo en una resolución de pantalla de 640*480 a una de 1024*768 era demasiado complicado y desgastante para la mayoría, además existía (y aún existe) el mito de que es un sistema más usable y/o accesible, lo cual no es cierto. ¿Qué ganaba el usuario? personalmente, siempre creí que nada, salvo tener menos espacios libres en la pantalla (si a ésto se le puede llamar “ganancia”). Además, esta práctica se complementaba casi siempre con tamaños de tipografía fijos, lo cual tampoco ayudaba al resultado final. Leer textos largos en pantallas cada vez más grande se hacía cada vez más complicado. ¿Por qué? porque no es lo mismo el 80% de 800px que el 80% de 1280px y saltar de una línea a la siguiente (sin tener que buscar cuál es la siguiente) no es tan fácil como podría parecer en un primer momento.

Cualquiera que se haya dedicado en algún momento de su vida al diseño gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de ciertas normas o convenciones. Una de ellas define lo que se considera el ancho óptimo de una línea de texto para ser leído en bloque. Éste es de entre 30 em y 35 em. La unidad de medida de este ancho es el “em”. Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta.

1. Aplicando el ancho óptimo a la web
Aquí empieza lo bueno. Las hojas de estilo admiten el uso de “em” como unidad de medida, lo cual nos permite escribir textos definiendo un tamaño de tipografía relativo sin depender de impredecibles porcentajes. La ventaja número uno es que el tamaño es relativo a la tipografía que se use y no al ancho de la ventana del usuario. La ventaja número dos es que, felizmente, usar “em” como unidad para tamaños de tipografía permite que el usuario pueda variar el tamaño desde el control de tamaño de letra de su navegador preferido.
Una práctica que se usa últimamente es usar anchos fijos (px) para definir los bloques de una página y “em” para el tamaño de la tipografía. Ésto permite al usuario ver el texto en el tamaño que prefiera, eso es bueno… pero… el problema es que alguien necesite ampliar la tipografía dos o más veces y el ancho del contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea da por lo suelos.

Ahora bien, ¿qué sucedería si usásemos “em” como unidad de medida para los anchos de los elementos también? Obtendríamos lo que se conoce como diagramación elástica donde todo lo que se defina basado en “em” dependerá del tamaño de letra que el usuario use.

Obviamente, no todo son rosas en este camino. Internet Explorer da problemas para manejar distintos tamaños (especialmente cuando se hereda un tamaño definido por un elemento “padre”). Afortunadamente, hay una solución muy simple a este problema. Basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Además, “hilando fino” hay que marcar que, al posicionar con float, IE de Mac necesita que se defina el ancho de al menos uno de los bloques un poco más pequeño de lo que la lógica matemática podría decir. Cosas de la vida.

2. Un poco de código
Un ejemplo muy básico sería algo como:

CSS para pegar dentro del HEAD.

Quote
<style type="text/css">
body {
font-size: 100%;
}
h1 {
text-size: 2.5em;
}
#contenido {
text-size: .85em;
width: 30em;
background-color: #f0f0f0;
}
</style>

HTML para pegar dentro del BODY.

Quote
<h1>Mi demo</h1>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed nec est sit amet wisi
ultricies aliquam. Nulla mollis sodales diam.
Duis enim purus, gravida at, varius sed, egestas
sit amet, ligula. Sed est neque, ultricies ut,
fermentum id, congue sed, magna. Ut sed velit.
Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas.
Etiam placerat orci a ipsum. Morbi sed augue
vitae arcu porta consectetuer.</p>
</div>

Como se puede ver en el ejemplo, el concepto es muy simple y una vez comprendido no es demasiado distinto del uso de píxeles para definir anchos.

También tenemos un ejemplo más complejo, con una diagramación a dos columnas con encabezado y pie. Éste ejemplo puede ser alineado a la izquierda o centrado en la ventana y puede tener la columna de extras a la izquierda o la derecha mediante un intercambiador de estilos que está en la misma columna. Nótese que el XHTML no cambia en nada, solo cambian los estilos (que están brevemente comentados en el mismo CSS). Vamos, que ya no hay excusas para no usarlo.

3. Algunas conclusiones
La realidad es que una vez que se entiende el funcionamiento de este sistema, puede usarse muy fácilmente, aunque con algunas limitaciones. El principal problema viene de la mano del uso de imágenes web de fondo en los bloques de la página. No es que no se puedan usar, sino que hay que tener en cuenta algunas cosas a la hora de pensar cómo implementarlas, como por ejemplo que al achicarse un bloque éstas se cortarán y que al agrandarlo éstas no lo seguirán. Hay también algo que sí se puede aprovechar y es que se puede definir el tamaño de una imagen con “em” para el width y el height con lo cual lograremos que las imágenes así definidas se agranden o se achiquen junto con el diseño (un efecto muy simpático, a la vez que útil para una persona con problemas de visión que debe agrandar todo para verlo).

De cualquier manera y desde mi punto de vista, es (al menos hoy en día) la mejor solución para páginas y sitios web en los que lo más importante es el texto ya que permite: por un lado manejar muy fácilmente un bloque de texto asegurando que su ancho es el óptimo para una lectura cómoda y eficaz; y por otro brindar una accesibilidad bastante mejorada al común de los sitios ya que es el usuario quien decide en qué tamaño desea leer nuestro contenido.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 17 | 2:25 PM
El equilibrio en el diseño web

El diseño de una página web incluye el empleo de varias disciplinas, entre las que se encuentra el diseño gráfico. La presentación visual de una página web es una representación gráfica y como tal sigue los lineamientos generales del diseño gráfico. Los elementos componentes de una página web deben ser combinados de forma tal que el objetivo con el que se diseña sea logrado. Cada componente de la página web tiene una jerarquía respecto de los otros, por lo que es necesario buscar la combinación de elementos que haga posible que esta jerarquía se vea resaltada. El diseñador debe lograr que la página tenga la máxima eficiencia comunicativa que sea posible. Esto solo es posible mediante el impacto visual, logrado con la correcta disposición de los elementos.

Para que el mensaje llegue al usuario, todos los elementos deben estar equilibrados. Este equilibrio tiene una serie de reglas básicas que todo diseñador de páginas web y diseñador gráfico debe conocer. Sin embargo, un error frecuente en el diseño es realizar el mismo para luego introducir los componentes, cuando en realidad el diseño debe estar pensado para que los componentes se vean de tal forma que el mensaje llegue en forma correcta al usuario.

Equilibrio de las proporciones
Cada componente de una página web tiene un peso visual, el cual depende de sus atributos, como forma, color, tamaño, etc. Este peso visual, es la proporción. Lo primero que se nos ocurre al hablar de proporción, es el tamaño relativo del objeto en cuestión. Un elemento más grande que otro, tiene una atracción visual superior que el segundo. Pero además, la carga visual de un elemento también depende de otros atributos, como el color. Un objeto de color saturado, tiene un peso visual superior que otro cuyo color tiene una saturación menor. Las formas tienen también influencia en la proporción de los elementos. Así pues, un elemento de forma irregular tiene mayor atracción visual que un objeto de forma regular.

Todos estos atributos deben guardar una proporción tal que los elementos que se desee resaltar sean más visibles que otros, pero de forma tal que tampoco los elementos secundarios “desaparezcan”. Hay muchas formas de conseguir que las proporciones de los diferentes objetos se adecúen al fin perseguido.

Equilibrio de las escalas
Las proporciones de los diferentes elementos de un diseño tienen una relación entre sí que denominamos escala. Esta escala, que en principio pensamos exclusivamente en relación al tamaño de los objetos, abarca a todos los atributos de los mismos. Esto quiere decir, que deben tenerse en cuenta las escalas de tamaño, de forma, de color. Cada uno de los atributos de un objeto, tiene una dimensión, la cual no es absoluta, sino relativa, ya que depende de los atributos de los demás objetos. Por ejemplo, un cuadrado de 120 pixeles de lado es grande si se encuentra junto a otro de 60 pixeles, pero es chico si se le relaciona con uno de 200 pixeles. Lo mismo sucede con los colores. Un objeto de color amarillo sobre fondo negro es más llamativo que uno de color gris ubicado a su lado; sin embargo, el mismo elemento amarillo, sobre fondo blanco es mucho menos llamativo que un objeto de color rojo ubicado también a su lado.

La escala, en definitiva, es muy importante para relacionar objetos de diferentes proporciones. Todo diseño equilibrado debe estar integrado por elementos que mantienen una cierta relación entre sus proporciones. Un ejemplo práctico lo vemos en el siguiente diseño, donde (solo por tomar la relación existente entre algunos de sus elementos) la escala del encabezado y del menú, tienen una relación tal que la atención fluye rápidamente hacia el primero, pero con una diferencia tal que hace posible que el menú sea visible para los usuarios y dar una buena navegabilidad a la página. El equilibrio de las escalas, en este ejemplo, puede apreciarse en el tamaño, en el color y en las formas.


Click on the image to view it in full size.

Agrupación de elementos
Dentro de las reglas del equilibrio de un diseño, debe tenerse muy presente que una de las formas de lograr un mejor equilibrio entre los diferentes elementos, es la agrupación de los mismos. La agrupación, además, consigue otro factor importante en un diseño, que es el orden. La agrupación de elementos es natural en el ser humano, que tiene la tendencia a colocar juntos a objetos afines. Esto, en el diseño de páginas web, tiene como finalidad darle lógica y racionalidad a la ubicación de los diferentes elementos, de forma tal que la comunicación del mensaje sea efectiva.
Los componentes de una página pueden agruparse de acuerdo a varios criterios:

Por proximidad, la forma más elemental de agrupar los objetos, que consiste en agruparlos de acuerdo a su cercanía física.
Por semejanza, que consiste en agrupar objetos de acuerdo a su parecido visual.
Por continuidad, es decir, de acuerdo al significado de los elementos.
Por simetría, que es agrupar objetos de manera tal que den la sensación de conformar una figura conocida o simétrica.

La agrupación es uno de los equilibrios más sencillos de ver en un diseño web. Es muy común, por ejemplo, ver agrupaciones de imágenes, o que los textos se encuentren en un lugar determinado de la página, los botones de navegación siempre están agrupados en un menú, etc.

Alineación del diseño
Para que la composición no aparezca como caótica, los diferentes elementos y grupos de elementos deben aparecer ordenados de acuerdo al trazado de líneas imaginarias, tanto verticales como horizontales, que se denominan reticulado. La alineación es importante, debido a que cuando se colocan muchos objetos dentro de un diseño, la forma más sencilla de que los usuarios logren ubicarlos e identificarlos es que se encuentren alineados. Esto se ve acentuado por el hecho de que la propia forma de los monitores es rectangular, por lo que el ordenamiento según líneas rectas es algo natural. En la imagen siguiente, vemos una página alineada, tanto vertical como horizontalmente y donde resulta muy sencillo trazar líneas imaginarias sobre las que se encuentran los componentes:


Click on the image to view it in full size.

La alineación de los textos, es además, un aspecto importante en la comunicación. Lo usual, siguiendo la tradición escrita, es que los mismos se encuentren alineados a la izquierda, aunque excepcionalmente y debido a ciertas circunstancias, los textos pueden aparecer alineados a la derecha, centrados o justificados, aunque lo recomendable, para facilitar la lectura, es que se emplee la primera de las alineaciones.

Equilibrio de contenidos
Toda página web está integrada por elementos textuales, gráficos y ocasionalmente con contenidos de otros medios. Desde el punto de vista del diseño de una página web, y dado la relevancia de los dos primeros, nos referiremos al equilibrio entre los elementos gráficos y textuales. Los elementos textuales son indispensables, ya que aportan la mayor parte de la información que se desea transmitir. Los elementos gráficos, además de también hacer aportes de información, suministran las sensaciones visuales necesarias para acompasar y resaltar el sentido del mensaje de la web.

El abuso de cualquiera de los dos tipos de elementos es contraproducente, ya que los usuarios necesitan la información por la que llegan a la página, pero también necesitan sentirse atraídos por el lenguaje visual. Por consiguiente, el equilibrio entre estos tipos de componentes de una página, es fundamental.

Jerarquía visual
Una página web equilibrada debe mantener una cierta jerarquización de los contenidos, de forma tal que la vista del usuario sea guiada en forma adecuada a través de los mismos. La jerarquización de los componentes comienza con la ubicación de los mismos. Dado que el sistema de lectura empleado en occidente es de izquierda a derecha y de arriba hacia abajo, existe una tendencia natural en los individuos a recorrer los objetos gráficos en ese orden. Por consiguiente, es natural que el elemento más importante de una página web (su logotipo) se encuentre ubicado en la esquina superior izquierda o muy cerca de ella, seguido hacia la derecha por el título de la página.

La jerarquización de los elementos componentes de una web, puede realizarse también empleando colores y contraste. Todo contenido de una página web debe tener establecida su jerarquía en la misma, empleando para ello cualquier técnica de diseño.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 18 | 12:48 PM
Diseño de páginas web: Diseño del documento

Normalmente pensamos que el diseño de páginas web está referido al diseño de las versiones que usualmente vemos en los monitores de los ordenadores personales, tanto de escritorio como portátiles (en realidad se trata del mismo medio). Sin embargo, el diseño de las páginas también debe comprender a los usuarios de los móviles, y algo bastante frecuente, las páginas en modo de impresión.

Muchas páginas ofrecen textos o imágenes que posiblemente los usuarios necesiten o deseen imprimir. Es muy frecuente que cuando tratamos de imprimir una página en su diseño original, esta no tiene las medidas adecuadas y la impresión no se vea en forma correcta. Por ello, muchas páginas ofrecen a sus usuarios y visitantes la posibilidad de acceder a una versión imprimible del documento.

Del mismo modo, un usuario que desea acceder a una página web desde un móvil, encontrará que las versiones para ordenadores de las páginas web presentan dimensiones inadecuadas para este medio, debiendo emplear las molestas barras de desplazamiento horizontal para acceder al todos los contenidos. Debido al notorio incremento del empleo de móviles para acceder a la web, muchas páginas ofrecen actualmente versiones de sus páginas que se adaptan a las resoluciones de pantalla de los mismos.

Documentos adaptables al medio desde el que se visualiza
La opción de crear un documento para cada tipo de medio, si bien es viable, realmente resulta difícil de implementar por dos razones. La primera es que constituye una verdadera pérdida de tiempo y energía por parte del diseñador. En segundo lugar, la creación de varios documentos para cada una de las páginas de un sitio implica ocupar mucho espacio en el servidor, con el consiguiente aumento de los costos del mismo.

La mejor solución es la implementación de hojas de estilo externas, es decir, separadas del documento HTML o XHTML para cada uno de los medios que se desea implementar y vinculadas al documento principal a través de la etiqueta <link> en el <head> del documento.

Quote
<link rel="stylesheet" href="screen.css" media="screen, handheld" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="stylesheet" href="handheld.css" media="handheld" />

Estas etiquetas tienen la facultad de que una vez que el navegador ha detectado el medio a través del atributo “media” (media=”screen” para los ordenadores normales, media=”print” para el diseño de la página imprimible y media=”handheld” para los diferentes dispositivos móviles), determina cual de las hojas de estilos es la que debe aplicar. El siguiente ejemplo es una muy conocida página (Wikipedia), la cual ofrece a sus visitantes la posibilidad de acceder a una página imprimible. Aquí pueden observarse las diferencias entre un diseño y otro.

Orden del documento
Muchos motores de búsqueda indexan las páginas web teniendo en cuenta cuáles son los elementos que aparecen desplegados en los primeros lugares del documento HTML, lo que no indica necesariamente que sea el orden en el que se visualizan, ya que esto puede modificarse empleando el CSS.

Además, siempre es conveniente dar un orden lógico a los contenidos, de modo que la página no aparezca como algo confuso compuesto por elementos inconexos. Además de la importancia real de los elementos del documento (tanto los visibles como los no visibles), los diferentes componentes tienen un orden de importancia relativa, es decir, una jerarquía en el orden en que son visualizados. Desde este punto de vista, es importante que los diferentes contenidos aparezcan ordenados de acuerdo con esta jerarquía, y su visualización corresponda con la misma.

Selección de los elementos visualizables
La presentación de un documento en varios formatos para su visualización en diferentes medios, también conlleva la selección de elementos. Cuando se diseña una página web, algunos elementos de este formato son compatibles con los diseños de impresión, mientras que otros pueden y deben ser obviados, dado que no aportan ninguna utilidad al usuario y puede ocupar un espacio que, en los formatos de impresión, pueden resultar útiles para expandir textos o imágenes.

Algunos ejemplos de elementos que pueden ser dejados de lado, son por ejemplo, los menús y las columnas (siempre y cuando no tengan contenidos relevantes y relacionados con el resto del documento). Los links no serán visualizables en un formato de impresión, pero si se puede colocar una dirección web para que pueda ser visible en el documento impreso.

Utilización de textos alternativos
La etiqueta < img / >, la cual determina la ubicación de una imagen en un documento web, tiene la posibilidad de insertar un texto alternativo a través del atributo alt=”texto alternativo”. Algunos buscadores le dan importancia a los textos alternativos de las imágenes, por lo que es aprovechado en el posicionamiento de una página web en los mismos. Sin embargo, este atributo tiene una importancia que va mucho más allá de colaborar en la tarea de indexación de una página por las palabras clave empleadas en este atributo. Se trata de la accesibilidad.

Este texto alternativo es el que los medios destinados a las personas con dificultades visuales utilizan para la descripción de lo que se muestra en una página web. También los videos tienen la posibilidad de agregar descripciones en forma de texto, los cuales pueden ser interpretados por los medios para discapacitados.

Adaptación al medio empleado
Las personas que navegan por la web, emplean los sitios web de formas diferentes, de acuerdo a sus necesidades, gustos o posibilidades. El hecho de que un porcentaje de los usuarios de Internet tengan dificultades visuales o ausencia completa de la visión, debe orientar una buena parte de los contenidos a su uso por parte del software de lectura. Otro porcentaje importante de los internautas, acceden la mayor parte del tiempo a la web a través de los múltiples dispositivos móviles, por lo que las páginas deberían contar con un diseño específico para este tipo de dispositivos, que permita la visualización de los contenidos en bajas resoluciones de pantalla.

Y lo más importante, todo esto, no debe requerir un esfuerzo desmesurado por parte del diseñador, el cual cuenta con medios a su alcance para que esta tarea resulte sencilla y sin tener que realizar modificaciones en el documento original, tanto si está escrito en HTML como en XHTML.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 19 | 11:43 AM
Diseño visual de una página web

Dentro de las etapas en las que debe desarrollarse el diseño de un sitio web, el diseño visual es una de las últimas, ya que muchos de los aspectos visuales de la página dependen en gran medida de determinaciones tomadas en otras etapas del diseño.

Esto no quiere decir en modo alguno, que el diseño visual sea algo superficial o secundario. Por el contrario, al igual que otros aspectos del diseño de un sitio web, el aspecto visual puede influir en la popularidad del mismo.

Tengamos en cuenta que los aspectos visuales pueden influir psicológicamente en un visitante, y que el diseñador debe tener en cuenta esto y tratar de influenciar al visitante para que tome determinaciones o al menos tenga una cierta tendencia a ello.

Si el sitio web que nos encontramos desarrollando se trata de una tienda virtual, el visitante no sólo deberá sentirse atraído por los productos ofertados, sino que además deberá desear acceder a uno de ellos. Los diseños visuales, tanto para elementos impresos como web, en la actualidad se encuentran conformados por una serie de bloques o módulos dispuestos en una forma más o menos estandarizada, que permiten a los usuarios captar con simples recorridos visuales donde se encuentran los diferentes elementos que componen una página. Esta disposición estandarizada, responde a modelos de lógica visual que están relacionados con el comportamiento de los usuarios.

En base a esto, los diseñadores gráficos deben plantearse como objetivos la creación de una jerarquía visual que permita al usuario de una página web detectar de inmediato cuales elementos son importantes y cuales son secundarios, definir cuáles serán las regiones funcionales del sitio y formar grupos de elementos relacionados de forma tal que los visitantes puedan ver claramente la estructura del contenido.

En el diseño de páginas web, deben emplearse modelos que a los usuarios les resulten familiares, lo que colabora en la ubicación por parte de los mismos de las áreas funcionales y los contenidos importantes.

Los diseños excesivamente llenos de elementos, con fondos cargados o con bajos contrastes, pueden dificultar el establecimiento de puntos de referencia visual que hagan comprensible la organización del contenido.

Coherencia del diseño
Al navegar por diferentes páginas de un sitio, el visitante debe tener la sensación de que las diferentes páginas que visitan pertenecen a un mismo sitio. Esto se logra mediante la repetición de algunos elementos, que dan un estilo definido al sitio. Esta repetición, además de dar una unidad visual a todo el sitio, permite a los visitantes ubicar los elementos más importantes, ya que se encontrarán con la misma distribución (o similar) en todos los puntos del sitio. En el siguiente ejemplo, podemos apreciar la página web de la Universidad de Buenos Aires, donde la coherencia en el diseño de las páginas interiores es evidente presentando muchos aspectos similares entre ellas, por lo que los usuarios saben que se trata de páginas de un mismo sitio.


Click on the image to view it in full size.

En el ejemplo anterior, puede apreciarse además, que la repetición no quiere decir que no se puedan hacer ligeras variaciones, como en el caso del color de los encabezados de las páginas interiores del ejemplo. Esto, en muchos casos, es deseable, ya que estas variaciones pueden resultar atractivas y beneficiar la estética del sitio.

Empleo del principio del contraste en el diseño
La creación de jerarquías entre los diferentes elementos de una página web, es una de las tareas más importantes de un diseñador. Uno de los principios de diseño web que pueden emplearse para ellos, es el principio del contraste. Cuando un visitante llega a una página web, se encuentra con una gran cantidad de información visual, la cual debe ser clasificada por su cerebro para poder acceder a los diferentes elementos.

La utilización de contrastes hace posible diferenciar los elementos principales de los secundarios y a estos del campo de fondo. Los visitantes tienen tendencia a seguir una secuencia lógica en la visualización de los elementos. En una primera instancia se visualizan los elementos gráficos (imágenes, videos, animaciones, etc.), para luego ver los textos.

El color y el contraste en la tipografía
Los textos en sí mismos son elementos que pueden considerarse de baja visibilidad, a menos que se tomen algunas medidas que permitan que los visitantes detecten con facilidad ciertos elementos textuales y estos los conduzcan al resto.

Los usuarios de internet tienen, en promedio, una baja tendencia a leer los textos por mucho tiempo. Esto es algo que todos los diseñadores deben tener en cuenta, ya que la mayor parte de la información relevante de la página se encuentra en forma de texto.

Otro aspecto importante, es que de acuerdo a los dispositivos de visualización que se emplee, estos elementos pueden sufrir variaciones más o menos importantes. Así por ejemplo, los móviles tienen baja resolución de pantalla y la definición de colores es mucho menor que en los ordenadores de escritorio. Algunos ordenadores portátiles también tienen dificultades a la hora de mostrar colores. Finalmente, los proyectores dan una imagen “lavada” y con un brillo y un contraste diferente al que se emplea en un ordenador.

Por esto, es conveniente que los diseños sean testeados en diferentes dispositivos, a los efectos de poder corregir posibles diferencias en la visualización de las páginas, ya sea en el color u otros tipos.

Estilo de una página web
Cada diseño debe tener un estilo propio. Esto significa que no alcanzará con que se tomen elementos de otros sitios y tratar de imitarlos. El diseño es un arte, y como tal implica la creación de todo lo que compone una página web. Además de las consideraciones éticas, cabe destacar que la estética propia de un sitio es lo que lo distingue del resto de las páginas web del mundo.

El estilo del diseño web debe ser simple (no carente de estilo) para que los usuarios no encuentren dificultades con el contenido. La simplicidad no quiere decir que se deba tener un diseño con una estética pobre, sino que debe ser de sencilla interpretación, aún cuando presente elementos de diseño complejos y llamativos.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 20 | 1:44 PM
Tamaño, margen, relleno y bordes de capas con CSS y XHTML / HTML

Las capas, pueden ser dimensionadas empleando los atributos que definen el ancho y la altura de las capas. Sin embargo, el empleo de otros atributos puede hacer que el ancho y la altura finales se vea modificado.

Dimensiones de las capas
El tamaño de las capas en CSS se fija mediante los atributos “width” (ancho) y “height” (alto), empleando para ello cualquiera de las unidades que están permitidas. De no marcarse estas dimensiones, las capas adquieren las dimensiones del contenido. Sin embargo, esto puede verse afectado por la aplicación de tres atributos de las capas: márgenes, relleno y bordes.

Los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente. El borde es la línea que delimita la capa. El relleno, es el espacio entre el borde de la capa y el contenido. En la siguiente imagen veremos cada uno de estos atributos en su posición:

A continuación, haremos una descripción de cada uno de estos atributos y veremos como se aplican en el código CSS.

Márgenes
Cada capa tiene cuatro márgenes, los que por defecto tienen un valor cero. En el código CSS, el margen se establece mediante el atributo “margin”, el cual es seguido de un guión (sin dejar espacio) y el lado de la capa al cual se le determina el margen. Existen métodos abreviados (empleando una sola línea de código para determinar todos los márgenes), que describimos a continuación:

Quote
/* El siguiente es el método natural de establecer los márgenes */
#identificador {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
/* Su forma abreviada sería la siguiente: */
#identificador {
margin: 10px;
}
/* Cuando los márgenes superior e inferior tienen las mismas dimensiones y el izquierdo y el derecho diferentes pero iguales entre si, el código abreviado es el siguiente, siendo la primera cifra la que corresponde a los márgenes superior e inferior y la segunda a la izquierda y derecha */
#identificador {
margin: 10px 5px;
}
/* Cuando los márgenes derecho e izquierdo tienen el mismo valor, y los márgenes superior e inferior son diferentes y además, diferentes entre si, la forma de abreviar es la que sigue, siendo la primera cifra del margen superior, la segunda de los márgenes laterales y la tercera del márgen inferior */
#identificador {
margin: 5px 15px 2px;
}
/* Cuando todos los márgenes son diferentes, el modo de abreviar es el que describimos a continuación, siendo las cifras de los márgenes superior, derecho, inferior e izquierdo respectivamente: */
#identificador {
margin: 3px 10px 6px 8px;
}

Relleno (Padding):
El relleno se determina del mismo modo que los márgenes. Al igual que en el caso anterior, por defecto, cada capa tiene relleno cero, por lo que para que pueda ser visible debe determinarse su valor en el código CSS. Al igual que en el caso de los márgenes, el relleno se determina lado por lado, a menos que se emplee el método abreviado, que es igual que el empleado en los márgenes.

Borde (Border):
El borde es el límite de la capa. A diferencia de los dos atributos anteriores, el borde tiene tres propiedades que puedes ser determinadas en el código CSS. La siguiente es una lista de estas propiedades y la forma en que se determinan:

En la siguiente imagen veremos un ejemplo de los estilos de los border:

Al igual que en los casos de los márgenes y los rellenos, cada uno de estos atributos puede ser simplificado. Así que puede colocarse “border-color:” y determinar el color de los cuatro bordes, o “border-width:” y determinar el ancho de todos los bordes en una sola línea de código.

Incidencia de los distintos atributos en el tamaño de las capas
El dimensionamiento de una capa no termina cuando se determina los valores de “width” y “height”. Salvo para las versiones anteriores a Internet Explorer 7, todos los navegadores entienden que el ancho (“width”) y el alto (“height”) es independiente de los valores que tomen los márgenes, los rellenos y los bordes, por lo que para saber el ancho o la altura total de una capa, a los valores respectivos hay que sumar los márgenes, rellenos y bordes laterales al ancho o sumar los márgenes, rellenos y bordes superior e inferior a la altura. Veamos un ejemplo:

Crear dos archivos en bloc de notas. En el primero, copiaremos el siguiente código y lo guardaremos en cualquier directorio con el nombre estilo.css:

Quote
#contenedor {
width: 52%;
margin: 50px auto;
border: solid 1px #000;
font: 1em arial, helvetica, sans-serif;
color: white;
}
#nada, #borde, #relleno, #margen, #todos {
background-color: #360;
border: solid #08f;
width: 400px;
}
#nada {
margin: 0;
padding: 0;
border-width: 0;
}
#borde {
margin: 0;
padding: 0;
border-width: 20px;
}
#relleno {
margin: 0;
padding: 20px;
border-width: 0;
}
#margen {
margin: 20px;
padding: 0;
border-width: 0;
}
#todos {
margin: 20px;
padding: 20px;
border-width: 20px;
}

Al segundo archivo, al que guardaremos en el mismo directorio que el anterior, le daremos el nombre index.html e introduciremos en él el siguiente código:

Quote
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Página de ejemplo</title>
<link type="text/css" rel="stylesheet" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<div id="nada">Este contenedor no tiene márgenes, relleno ni bordes. El único espacio que ocupa es el del contenido.</div>
<div id="borde">Este contenedor tiene el espacio que ocupa el contenido y un borde de 5 pixeles.</div>
<div id="relleno">Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.</div>
<div id="margen">Este último contenedor, tiene el contenido y un margen de 5 pixeles.</div>
<div id="todos">Y en el último contenedor, vemos todos los atributos con valores definidos.></div>
</div>
</body>
</html>

Importante: Colocar la declaración del tipo de documento (DOCTYPE), puede ser la diferencia entre ver bien o no el ejercicio que estamos llevando adelante, sobre todo si empleamos Internet Explorer como navegador, en cualquiera de sus versiones.

Luego de guardados, abriremos el archivo index.html en nuestro navegador, y en él veremos la siguiente imagen:

Para hacer que todas las capas tengan el mismo ancho (incluyendo los rellenos y los bordes, debemos sumar éstos al ancho de la capa y darle a las capas que no tienen todos los atributos, el valor ajustado del ancho. Para ello debemos hacer las siguientes operaciones:

Ancho de la capa con todos los atributos:

Ancho + margen izq. + margen der. + relleno izq. + relleno der. + borde izq. + borde der. =
400px + 20px + 20px + 20px + 20px + 20px + 20px = 520px

Ancho de la capa con un solo atributo definido:

Ancho + atributo izq. + atributo der. =
400px + 20px + 20px = 440px

Para que la capa sin atributos definidos (con valor cero) se vea del mismo ancho que la que tiene todos los atributos, debemos darle un valor de ancho (width) igual a 520 pixeles. A las que tienen uno de sus atributos definidos con un ancho de 20 pixeles por cada lado, el ancho (width) debe ser de 480 pixeles. La capa que tiene todos los atributos definidos, quedará con el ancho original de 400 pixeles. El código CSS quedaría de la siguiente manera:

Quote
#contenedor {
width: 520px;
margin: 50px auto;
border: solid 1px #000;
font: 1em arial, helvetica, sans-serif;
color: white;
}
#nada, #borde, #relleno, #margen, #todos {
background-color: #360;
border: solid #08f;
}
#nada {
margin: 0;
padding: 0;
border-width: 0;
width: 520px;
}
#borde {
margin: 0;
padding: 0;
border-width: 20px;
width: 480px;
}
#relleno {
margin: 0;
padding: 20px;
border-width: 0;
width: 480px;
}
#margen {
margin: 20px;
padding: 0;
border-width: 0;
width: 480px;
}
#todos {
margin: 20px;
padding: 20px;
border-width: 20px;
width: 400px;
}

La siguiente imagen nos muestra el resultado de la modificación del código CSS:

Conclusión
El manejo de las dimensiones de la página es determinante, y suele ser uno de los principales problemas con los que se enfrentan los principiantes cuando se inician en la maquetación empleando hojas de estilo en cascada. Esto se debe fundamentalmente a la falta de compresión de cómo deben tomarse las dimensiones de los bordes, rellenos y márgenes.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 21 | 1:39 PM
Utilización de la repetición y posición de fondos en la maquetación de páginas web

Para maquetar una página web, muchas veces es necesario utilizar los fondos de los elementos como parte de la distribución de los mismos, sobre todo porque colaboran generando efectos visuales que hacen posible distinguir la estructura del documento o bien como forma de establecer contraste, o simplemente como parte del decorado.

Cuando se emplea un color, el color de fondo ocupa toda la extensión del elemento. Pero un caso muy diferente es el empleo de imágenes como fondo, dado que se trata de un elemento en sí mismo y que por consiguiente, tiene algunas propiedades que hace que su tratamiento sea particular.

Repetición de la imagen de fondo
Cuando establecemos una imagen como fondo, ésta se repite en los dos ejes del elemento (ancho y altura) hasta cubrir toda la extensión del mismo. Este es el valor por defecto que tiene la propiedad “background-image”. Este valor de repetición puede ser alterado mediante otra propiedad, llamada “background-repeat”, donde puede establecerse que la imagen aparezca repetida en los dos ejes (valor por defecto), en uno de ellos, o que no se repita.

Veamos como funciona esto con ejemplos prácticos. Para ello, deberemos crear un documento XHTML mediante el siguiente código:

Quote
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Ejemplo</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
</body>
</html>

En este documento, solo estableceremos el DTD del mismo, el título y el link que establece el vínculo entre el documento HTML y el archivo CSS. Esto quiere decir que también deberemos crear un archivo CSS, el que guardaremos en el mismo directorio que el documento HTML. También será necesario que cuenten con dos imágenes, para que puedan desarrollar el ejemplo de forma que se vea tal como las mostraremos:

Para poder contar con ellas, basta con hacer clic en el botón derecho y hacer clic en guardar mediante “Guardar imagen como…”, que guardaremos en un directorio “imágenes” ubicado en el mismo directorio que se encuentra el documento HTML.

Luego, en el archivo CSS, deberemos colocar las siguientes líneas, donde se establece el color de fondo y la imagen de fondo:

Quote
body {
background-color: #fff;
background-image: url(imagenes/fondo2.jpg);
background-repeat: repeat;
}

Luego de guardados ambos archivos, abriremos el documento HTML con nuestro navegador, donde veremos una página ocupada por la repetición de la imagen seleccionada.

Posteriormente, cambiaremos el nombre de la imagen que hemos seleccionado para el fondo por la imagen “fondo1.jpg” y en “background-repeat” colocaremos el valor “repeat-x”. Una vez guardados los cambios realizados en el archivo CSS, recargaremos la ventana del navegador, en la que se mostrará una página con una guarda que abarcará todo el ancho de la página. Esto es así porque el valor “repeat-x” provoca que la imagen se vea repetida solo en el plano horizontal. En el caso de que se quiera establecer una imagen de fondo cuya repetición suceda en el plano vertical, el valor a introducir sería “repeat-y”.

Por último, cambiaremos la imagen de fondo por “fondo3.jpg” y daremos el valor “no-repeat” a la propiedad “background-repeat”, con lo que en el navegador aparecerá un mapamundi como una especie de marca de agua. En este caso, hemos indicado que la imagen de fondo no debe repetirse, con lo que la imagen aparecerá una sola vez.

Método abreviado
Como en muchos otros casos, la propiedad “background” puede abreviarse, indicando varias propiedades con sus respectivos valores en una sola línea de comando. Por ejemplo, para los casos descritos anteriormente, podría resumirse:

Quote
body {
background: #fff url(imagenes/fondo2.jpg) repeat;
}
body {
background: #fff url(imagenes/fondo1.jpg) repeat-x;
}
body {
background: #fff url(imagenes/fondo3.jpg) no-repeat;
}

Importante: El espacio en blanco entre los valores de las propiedades, debe mantenerse, ya que opera como separador de las mismas.

Posición de la imagen de fondo
La imagen de fondo puede ser empleada en muchos casos como forma de dar una apariencia determinada a algunas capas. Con mucha frecuencia se emplea en la creación de botones de menús, encabezados, ubicación de elementos, etc.

La posición de las imágenes de fondo se determina mediante la propiedad “background-position”, y solo es aplicable a los elementos de bloque. Para determinar dicha posición, se pueden emplear palabras clave como valores (left, center, right para la determinación de la posición en el eje horizontal; top, center y bottom para la posición en el eje vertical). También es posible establecer la posición mediante el empleo de medidas en unidades de longitud (px, pt, cm, em, etc.) y porcentajes.

En todos los casos, se coloca en primer lugar el valor de la posición horizontal y luego la vertical. En el caso de que se empleen palabras clave, el orden puede ser alterado, ya que los navegadores interpretarán en forma correcta la posición. También la propiedad “background-position” puede ser abreviada introduciendo los valores en la propiedad “background”. Está permitido emplear unidades de longitud diferentes para la determinación de las dos posiciones. Lo que no está permitido, es el empleo de palabra clave en una de las posiciones, mientras se emplea una longitud en la otra posición.
El valor por defeco de esta propiedad es “top left”, o lo que es equivalente, “0px 0px” o “0% 0%”.

Veamos ahora algunos ejemplos prácticos, para lo que emplearemos los mismos archivos de ejemplo que en el ejemplo sobre la repetición de fondos:

Quote
body {
background-color: #fff;
background-image: url(imagenes/fondo3.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
}

Como puede verse, a la imagen única de fondo, se le han dado los valores “100px 100px”, lo que hará que la imagen de fondo se vea desplazada 100px. Luego, podremos modificar los valores, las unidades y podremos aplicar palabras clave en el posicionamiento del fondo.

Sintaxis abreviada
Al igual que en el caso de la aplicación de la propiedad de repetición de la imagen de fondo, el posicionamiento del fondo puede abreviarse e introducirse en la propiedad “background”. El ejemplo que hemos dado anteriormente, puede abreviarse utilizando la siguiente sintaxis;

Quote
body {
background: #fff url(imagenes/fondo3.jpg) 100px 100px no-repeat;
}

Utilización de fondos en la maquetación
Existen muchas formas de aprovechar el posicionamiento de las imágenes de fondo durante el proceso de maquetación de una página web. Una de ellas, es la formación de capas con bordes redondeados de distintos tamaños empleando una única imagen. Para ello, en el ejemplo siguiente, utilizaremos para formar tres barras horizontales con esquinas redondeadas solo la siguiente imagen:

Para conformar las tres barras, agregaremos al código HTML que ya tenemos, las siguientes líneas entre las etiquetas <body> y </body>:

Quote
<div>
<div>
<p>Título de ejemplo</p>
</div>
</div>
<div>
<div>
<p>Título de ejemplo</p>
</div>
</div>
<div>
<div class="subcapa3">
<p>Título de ejemplo</p>
</div>
</div>

Como pueden ver, se trata de párrafos dentro de una capa que se encuentra anidada en otra. En el archivo CSS, agregaremos las siguientes líneas:

Quote
.capa1, .capa2, .capa3 {
width: 300px;
height: 30px;
margin-top: 30px;
background: url(imagenes/fondo4.jpg);
}
.subcapa1, .subcapa2, .subcapa3 {
width: 270px;
height: 30px;
background: url(imagenes/fondo4.jpg) right;
float: right;
}
.subcapa1 p, .subcapa2 p, .subcapa3 p {
text-align: center;
margin: 8px 0 0 -30px;
color: white;
font: normal 15px arial, helvetica, sans-serif;
}
.capa2 {
width: 150px;
}
.subcapa2 {
width: 120px;
}
.capa3 {
width: 400px;
}
.subcapa3 {
width: 370px;
}

En estas líneas de código, vemos que las capas anidadas tienen 30px menos que las capas padre (esto es para que sea visible la esquina izquierda de la capa padre) y que flotan a la derecha. En la siguiente imagen, veremos como es que se colocan una capa y la otra, de forma tal que, montadas, queda el efecto deseado:

Mediante la aplicación de un margen negativo a la izquierda en el párrafo anidado, se corrige la diferencia de ancho, de forma tal que el título no se muestre a 30px a la derecha, como sucedería si no se aplicara esta corrección.

Este que hemos mostrado, es uno de los ejemplos más simples de la utilización del posicionamiento de fondos en la maquetación. Las posibilidades que ofrecen las propiedades que hemos descrito, son muchísimas, y basta con aplicar un poco de imaginación, para poder obtener resultados atractivos y originales.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 22 | 1:55 PM
Últimas tendencias en diseño web

En este artículo veremos las últimas tendencias usadas en el entorno del diseño web.

Lo que antes era solo un mero escaparate de presentación de empresa o lo que es igual, un elemento más del marketing mix, se ha convertido en un divulgador de opiniones compartidas en las que la participación de usuarios y clientes finales, es la clave par el buen funcionamiento y posicionamiento de la Web.

Actualmente, tras el Boom de Facebok y otras redes sociales, son mas las empresas que incorporan en su web un apartado de compartir opiniones sobre noticias, artículos, etc… que hacen mantener la página viva, así como su imagen de marca o los productos y servicios que comercializan o promocionan.


Click on the image to view it in full size.

Además de esto, en materia de diseño también ha habido cambios respecto a años anteriores, a continuación detallamos algunos aspectos que hacen más atractivos nuestros proyectos web y como no, mas acorde con la tendencia actual;

No hay que olvidar que cuanto más claro sea el mensaje y el apartado gráfico más posibilidades tendremos que conseguir visitas.

A la hora de elegir la tipografía a utilizar hay que elegir fuentes llamativas pero siempre acordes al resto del diseño de la web.

La tendencia es usar fuentes Serif, llaman más la atención y son más fáciles de leer.

Hay que tener en cuenta el no combinar diferentes tipos de letra en el mismo párrafo sin estar justificado, es más apropiado y creativo jugar con el tamaño y los colores de las fuentes.


Click on the image to view it in full size.

En relación a las imágenes a utilizar, hay que evitar las ilustraciones clipart típicas y optar por gráficos con colores planos, motivos de decoración Vintage[/bb] y en general [b]gráficos sencillos pero con un toque vanguardista y moderno.


Click on the image to view it in full size.

En cuanto al contenido hay que tener en cuenta que los usuarios normalmente disponen de poco tiempo para leer grandes párrafos y buscan algo fresco para rápidamente quedarse con la esencia del mensajes, es decir la tendencia son artículos cortos, directos y redacción muy fresca.

La parte más importante de tu página está situada en el área superior izquierda, (La cabecera), ya que es justo ahí donde se fija la vista en cuanto entras a un sitio. Por eso aconsejamos colocar el “quienes somos” , o la introducción a la web, en un recuadro cercano a esa área de manera que sea lo primero que lean tus visitantes.


Click on the image to view it in full size.

Tal y como hemos mencionado anteriormente si incluimos enlaces a redes sociales ayudaremos a crear vínculos con los usuarios y por lo tanto fidelizar a un grupo de personas que comparten el mismo interés por algo.


Click on the image to view it in full size.

Ya pasó de moda el poner gráficos de fondo e incluso músicas que hacían que la web tardara más en aparecer, la tendencia son los fondos blancos o usar texturas originales.

Cuanto más limpio y despejado esté todo más fácil será para el usuario encontrar la información que busca directamente.


Click on the image to view it in full size.

Además la pureza del blanco permite colocar tanto imágenes como textos sin que estas se mimeticen con el fondo.

En la sencillez está el buen gusto.

El lenguaje de iconos es lo más “In” actualmente en cualquier proyecto interactivo, estos deben de ser totalmente representativos de la opción de la que da información.


Click on the image to view it in full size.

Los iconos aparte de darle un toque minimalista a la web, son más fáciles de identificar por el usuario y además no ocupan tanto lugar en la botonera de opciones principales.

Si la web tiene mucha información, es preferible presentarla en popups, (o ventanas emergentes), a ser posible un layer para que no que el firewall o antivirus no bloquee la página nueva.

Además de llamar la atención, le dan un toque dinámico y multimedia a la web, por ejemplo que se abra un video de presentación independiente a la web principal.


Click on the image to view it in full size.

No hay que olvidarse de diseñar la web compatible con los cada vez más utilizados smartphones. Son el futuro más próximo en la visualización de páginas web.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 23 | 5:03 PM
CAMBIAMOS EL FORMULARIO DE BÚSQUEDA

Hay casos cuando queremos cambiar algo en nuestro sitio web. Ahora nos toca a nosotros cambiar el aspecto del formulario de búsqueda. ¡Por Dios! El formulario de búsqueda de uCoz se expone con un código estándar $SearchForm$. Ahora lo modificamos un poquitín para nuestras necesidades...

1. En la plantilla del diseño de la página “Búsqueda” encontramos este código: $SearchForm$.

2. Lo cambiamos por otro código:

Quote
<div class="searchForm">
<form onSubmit="this.sfSbm.disabled=true" method="post" style="margin:0px" action="http://site.ucoz.es/news/">
<input type="text" name="query" class="s_field" style="width:280px"/>
<input type="submit" class="button" name="sfSbm" value=¡Búsqueda!"/>
<input type="hidden" name="a" value="14" />
</form>
</div>

donde:

  • http://site.ucoz.es/news/ – sección de búsqueda en nuestro sitio donde los usuarios van a buscar;
  • class="s_field" – estilo del propio formulario de búsqueda;
  • style="width:280px" – largo del formulario de búsqueda;
  • class="button" – estilo del botón de búsqueda;
  • value=¡Búsqueda!" – texto en el botón de búsqueda.
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 24 | 4:12 PM
    Cómo crear una ventana pop-up

    Algo que es muy utilizado y que, a pesar de haber toneladas de información y códigos en la red, se sigue preguntando y pidiendo es cómo hacer una ventana pop-up.

    Creo que la mejor forma de no ahogarse en un vaso de agua tratando de adaptar algún script que encontremos por ahí y que no se ajuste exactamente a lo que queremos es aprender a hacerlo desde cero conociendo los conceptos elementales.

    El método open()
    El objeto window posee un método para abrir nuevas ventanas: el método open().

    Quote
    window.open();

    Eso abrirá una nueva ventana vacía con Javascript (no cargará ningún documento en ella)

    Si queremos que cargue algún documento dentro de la ventana nueva se lo indicamos pasándolo como parámetro y poniéndolo entre comillas dentro de los paréntesis:

    Quote
    window.open('pagina.html')

    Eso abrirá una ventana nueva con el documento pagina.html cargada adentro.

    El método open() acepta 3 parámetros. Se le puede pasar uno, dos, los tres o ninguno

    Quote
    window.open(documento, nombre de la ventana, atributos de la ventana)

    documento
    URI del documento a ser cargado dentro de la nueva ventana.

    Nombre de la ventana
    identificador para la nueva ventana. Sirve para poder hacer referencia a la ventana después de haber sido abierta en caso necesario.

    Atributos de la ventana:
    una serie de pares nombre/valor que permite asignarle a la nueva ventana determinadas características, tales como tamaño, posición, barras a mostrar ….

    Algunos de los atributos disponibles para la mayoría de navegadores:

    width
    anchura de la ventana (en píxels).
    valor
    número entero positivo.

    height
    altura de la ventana (en píxels).
    valor
    número entero positivo.

    top
    posición de la ventana desde la parte superior (en píxels).
    valor
    número entero.

    left
    posición de la ventana desde la izquierda (en píxels).
    valor
    número entero.

    toolbar
    determina si la barra de herramientas del navegador es o no mostrada.
    IE7 ignora la instrucción de no mostrar esta barra con el fin de que los usuarios puedan saber en qué dirección se encuentran.
    valor
    booleano (yes/no).

    status
    determina si la barra de estado (status) es o no mostrada.
    valor
    booleano (yes/no)

    location
    indica si la barra de dirección es o no mostrada.
    valor
    booleano (yes/no)

    directories
    indica si la barra personal es o no mostrada.
    valor
    booleano (yes/no)

    scrollbars
    indica si la barra de scroll es o no mostrada.
    valor
    booleano (yes/no)

    menubar
    indica si la barra de menús es o no mostrada.
    valor
    booleano (yes/no)

    Abriendo una ventana ante un evento determinado
    Si queremos que una ventana sea abierta ante un evento determinado, como por ejemplo un click de ratón del usuario en un botón, podemos definirlo directamente en el manejador del evento del propio botón.

    Quote
    onclick="window.open('nueva.html','nuevaVentana','width=300, height=400')"
    <input type="button" value="Abrir ventana" onclick="window.open('nueva.html','nuevaVentana','width=300, height=400')" />

    Abriendo una ventana desde una función
    Podemos crear una función que se encargue de abrir la ventana nueva y llamarla en el manejador del evento del botón.

    Quote
    <script type="text/javascript">
    <!--
    function ventanaNueva(){
    window.open('nueva.html','nuevaVentana','width=300, height=400')
    }
    //-->
    </script>

    Y dentro del botón hacemos la llamada a la función en el manejador del evento

    Quote
    <input type="button" value="Abrir ventana" onclick=" ventanaNueva()" />

    Usando la función para abrir más de un documento
    Si queremos usar la misma función para abrir la ventana más de una vez con distintos documentos cargados dentro de ella podemos agregarle una variable a la función que le pasaremos como argumento cuando la llamemos.

    Quote
    function ventanaNueva(documento){
    window.open(documento,'nuevaVentana','width=300, height=400');
    }

    Y al llamar a la función desde los distintos botones le pasamos el dato como parámetro.

    Botón 1

    Quote
    <input type="button" value="Abrir ventana" onclick="ventanaNueva('pagina1.html')" />

    Botón 2

    Quote
    <input type="button" value="Abrir otra ventana" onclick="ventanaNueva('pagina2.html')" />

    Usando la función para abrir la ventana más de una vez con distintas dimensiones
    Podemos usar la misma función para que, además, cada ventana que sea abierta desde distintos botones tenga dimensiones distintas. Le enviaremos los valores que queramos pasados como argumentos a la función y haremos una concatenación para crear la cadena de atributos.

    Quote
    function ventanaNueva(documento,ancho,alto){
    window.open(documento,'nuevaVentana','width=' + ancho + ', height=' + alto);
    }

    Y al llamar a la función desde los distintos botones le pasamos los datos de ancho y alto como parámetros.

    Botón 1

    Quote
    <input type="button" value="Abrir ventana" onclick=" ventanaNueva('pagina1.html', 300, 400)" />

    Botón 2

    Quote
    <input type="button" value="Abrir otra ventana" onclick=" ventanaNueva('pagina2.html', 420, 550)" />

    Haciendo referencia a la ventana
    Si por alguna razón una vez abierta nuestra ventana necesitamos hacer algo con ella desde Javascript debemos de poder referirnos a ella de algún modo. Para eso está el segundo parámetro de la función open() que define el nombre de la ventana; en el caso del ejemplo que hemos estado usando la ventana se está llamando nuevaVentana aunque podríamos haberla llamado vladimir o leporcia.

    Si una vez abierta quisiéramos hacer algo con ella, como por ejemplo cerrarla usando el método close() mediante otro botón nos referiríamos a ella por el nombre que le hayamos asignado al momento de crearla.

    Quote
    onclick="nuevaVentana.close()"

    Abrir distintas ventas distintas desde la misma función
    Podemos enviar otra variable más como argumento a nuestra función del ejemplo para asignar distintos nombres a cada ventana que abramos desde un botón diferente. Con eso lograremos que se abran ventanas distintas, algo que no sucede si cada vez que llamamos a la función nos crea la ventana nueva con el mismo nombre, como ha estado haciendo la función del ejemplo hasta ahora.

    Quote
    function ventanaNueva(documento,ancho,alto,nombreVentana){
    window.open(documento, nombreVentana,'width=' + ancho + ', height=' + alto);
    }


    Botón 1
    Quote
    <input type="button" value="Abrir ventana" onclick="ventanaNueva('pagina1.html', 300, 400, 'ventana1')" />

    Botón 2

    Quote
    <input type="button" value="Abrir otra ventana" onclick="ventanaNueva('pagina2.html', 420, 550, 'ventana2')" />

    De esta forma cada botón abrirá una ventana distinta con distintos documentos cargados en cada una de ellas.

    La función tal y como estaba antes abría los distintos documentos desde los diferentes botones cargando documentos diferentes pero los abría en la misma ventana, es decir, en ningún momento podrían haber dos ventanas abiertas a la vez dado que se estaban abriendo siempre con el mismo nombre. Si en el momento de llamar por segunda vez a la función la ventana aún se encontraba abierta (no se había cerrado) el segundo documento sería cargado dentro de esa ventana ya abierta.

    Al asignar en cambio un nombre distinto para cada ventana sí puede haber más de una ventana abierta simultáneamente.

    Usando links para abrir ventanas.
    Es importante que toda la información sea accesible y se pueda acceder al recurso al que se pretende llegar y no es recomendable delegar al 100% a Javascript el acceso a un recurso. Podemos usar un link al documento que queramos mostrar dentro de nuestra ventana pop-up; de esta forma nos aseguramos de que, en el caso de estar siendo visualizada nuestra página en algún dispositivo sin soporte para Javascript, nuestro documento pueda ser llamado de forma alternativa desde este link.

    La forma más simple de hacerlo usando la misma función del ejemplo es la siguiente:

    Quote
    <a href="pagina.html" target="ventana1" onclick="ventanaNueva ('', 300, 400, 'ventana1');"> pagina </a>

    En el evento click llamamos a la función creando una ventana pop-up asignándole un nombre ventana1 y al link le hemos agregado un target hacia esa ventana. Así el link al ser activado carga el documento dentro de la ventana que abrimos desde el manejador de eventos onclick. Observar que al llamar a la función no es necesario indicar el documento que queremos que se cargue y lo dejamos como una cadena vacía '' (dos comillas simples). Como en realidad lo que estamos haciendo es desviar el destino del link a la ventana nueva no es necesario indicarle a la función Javascript que debe cargar un determinado documento pues ya se encarga el propio link de hacerlo.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    elmen
    Mensajes: 1
    Reputación: 0
    Mensaje Nº 25 | 7:45 PM
    quien me puede decir porque no funciona el calendario, por favor
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 26 | 12:33 PM
    El calendario se expone en los módulos "Blog" y "Noticias del sitio". Si las noticias se exponen también en la página de inicio, el calendario se expone allá también. O sea, el calendario se expone donde se exponen las noticias.
    De todo modo si tienes un problema, no olvides dejarnos saber el nombre de tu sitio para que te podamos ayudar mejor.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 27 | 1:42 PM
    UNOS CUANTOS CONSEJOS ACERCA DE HACER EL PIE DE PÁGINA MÁS CÓMODO

    Para algunos usuarios el footer (pie de página) es una cosa de poca importancia. Pero en ciertos casos el footer puede ser un instrumento útil e importante para la navegación por el sitio y prestar una información útil al visitante.

    El footer no ha de ser sobrecargado de la información “pesada” y es deseable que su diseño sea simple y comprensible, no sea sobrecargado de la gráfica.

    La información expuesta en el footer del sitio puede facilitar informaciones útiles acerca de tu sitio y puede ser una magnífica herramienta de navegación.

    ¿QUÉ SE PUEDE PONER EN EL FOOTER?

    Enlace “Quienes somos”
    Tu sitio debe tener una sección “Quienes somos” que ha de contener una información principal acerca de ti o de tu empresa (firma, compañía, organización etc.), sitio web, servicios prestados etc. Eso facilita a los visitantes los datos adicionales para concretizar el carácter de tu web. Es importante familiarizar al visitante con tu sitio cuanto más.

    Enlace “Contacto”
    Uno de los problemas más graves según mi pensar, es la ausencia en el sitio de la información de contacto, pues un cliente/usuario potencial carece de toda la posibilidad de contactarse con el propietario del sitio o el webmaster.

    Eso no debe ser.

    Es deseable que facilites cuanto más información de contacto con ayuda de la cual un usuario podría contactar contigo.

    Términos del servicio
    Si tu empresa o firma presta servicios o vende algo, puedes hacer un enlace a los Términos de Uso o garantías que prestas durante el servicio de los clientes.

    Son medidas de protección y es muy importante tenerlas. La colocación de tal información es una cosa estándar y los usuarios tienen todo derecho de encontrar los datos.

    Política de privacidad
    En el proceso de procesar una información confidencial o trabajando con las direcciones y contraseñas de los usuarios, sería bueno advertir cómo estás pensando guardar esta información.

    Además, esa será una de las medidas para mostrar a los usuarios que ellos sí pueden confiar en ti.

    Mapa del sitio
    El enlace a tu Mapa del sitio permitirá a tus usuarios orientarse en tu sitio. De tal manera si alguien se pierde, podrá encontrar una ruta necesaria al pasar al Mapa del sitio por el enlace en el footer.

    Es un lugar ideal para poner este enlace.

    Dirección y teléfonos
    Si tu web está dedicada al “offline business”, sería deseable poner tu dirección y teléfonos para que los usuarios o clientes potenciales pudieran comunicarse contigo.

    Footer es un lugar muy conveniente para situar esa información pues los usuarios la esperan encontrar en ese mismo lugar.

    Unas cuantas palabras acerca del diseño del footer
    Trata de que el footer sea bien comprensible, lacónico y sin excesos. El gráfico no debe ser demasiado llamativo. Tampoco utiliza las fuentes específicos. Al crear el footer, asegúrate de que todo se lee fácil, se puede distinguir un enlace y un texto.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 28 | 6:16 PM
    Colocar bordes a la estructura del blog


    Primero, antes de comenzar a decirte como colocarle los bordes a la estructura del blog, debes conocer como es la estructura del CSS de un blog... Mira la siguiente imagen.



    #Outer-wrapper: Encierra todo el contenido del blog
    #header-wrapper: Es la cabecera del blog
    h1.title: Es el titulo de nuestro blog
    p.description: es la descripcion del blog
    #main wrapper: Encierra todo el contenido principal del blog, ejemplo; las entradas, links de feeds, etc.
    .post: Encierra todo el contenido de las entradas
    .post-title: Es el titulo de nuestras entradas
    .post-body: Es el contenido de nuestras entradas.
    .feed-links: Son los enlaces hacia el feed en nuestros blog (Suscribirse a: Entradas atom, etc)
    #blog-pager: Es todo lo que se muestra al entrar a la pagina individual de las entradas (Comentarios)
    #sidebar-wrapper: Encierra todo el contenido del sidebar o barra lateral.
    #widget: Encierra el contenido de cada widget en nuestro blog.
    .widget h2: Es el titulo del widget
    .widget-content: Es el contenido del widget
    #footer-wrapper: Encierra todo lo colocado en el pie de pagina.
    .footer: Es todo lo que aparece en el pie de pagina (imágenes, créditos, links hacia los feed, etc)

    Ahora, proseguimos, si ves muy bien la imagen, todos las palabras escritas con color violeta tienen un borde que las encierra, también hay algunos que escritos con color negros, igualmente las encierra, y a esas son a las que se les puede añadir el borde, ya yo antes probé con el titulo del widget y el contenido

    Probé con ponerle los bordes al título pero me fue imposible, no sé si será el blog, de todos modos ste post es dedicado a todos aquellos que tengan la misma duda...

    Solo debes colocar el siguiente código en una linea nueva debajo de cada código CSS

    Code
    border: 1px solid black;


    De modo que quede de esta forma



    Para entender el código.
    Border: Este se refiere al borde que queremos colocar, si quisiéramos solo colocar un borde derecho deberías colocar Border-right:, si fuera izquierdo (left), abajo (bottom) y arriba (top).
    1px: Hace referencia al grosor de la linea, mientras mas grande sea el numero, la linea sera mas gruesa.
    Solid: Hace referencia a el tipo de linea que aparecerá, en este caso seria una linea solida, es decir recta, pero si quieres colocarle una linea punteada debes sustituir solid por dotted.
    Black: Hace referencia al color de la linea, black; negro en ingles, puedes colocarle cualquier color con su nombre en ingles para que lo reconozca, de igual forma puedes visitar esta pagina de código de colores, puedes sustituir black por un código de color, ejemplo; el código de color de negro es #00000.

    Siempre acuérdate de ver la vista previa, luego si esta todo bien, podrás guardar los cambios, espero haberlos ayudado.

    Adherido: 9362887.jpg(47Kb)

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 29 | 12:17 PM
    Formas de crear un texto vertical con CSS y HTML


    A lo largo de nuestros desarrollos podemos encontrarnos con varios proyectos que exijan realizar tareas que comúnmente no consideramos relevantes para un sitio, pero que con el paso del tiempo se convierten en un sostén básico de nuestros diseños. Uno de estos casos peculiares, que puede parecer poco útil en principio pero cuyo uso se presenta con gran frecuencia, es el representar un texto de manera vertical.

    En nuestra cabeza puede parecer muy sencillo darle un formato vertical al texto, y lo es, solo que generalmente no es con la primera idea que se nos viene a la mente. Muchos pensamos que utilizar el salto de línea o hacer una imagen con texto representa una solución, pero es todo lo contrario, esta clase de contenido solo entorpecerá nuestro sitio y hará que perdamos estilo.

    Para evitarnos darle muchas vueltas al asunto, en este artículo presentamos una serie de métodos para lograr estructurar verticalmente un texto.

    Saltos de línea con HTML: br
    Sí, lo sé, hace apenas unas líneas atrás acabo de mencionar que los saltos de línea son junto con las imágenes la peor opción que podemos elegir, aún así siguen siendo una alternativa, la cual tenemos que evitar, pero una alternativa al fin.

    A este método se le podría asignar el título de “clásico” para realizar esta tarea, más de uno hemos recurrido a la famosa etiqueta br para colocarla después de cada letra de nuestra palabra y así tener un texto vertical.

    Code
    <h1>
         U <br />C <br />O <br />Z  
    </h1>


    Si bien logra su objetivo. por favor no lo uses, es un método que representa flojera y al mismo tiempo falta de estilo, tenemos que pensar más allá de un simple salto de línea y para ello vienen los siguientes métodos.

    Uso de elementos span de HTML
    Una alternativa no muy correcta pero efectiva, con excepción de los casos donde usamos contenido dinámico, es utilizar elementos de tipo span para envolver cada letra de la palabra y después darle un formato mediante una sentencia CSS que muestre cada elemento del encabezado en forma de bloque. Es decir, a una estructura HTML como esta:

    Code
    <h1>
         <span> U </span>
         <span> C </span>
         <span> O </span>
         <span> Z </span>
    </h1>


    Le aplicamos el siguiente estilo:

    Code
    h1 span { display: block; }


    Y listo, tenemos un texto vertical, con un código muy poco estético y con el riesgo de que falle con contenido dinámico, pero una alternativa al fin.

    Uso de JavaScript para crear texto vertical
    El fiel aliado JavaScript sale al rescate una vez más, esta vez para trabajar en combinación con CSS y darnos una alternativa un poco menos inestable y sin duda con mejor código de marcado.

    Para evitar agregar cada etiqueta span manualmente a las letras, podemos utilizar una función de JavaScript, de esta manera evitamos los problemas que mencionamos en la alternativa anterior y ahorramos unas cuantas líneas de código.

    Su uso es bastante similar al ejemplo anterior, utilizamos el mismo estilo pero el código HTML cambiará a este:

    Code
    <h1> UCOZ </h1>
    <script>
         var encabezado = document.getElementsByTagName('h1')[0];
         encabezado.innerHTML = '<span>' + encabezado.innerHTML.split('').join('</span><span>') + '</span>';
    </script>


    Como se puede ver el encabezado es la palabra completa sin nada entre las letras, después mandamos llamar un código de script que se encargará de envolver en una variable el elemento h1 para después cambiarle su contenido por cada letra que compone la palabra precedida y seguida por una etiqueta span.

    Uso de un ancho fijo para crear texto vertical
    Otra opción a utilizar, es aplicar una propiedad width fija al elemento que actúa como contenedor de nuestra palabra, en este caso el encabezado de tipo h1. Para ello recurriremos únicamente a utilizar CSS y lo haremos de la siguiente manera:

    Code
    h1 {
        width: 50px;
        font-size: 50px;
        word-wrap: break-word;
    }


    Como se puede ver, con este código asignamos un ancho muy pequeño que es exactamente igual al tamaño de la letra, para finalmente utilizar la propiedad word-wrap con valor de break-word y con esto forzar a que cada letra permanezca en su propia línea.

    Sin embargo este método tiene un par de desventajas, la propiedad word-wrap es parte de la versión 3 de CSS por lo que no es totalmente reconocida por todos los navegadores, además si utilizamos minúsculas puede que no surja efecto. Como opción para solucionar este último problema se puede utilizar la propiedad letter-spacing y así de esa manera asegurarnos de que no se pondrán más de 2 letras por renglón.

    Uso de ems para crear texto vertical
    Un em es una medida de tipografía, alternativa a los píxeles, y se utiliza para proporcionar la distancia y espacio que tendrá una letra en base al punto donde se encuentra, en pocas palabras utilizar un em es como utilizar la propiedad -height pero con más flexibilidad.

    Basta con darle un ancho de 1em al encabezado y colocar las letras separadas por un espacio para obtener resultados.

    Code
    h1 {
        width: 1em;
        font-size: 50px;
        letter-spacing: 50px; /* solo por precaución */
    }


    Code
    <h1> u C o z </h1>


    Uso de la propiedad “white-space” de CSS
    Si utilizamos la propiedad white-space con un valor de pre, entonces CSS interpretará cada espacio de nuestro texto literalmente, por lo que si agregamos los espacios suficientes en el código, el texto lucirá de igual manera en la página.

    Code
    h1 { white-space: pre; }


    Code
    <h1>
        U
        C
        O
        Z
    </h1>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 30 | 5:33 PM
    Texturas claras


    Lo que me gustan estos sitios que ofrecen texturas ¿quieres una textura de cuadritos? click en la imagen y vemos como queda el efecto de cuadritos, que queremos una textura de nubes pues click sobre la imagen y vemos como queda la de nubes así de fácil y así de rápido es decidirse.

    En tonos claros, sencillos y elegantes y en 3Quarks en la sección de Background y Patterns.



    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Configuración del diseño de otros elementos de la web
    Página 2 de 3«123»
    Búscar: