Manejo de Hojas de Estilo CSS con Dreamweaver CS3.

 En este tutorial, veremos el uso de Hojas de Estilo CSS, para dar forma y color a nuestras web, utilizando código y/o menú de Dreamweaver sin usar código.

El CSS permite dar forma, color, y posicion a los elementos HTML de nuestras paginas web, la siguiente es una pequeña guuia de, manejo de CSS utilizando Dreamweaver CS3. Tambien es posible con versiones anteriores.

Supongamos que hemos creado el siguiente CSS:

.letragrande a:link {
color: #FF9900;
background-color: #FFFFFF;
}

.letragrande a:hover {
color: #FFFFFF;
background-color: #FF9900;
}

.letragrande a:active {
color: #CCCCCC;
background-color: #FFCC66;
}

.letragrande a:visited {
color: #FF9900;
background-color: #FF9900;
}

Esto define un estilo, llamado .letragrande que tendra diferentes colores para los enlaces, segun sean, enlace comun (link), un enlace con el mouse encima (hover), un enlace activo (active), un enlace visitado (visited), de esta forma le damos un color a cada tipo de enlace con solo aplicar esto asi:

<a href=”cualquiera.html” class=”letragrande”>ir a cualquier lado</a>

Esta es para quienes comienzan, una de las formas mas utiizadas, o sea colorear links o enlaces, la siguiente es la forma en que se podrian colorear otros elementos, como veremos esto aplicado a una tabla.

Comenzaremos utilizando el Menu de Dreamweaver, para en principio no utilizar codigo, y seria asi:

1) Insertamos una tabla, con Insert (insertar), Table (tabla) o bien con el Icono de Tablas si lo tenemos activo en Dreamweaver

2) Definimos las propiedades en este caso 3 x 3

El codigo generado de la tabla sera este:

<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

3) Adentro le puedes escribir cualquier texto y demas

4) Con respecto a la forma es mejor cambiarla por un CSS separado, o sea que no lo agregues dentro del html (si bien se puede), de manera directa. Por ejemplo veamos:

Le vamos a dar un tipo de fuente y color a todo el documento comprendido dentro de la etiqueta body

body {
font: bold 12px Georgia, “Times New Roman”, Times, serif;
color: #FFFFFF;
}

Le vamos a dar un borde de color rojo a toda la tabla. Como es generica (por usar la palabra clave html table como nombre) se aplicara a todas las tablas.

table {
border: 1px solid #FF0000;
}

Para que no quede amontonado le daremos un espaciado de 10px a el contenido de las celdas. Tambien se aplicara a todas las celdas por usa la palabra clave html td

td {
padding: 10px;
}

Ahora veamos de aplicar solo a algunas partes, para esto anteponemos un nombre de clase a la palabra html que vamos a afectar, por ejemplo:

.rojo td {
background: #FF0000;

}

afectara a las celdas, por ser el html td, pero unicamente a las que le aplique la clase llamda .rojo

Si queremos que al pasar por encima quede un poco mas claro esa celda, usamos hover, asi:

.rojo td:hover {
background: #FF6699;

}

Y asi podemos hacer clase .verde y .azul para el estado normal y para el estado hover asi:

.azul td {
background: #000099;
}.azul td:hover {
background: #0099CC;
}
.verde td {
background: #009966;
}
.verde td:hover {
background: #00FF99;
}

El resultado es este, click para verlo funcionando.

Si creas una hoja de estilo aparte en un archivo aparte, asi como yo hice estilo.css, la insertas seleccionando abajo:

Style (Estilo), Attach Style Sheet (Adjuntar Hoja de Estilo), y la eliges con Browse, como muestra la imagen:

De esa forma automticamente la tabla que en la imagen se ve sin estilo, tomara el estilo apropiado indicado por la hoja de estilo CSS. Lo bueno de hacerlo asi separado es que puedes tener estilo1.css, estilo2.css y varias que aplicandolas cambian tu sitio web. SIN HACERLO DE NUEVO le cambias la piel y el contenido sera e mismo, esa es la ventaja de separar el contenido del diseño, mediante CSS.

Para aplicar un estilo con Dreamweaver solo debes seleccionar el elemento html, ahi en la imagen se ve como selecciono <tr> y le aplico la clase rojo, quedando <tr.rojo>

Haz lo mismo con las otras dos filas, aplicando azul y verde. Esto tambien se puede hacer a puro codigo (como lo hago yo), asignando al tr correspondiente el codigo CSS asi: (escribiendo en modo vista de codigo)

<tr class=”rojo”> que es el mismo efecto que se consigue por menu, si miras el codigo ahora

Por ultimo nos queda ver como evitar escribir codigo CSS, si bien yo lo hice escribiendo a todo el codigo css como este:

table {
border: 1px solid #FF0000;
}

En la opción Windows (ventana), CSS Styles (Estilos CSS) o Shift F11, hacemos aparecer la Ventana de CSS, en ella podemos editar uno de los estilos que aparecen listados, estos son los mismos de nuestro archivo estilo.css

Simplemente seleccionamos un estilo, por ejemplo .rojo td y damos editar, que es el icono del lápiz marcado con el numero 2 en mi imagen

Podemos también agregar nuevos icono 1, y eliminar icono 3

La edición se puede hacer directo, seleccionando y modificando las propiedades abajo en Properties (Propidades), como muestra la imagen, o con el icono editar y modificando los datos en el formulario lo cual es mas intuitivo:

Type: se refiere a las fuentes

Background: se refiere al fondo

Box: a los elementos como espaciados de una zona cualquiera, margenes, ancho, alto, etc

Border: se refiere al borde, estilo (punteado, lines, solido, etc), el ancho del borde, y el color

Nota: use una tabla como ejercicio, recuerden que las tablas son para tabular datos como listados y reportes de información, no para maquetar una web o sea acomodar el diseño o un menú, etc. Para eso se usan otros elementos del HTML y CSS.

http://www.webtaller.com/construccion/programas/editores/dreamweaver/lecciones/manejo-hojas-estilo-css-dreamweaver-2.php

5 técnicas para conseguir tráfico hoy.

Retozando en el foro de Xeoweb - uno de los pasatiempos para los que quisiera tener más tiempo – me topé con un hilo que cuestionaba la existencia del SEO como herramienta de mercadeo. Me pareció impactante que en un foro de SEO alguien con más de un año y 300 mensajes de participación pudiera tener dudas sobre si el SEO existe, pero más que eso me dio a pensar en las razones por las que nuestro compañero había perdido la esperanza y bajado los hombros.

Y sin mucho esfuerzo puedo recordar situaciones en las que he sentido frustraciones similares. A veces se aplican todas las “reglas” que hemos ido recogiendo con el tiempo y parecen no tener el efecto prometido.

Para triunfar en posicionamiento hace falta meterse en un mundo de reglas dudosas, creadas por los aficionados que llegaron antes que uno y han tenido que aprender a punto de prueba y error. Esto no es ciencia exacta en función de que los algoritmos están ocultos y en constante evolución, y el medio sobre el cual trabajamos no nos quiere aquí (los buscadores tuvieran la vida más fácil si nadie supiera de SEO).

5 ideas – Tráfico Ya!
En este post quiero compartir algunas ideas que ayuden a darle un empujón a los que se sientan estancados. De alguna forma podemos considerar estas técnicas como trucos de resultados concretos para acompañar tanta teoría de mercadeo que a veces nos deja en el aire. Aunque todo lo expuesto aquí nos consigue enlaces y ayuda en el posicionamiento, me voy a concentrar en conseguir tráfico inmediato.
1. Wikipedia
La Wikipedia es una excelente fuente de tráfico porque está en constante uso. Es verdad que los enlaces externos tienen puesto un nofollow, y por esto mucha gente se olvida de utilizar este recurso. Pues bien, el objetivo del mercadeo de un sitio es conseguir tráfico de calidad, y para esto la Wikipedia es estelar.

Un buen artículo de la Wikipedia puede enviarle a un sitio cientos de visitas al día. Sin embargo, no es cuestión de meterle spam a la enciclopedia, porque el spam (es inaceptable – he dicho! -, y además) no dura mucho en una enciclopedia comunitaria en la que cualquier puede corregir las entradas.

Para conseguir tráfico de la Wikipedia hace falta contribuir con algo valioso. Por suerte el rango de temas que se tratan en la enciclopedia es tan amplio que de seguro cualquiera puede encontrar un lugar donde contribuir con sus propios conocimientos (o un tema que vaya de la mano con el sitio que estamos posicionando).

Entonces, mi recomendación es escribir un puñado de artículos de primer nivel con contenido de calidad digno de una enciclopedia, y luego aportar con ese contenido a los artículos de la Wikipedia; y por supuesto, dejar a manera de citación un enlace de regreso hacia la fuente (nuestros artículos), como es la norma cuando se agrega información a la Wikipedia (las citaciones son parte crucial de la calidad de cualquier enciclopedia).

Estas citaciones comenzarán a enviar tráfico de inmediato.
2. Introducción a la Comunidad
Sea cual sea el tema del sitio que estemos posicionando, lo más probable es que ya alguien tenga un sitio al respecto. Yo voy más lejos a sugerir que también es probable que ya existan algunos blogs, foros y comunidades tratando el tema.

Pues bien, tenemos un sitio bueno, con contenido de calidad, sin tráfico. Es posible que los buscadores aún no nos tengan cariño, pero esto no significa que la comunidad no tenga interés en nuestro sitio y su contenido.

Una de las mejores maneras de dar a conocer un sitio es simplemente salir a interactuar con gente del medio. Los blogs aceptan comentarios, los foros aceptan mensajes, etc. Una forma de conseguir visitas de inmediato es encontrar estos recursos y participar (y, por supuesto, dejar nuestra firma).

Ojo, que no hablo de spam, (yo nunca hablo de spam porque como ya dije, no es aceptable, y además) el spam no va a llamar la antención de los participantes favorablemente. El objetivo aquí no es ganar PageRank con enlaces sino incentivar al mundo a pasarse por nuestro sitio. Entonces, la participación en blogs y foros implica aportar a lo que se está hablando con ideas coherentes e inteligentes que llamen la atención o que por lo menos no pasen desapercibidas.

Aquí podríamos entrar un poco en LinkBaiting (armar escándalo a propósito entre otras cosas), pero sin ir más lejos lo que yo sugiero es encontrar blogs y foros de una temática relacionada a la de nuestro sitio y salir a leer el contenido y las ideas de otros y participar con aportes (comentarios y mensajes).

Conforme la comunidad se interese por nuestra participación van a seguir los enlaces en nuestras firmas.
3. Sitios Comunitarios de Envío de Noticias
Gracias a Digg, y en especial a Menéame , hemos visto una explosión de sitios en los que la comunidad contribuye con noticias y elige lo que va a la portada.

Contribuir en sitios como estos nos provee de enlaces y tráfico instantáneo. El volumen y calidad de tráfico depende de la calidad de la “noticia” que estemos aportando.

Mi recomendación es identificar estos sitios, analizar el tipo de noticias que van bien con la comunidad de cada uno, y aportar en los sitios en los que el contenido del nuestro pudiera tener una buena acogida. También recomiendo escribir artículos en nuestro sitio específicamente diseñados para agradar a los usuarios de estas comunidades (y, por supuesto, enviar dichos artículos como noticias).
4. Inicia un Blog
Muchos sitios no son blogs, y no tienen blogs. ¿La razón? No hay razón. La excusa es que son sitios comerciales o dedicados a algo específico como una herramienta o cualquier otra cosa que no se preste al estilo tradicional de un blog.

Pues bien, el blog no tiene que ser la potada del sitio. Tampoco hace falta que sea parte importante del sitio ni siquiera que hable de lo mismo de lo que trata el sitio.

Existen varias formas de llevar un blog. Puede ser un blog temático, directamente relacionado con el tema general de nuestro sitio. Así puede ser un blog técnico, o un blog de ideas y consejos, o un blog sobre la opinión del director de la empresa o sitio con respecto a los servicios de la empresa o sitio.
Puede ser un blog de noticias, sobre lo que está haciendo la empresa y los planes a futuro. Puede ser un blog sobre noticias temáticas para mantener a la comunidad informada sobre los acontecimientos relacionados con el tema del sitio.
Puede ser también un blog personal con información curiosa sobre la vida de las personas que están detrás del sitio. En fin, contenido constante.

El tener un blog permite (entre otras cosas) beneficiarse de los directorios (y buscadores) de blogs y tags, que son muy activos y fácilmente pueden enviar cientos de visitas al día (por no decir miles) y mejorar el PR otorgándonos un montón de enlaces. Un blog puede empezar a recibir tráfico de estos directorios desde el momento en que empieza a generar contenido.
5. Mercadeo Fuera de Internet
No todas las gestiones tienen que ser electrónicas. Existen formas de conseguir tráfico y promocionar un sitio fuera de Internet. La creatividad manda en este tipo de mercadeo estilo guerrilla (si se lo desea hacer manteniendo la inversión al mínimo). En realidad se puede hacer de todo.

Un paso inicial es poner la dirección del sitio en nuestras tarjetas de presentación, y luego salir a participar con la comunidad en vivo. Ferias, eventos, seminarios, patios de comida, etc… hay un montón de situaciones en las que podemos entablar conversaciones sobre nuestro sitio. La diferencia es que una conversación uno a uno solo nos consigue una visita, pero va a ser una visita con mucho interés. No se trata de alguien que dio con nuestro sitio tras una búsqueda rápida, sino de alguien que ya asocia nuestro sitio con su propia realidad.

Una forma de mercadeo guerrilla simple es imprimir nuestra dirección en hojas o afiches o volantes y encontrar formas creativas de distribuirlos. Tableros de anuncios, postes de luz, ascensores… cualquier lugar. Es sorprendente la cantidad de establecimientos comerciales que permiten dejar volantes en un mostrador.

En fin, este tema del mercadeo guerrilla es muy largo y sin duda brinda resultados. La regla es simple: a mayor creatividad mejores resultados.

Recursos:
- Referencia Rápida sobre edición de la Wikipedia
- Búsqueda en blogs: Google Blog Search , Blogalaxia , Technorati
- Lista de clones de Menéame (más de 260)
- Instalación de un Blog: 40 Tips Practicos
- Sobre Google y la Indexación del Contenido (aquí doy consejos para blogs y hablo sobre los directorios de blogs y tags)
- Ideas de Marketing Guerrilla para encender la creatividad

Autor: Jose Onate
http://www.seoprofesional.com/index.php/22-08-2007/trafico/5-tecnicas-para-conseguir-trafico-hoy/

11 consejos para ganar suscriptores en tu blog.

 En el artículo podrás leer una lista de consejos para aumentar el número de suscriptores a tus feeds.

Llego a ‘11 Ways to Find New RSS Subscribers for Your Blog‘, una lista de consejos para aumentar el número de suscriptores a tus feeds. La mayoría de ellos, por no decir todos, los conocemos y practicamos, pero vistos así, juntos en un listado, creo que pueden resultar de gran utilidad para quien no haya trabajado demasiado este campo. Recomiendo su lectura (en inglés) en el sitio original, pero te dejo aquí un resumen en traducción libre, por si se te hace más cómodo:

1. Presenta tu feed en un lugar destacado del blog
2. Ofrece enlaces e imágenes para servicios de lectura concretos (Bloglines, Google Reader, Netvibes, Rojo…)
3. Procura utilizar diversos métodos de promoción (contador de FeedBurner, banner de suscripción…)
4. Educa a tus lectores potenciales (postea acerca de lo que es un feed, cómo se usa, dónde se puede leer…)
5. Habilita servicios de correo que hacen uso de los feeds (yo uso FeedBlitz vía FeedBurner)
6. Promueve tus feeds también fuera de la blogosfera (como firma de correos o de foros, por ejemplo)
7. Asegúrate de que tu feed es fácilmente ‘visible’ desde servicios de descubrimiento de feeds, como por ejemplo los que incluyen los mejores navegadores
8. Ofrece contenidos completos (eso de ‘lee más’ o ‘para leer más, visita mi blog’ es irritante y contraproducente)
9. Ofrece un plus a tus suscriptores (regala algo, sorpréndelos…)
10. Promueve tus feeds en aquellos contenidos que te generen más visitas
11. Lanza una campaña de publicidad (tipo AdWords)

Los puntos #6, #9 y #11 me parecen un tanto excéntricos, y para el punto #10 casi es mejor utilizar un plugin del tipo What Would Seth Godin Do, que te permite colocar un anuncio dirigido a nuevos visitantes en la sección de tu blog que desees, incluidos los posts.

Autor: Darren Rowse
http://www.problogger.net/archives/2007/02/14/11-ways-to-find-new-rss-subscribers-for-your-blog/

El valor de los foros en posicionamiento Web.

Cuando intentamos posicionar una web algunas veces perdemos de vista que los foros son una herramienta indispensable para nuestro posicionamiento ya que nos relacionamos con gente interesada en el mismo tema que nosotros, del mismo sector o con un interés particular.

Si yo quisiera posicionarme con una empresa digamos de venta de coches de gama alta por ejemplo Audi me pondría manos a la obra y lo primero que haría sería buscar el foro sobre Audi más visitado, eso no es ningún problema con tal de hacer una simple búsqueda por Foro Audi encontramos que es http://www.audisport-iberica.com/foro/ , logicamente me daría de alta como usuario y comenzaría a postear sobre temas interesantes como por ejemplo :

1. Nuevos modelos que van a aparecer en el mercado facilitado por PepitoAudi.com
2. Comparativas de modelos por PepitoAudi.com
3. Mantenimientos especiales por PepitoAudi.com
4. Revisiones a tener en cuenta para Verano por PepitoAudi.com

Etc…

Bueno no se un montón de temas interesantes que cualquier empresa que se dedique al sector tiene en su mano y  por lo tanto interesantes para los usuarios del foro, una vez realizado esto intentaría crear un perfil de profesionalidad del usuario para que los temas que comenzara o los posts a los que respondieran fueran lo más profesionales posibles y finalmente crearia una firma con el enlace y el anchor text adecuado hacía la web que queramos posicionar en cuestión.

Con todo esto estaremos ganando enlaces con el anchor text deseado, reconocimiento dentro del foro y por lo tanto de gente interesada en el sector del automóvil que nosotros vendemos, así como contactos interesantes con otras webs del mismo sector a las que les pueda interesar el intercambio de enlaces etc…

Por lo tanto ya sabes aunque no tengas blog siempre puedes ecribir en los foros ya que tus post o respuestas son como una bodega de buenos enlaces que en un momento dado puedes utilizar para tu posicionamiento, de echo existe gente que incluso compra las firmas de posteadores con una gran cantidad de post en foros interesantes para su posicionamiento.

Autor: Duque
http://www.seoprofesional.com/index.php/04-09-2007/posicionamiento-web-en-buscadores/el-valor-de-los-foros/

Qué es en realidad el buen diseño web.

 Un sitio comercial en donde el buen aspecto debe predominar y mantener una línea de diseño coherente con una imagen corporativa preestablecida. Pero para una aplicación web destinada a cientos o miles de usuarios y que tiene interacción con el usuario todo cambia.

Hace un tiempo, charlando con amigo programador que me mostraba un proyecto que quería lanzar, noté que si bien la idea del sitio era muy interesante y el funcionamiento intuitivo y usable el diseño o aspecto general era demasiado austero, dicho en otras palabras; era horrible. Con buenas intenciones le dije que podía diseñarle algo mejor, hacer una maqueta y que modifique luego él.
Mi asombro fue cuando negó mi ofrecimiento y me dijo que un sitio austero y sencillo tiene más posibilidades que un sitio muy elaborado en diseño. Me pareció “medio incorrecta” su observación y pasé a otro tema. Siempre pensé que un sitio debe cautivar por su aspecto.

Sin embargo la idea me quedó en la cabeza, una cosa obviamente es un sitio comercial en donde el buen aspecto debe predominar y mantener una línea de diseño coherente con una imagen corporativa preestablecida. Pero para una aplicación web destinada a cientos o miles de usuarios y que tiene interacción con el usuario todo cambia.

Últimamente me he dado cuenta de que los usuarios de aplicaciones ya no quieren las cosas bonitas, porque eso les transmite la idea inconsciente de “comerciabilidad”; se le transmite la idea de que algo en el fondo quieren venderle, de que algo le van a cobrar. Digo esto después de “encuestar” a muchos usuarios que son fanáticos de aplicaciones simples, casi sin diseño. Hice esto porque estoy desarrollando una aplicación junto con un amigo y deseaba saber que es lo que realmente quieren los usuarios.

Descubrí lo siguiente:
El sitio debe ser Funcional: el sitio debe responder siempre a lo que el usuario espera, nunca debería defraudarlo. El usuario entra con una idea fija en la cabeza, lograr o encontrar algo, si no lo logra se verá engañado calificando el sitio como poco útil o poco preciso. La garantía es que nunca más vendrá. En cambio si el sitio cumple nos aseguramos un lugar en sus favoritos.

El diseño debe ser usable: muchos siempre han pensado que un sitio usable es uno que tiene tipografías grandes y colores llamativos. Nada más lejos, un sitio usable tiene solamente lo que necesita el usuario, nada más. No sobra ningún vínculo y se destaca de manera visual lo que más necesita. Todo está a su alcance con el menor esfuerzo visual.

El diseño debe ser Sencillo: creo que esto es lo más importante y al mismo tiempo lo más difícil de lograr. Como diseñadores tenemos una tendencia de cargar las cosas para estilizarlas, pero a veces cometemos el error de entorpecer o saturar el aspecto de un sitio.
El ojo del usuario se concentra en pocas cosas, mientras más ornamentos u objetos tenga más demorará en encontrar cada cosa.

El diseño debe “hablar”: El usuario debe poder identificar y generar un esquema en un pantallazo de como se compone el sitio y como deberá moverse en el mismo. Esto se logra aplicando los principios de la usabilidad y utilizando recursos visuales de una manera muy sutil. Por ejemplo, se debe determinar claramente lo que es contenido dinámico de lo que es estático. Esto es parte sensible en la navegación general.

Debe estar bien programado: la buena programación ayuda a la sencillez y a la velocidad de carga, creo que el contar con una buena programación es importantísimo. Mientras en menos cosas intervenga el usuario más adicto se hará a la aplicación o al sitio que navega. Por ejemplo, el otro día estaba utilizando un sitio que permitía subir trabajos de diseñadores, cuando hacía el upload de imágenes la aplicación me dijo que las imágenes deberían tener determinado ancho en píxeles. Automáticamente salí del sitio y busqué otra aplicación porque no tenía ganas de editar cada imagen. Mientras más fácil hagamos la vida del usuario más cariño le tomará a tu sitio.
Un sitio bien programado también es muy rápido. No precisas tampoco meter AJAS por todos lados, debe existir equilibrio.

El diseño no precisamente debe ser llamativo: Flickr, Youtube, Facebook, realmente no poseen un gran diseño, más bien son austeros y apuntan al uso del texto medianamente estilizados para lograr un buen diseño, pero no impresionan a nadie. La verdad es que ganan por la utilidad del mismo. Cuando conocí youtube hace unos tres años, me dije que este sitio era un fracaso por el diseño pobre que tenía, que equivocado que estaba.
El diseño debe se utilizable, no debe porque despistar al usuario ni mucho menos distraer la atención principal. En el caso de flickr nada sobra ni nada falta. Creo que es el mejor modelo de donde nos podemos agarrar.

Simple pero no desagradable: Muchos en el afán de lograr la máxima simpleza rayan la austeridad absoluta o el mal gusto, descuidando combinaciones de colores, tamaños de tipografías y espacios de blancos. Se debe buscar el equilibrio, esa es la clave.
Alguien dijo que el buen diseño pasa totalmente desapercibido, no nubla ni distrae al usuario.

Estas son mis observaciones, la verdad es que son muchos los factores que inciden en el éxito de un sitio, pero como siempre digo, si pensamos en el perfil de usuario que visitará el sitio estaremos muy cerca de lograr siquiera que nos vuelvan a visitar.

http://www.webtaller.com/maletin/articulos/realidad-buen-diseno-web.php?bol0309-2