Colores CSS por palabra clave y Colores del Sistema

1) Por Palabras clave

CSS define 17 palabras clave segun el siguiente grafico


2) Colores del Sistema
Este metodo no se utiliza y se refiere a los colores usados en el sistema opertivo del usuario

Colores en CSS

El metodo mas comun para definir colores en CSS es el RGB hexadecimal pero es bueno saber que existen 5 formas de especificar los colores en CCS

1. Palabras clave
2. Colores del sistema
3. Hexadecimal RGB
4. numérico RGB
   
5. Porcentual RGB .
   

Esquinas Redondas con CSS

Esquinas Redondas con CSS es uno de los trucos habituales buscados por quienes suman expertise en estilos CSS
Una explicacion sencilla cd Esquinas redondas con CCS http://simplelogica.net/caoticoneutral/?p=15


Despues navengado por internes accedi al siguiente listado

• ThrashBox - crea cajas con esquinas redondeadas con un efectos de sombra.
• Even More Rounded Corners With CSS- técnica de diálogos con esquinas redondeadas fluidas y soporte para border con transparencia Alpha y degrades.
• DomCorners - una técnica muy simple para conseguir esquinas redondeadas.
• virtuelvis.com Rounded corners in CSS
• Transparent custom corners and borders version 2 - una técnica para crear esquinas redondeadas personalizadas y borde con una transparencia Alpha opcional.
• CSS Teaser Box with rounded corners - por Roger Johansson, el mismo autor de Transparent custom corners and borders version 2.
• News List - fue diseñado para mostrar enlaces de noticias recientes.
• CSS Liquid Round Corners
• Anti-aliased Nifty Corners - basado en Nifty Corners y modificado por Steven Wittens.
• Simple Box by tedd - otra simple técnica para crear esquinas redondeadas.
• CSS and round corners making accessible menu tabs - técnica para crear menú con tab con un estilo de esquinas redondeadas.
• CSS and round corners borders with curves
• Airtight Corners - genera cajas con esquinas redondeadas usando solo una imagen.
• Mountaintop Corners - una manera más fácil para crear esquinas redondeadas decentes.
• Editsite Rounded Corners - creando esquinas redondeadas con javascript.
• Create a rounded block or design with CSS and XHTML - crear bloques redondeados fácilmente.
• Resizable box with freely stylable corners and surface - cajas redimensionables con esquinas redondeadas.
• Smart Round Corners
• Lean and Clean CSS boxes
• Broader Border Corners
• Snazzy Borders
• Rounded corners in CSS by Adam Kalsey
• curvyCorners - un script Javascript para crear esquinas redondeadas on-the-fly solo en elementos DIV.
• Nifty Corners - una solución basada en CSS y Javascript para obtener esquinas redondeadas con imágenes.
• quinncrowley.com - basado sobre una combinación de pixy y Kalsey

Menus Espectaculares con CSS

Menus Espectaculares con CSS

Algunas direcciones con recursos

• Tecnica de creacion de Menu en CSS
  
• 37 tecnicas para Menu CSS
• Menus simples con CSS y Listas
• 11 free Menus con CSS para descargar
• Recopilacion de Menus en CSS
  

CSS: Unidades de Medida

Hay 2 tipos de medidas:

1. Absolutas
2. Relativas

Ambas medidas se escriben poniendo el nombre e inmediatamente la unidad de medida tomada

UNIDADES RELATIVAS

• em: relativa al tamaño de letra usado. Si bien no es exacto el valor 1 seria el ancho de la letra M mayuscula del tipo de fuente que se esta usando
  

• ex: relativa a la altura de la letra x minuscula tipo defuente que se use
  
• px: El pixel, una de las mas comunes que es relativa a la pantalla

Por ejemplo:

p { font-size: 0.8em; }

Indica que es 0.8 del tipo por defecto de la fuente que se usa en el navegado.


UNIDADES ABSOLUTAS

Son unidades completas.

• in: "inches" del inglés pulgadas donde 1 pulgada son 2.54 centímetros
• cm,: centímetros
• mm: milímetros
• pt: puntos donde 1 punto vale a 1 pulgada/72, aproximadamente 0.35 milímetros
• pc: picas donde 1 pica vale a 12 puntos, aproximadamente unos 4.23 milímetros

La mas habitual de uso es PUNTOS (pt)sobre todo para documentos que se van a imprimir

Como realizar Menus con CSS

Como realizar Menus con CSS?

La manera mas comun de realizar Menu, es utilizar Listas.
O sea estructuramos el MENU en XHTML con Listas y como no necesitamos Orden con listas No Ordenadas las UL.

Creamos un estilo personalizado (Estilo de clase)

#menu { 
 list-style:none; //No hay viñetas
 margin:0;  //No hay Margen
 padding:0; No hay padding (Distancia entre el contenido y el borde)
}

Luego a cada elemento .menu li a, le realizamos un diseño especial
y aca cada elemento .menu li a:hover tambien.

#menu a {
 text-decoration: none;
         width: 140px;
 color: #3366CC;
 background: #F0F7FC;
 padding: 3px 6px;
 
}


#menu a:hover {
 background: #DBEBF6;
}

CSS: Selector de clase

CSS Selector de clase

Son los mas usados y se aplican en todos los elementos que tengan en atributo class que coincide con el nombre del Selector

.parrafoespecial { color: red; }
 
<_p>Hola Mundo!<_/p>
<_p class=""parrafoespecial">Hola Mundo en color rojo

En la aplicabilidad y la herencia hay que identificar 3 casos bien diferentes

Caso 1) Todos los elementos de tipo "p" con  class="parrafoespecial"

p.parrafoespecial{ propiedad:valor; }

Caso 2)
Todos los elementos con atributo class="parrafoespecial" que estén dentro de cualquier elemento de tipo "p" 
p .parrafoespecial { propiedad:valor;}

Caso 3)
Se aplica a todos los elementos "p" de la página y a todos los elementos con
el atributo class="parrafoespecial" de la página 
p, .aviso { propiedad:valor; }

CSS: Selector de Tipo Etiqueta

Se aplica a los elementos HTML que coinciden con esa etiqueta.
Simplemente se coloca el nombre y entre llaves la propiedad y el valor o los conjuntos de propiedad valor sin son varios

h1 {
margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}

Los selectores se pueden separar por comas y unificar diferentes etiquetas

h1,h2,p {
margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}
En

En la practica conviene agrupar distintas etiquetas con propiedades comunes y luego hacer las propiedades especificas para cada uno.

Por ejemplo:

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector Universal CSS

CSS Selector Universal
El selector universal se escribe con un asterisco (*).
En la practica no se utiliza muy usado, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
Se aplica a algunos "hacks" para IE o en combinacion con otros selectores

Una de las aplicaciones basica es eliminar el margen y el relleno de todos los elementos HTML como en este ejemplo

* {
margin: 0;
padding: 0;
}

Sintaxis y selectores CSS

Sintaxis y selectores CSS

Cada regla CSS dispone de Selector y de Declaracion

Selector: A quien se le aplica

Declaracion: Que se hace
5 selectores Basicos

1) SELECTOR UNIVERSAL: Se aplica a todos los elementos de la pagina
Se representa con el asterisco "*"
por ejemplo

*{margin:0;}

2) SELECTOR DE ETIQUETA: Se aplica a cualquier etiqueta HTML
(p, h1,table, tr,li....)

Por ejemplo

ol{ font-family:Arial;}

3) SELECTOR DESCENDENTE (hijo):
Se aplica a elemento dentro de otros elementos
por ejemplo:
p strong {color:red;}

4) SELECTOR DE CLASE : Se aplica a todos los elementos que tengan el mismo atributo class

La sintaxis se le antecede un punto "." por ejemplo: .destacado{color:green;}
y se usa de la siguiente manera

<_p class="destacado"> Hola Mundo <_/p>

5) SELECTOR DE ID :Se aplica de manera similar a los Selectores de Clase con la diferencia que los selectores de ID se usan una sola vez por pagina y en lugar de punto se usa el numeral "#"

por ejemplo: #menu: {color:red;}

Cuales son los medios CSS

CSS presenta como ventaja la posibilidad de configurar los estilos acorde los diferentes medios que usemos (pantalla, impresora, dispostivo, etc)
El mas utilizado es screen

Listado de Medios disponibles

all -------------------------> Todos los medios definidos
braille ---------------------> Dispositivos táctiles que emplean el sistema braille
embosed ------------------> Impresoras braille
handheld ------------------> Dispositivos de mano: móviles, PDA, etc.
print ----------------------> Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection -----------------> Proyectores y dispositivos para presentaciones
screen ---------------------> Pantallas de ordenador
speech ---------------------> Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty ------------------------> Dispositivos textuales limitados como teletipos y terminales de texto
tv --------------------------> Televisores y dispositivos con resolución baja



<_link rel="stylesheet" type="text/css" style="font-weight: bold;">media="screen" href="style.css" />

<_link rel="stylesheet" type="text/css" style="font-weight: bold;">media="print" href="printstyle.css" />

Sintaxis de CSS

La Sintaxis de CSS esta definida de la siguiente manera:

Una Regla CSS:


Incluye un Selector en el que esta definida (empieza con llave "{") La Propiedad y el valor (separados por ":"), si en selector tiene diversas tuplas, Propiedad:Valor se separan entre ellas con ";" Finalizando con el cierre de la llave "}"
Todos los conjuntos de propiedad valor se denominan: Declaracion
Por ejemplo:

p {color:red;}

p {color:red; font-family:Arial}

Como usar CSS en un Sitio web

Hay 3 formas de usar CSS en un SItio web

1. Incluir CSS en el mismo documento HTML
2. Definir CSS en un archivo externo
3. CSS en los elementos HTML
   

1.-CSS en el mismo documento

Los estilos se definen en la cabecera del propio documento HTML .
Con la etiqueta<_style> dentro del <_head> del documento.


<_style type="text/css">
p { color: red; font-family: Verdana,Arial; }
<_/style>

Utilizacion:

1. Cuando existen un número pequeño de estilos
   
2. Cuando se incluyen estilos específicos en un determinado documento HTML

Desventajas:

Cuando se quieren modificar los estilos se debe modificar cada pagina

2.-CSS en un archivo externo

Todos los estilos se incluyen en un archivo externo (por ejemplo style.css ) y se vinculan mediante la etiqueta <_link> .
Por ejemplo:
<_link rel="stylesheet" type="text/css" href="style.css" media="screen">

style.css es un archivo de texto con la extension CSS donde estan definidos todos los estilos

VENTAJAS

1. Se puede incluir el mismo archivo CSS en muchas paginas HTML estableciendo un estilo homogeneo al todo el sitio web
2. Es facil de mantener, un solo cambio modifica la apariencia de diversos documentos

3.-CSS en los elementos HTML

Es similar a aplicar la etiqueta formato con HTML


<_p style="color: red; font-family: Verdana,Arial, Helvetica;">Hola Mundo

Diseño de Colores Armonicos

Si quieres obtener un Diseño de Colores Armonicos
no dejes de visitas
http://wellstyled.com/tools/colorscheme2/index-en.html

Que es CSS?

CSS (Cascade Stylee Sheet) es un lenguaje de hojas de estilos creado para controlar la presentación de los documentos electrónicos definidos con HTML y XHTML (paginas web).

CSS separa los contenidos y su presentación

Ventajas:

1. Obliga a crear documentos HTML/XHTML bien definidos y con significado completo
2. Mejora la accesibilidad del documento
3. Reduce la complejidad de su mantenimiento
4. Permite visualizar el mismo documento en infinidad de dispositivos diferentes

HTML/XHTML se utiliza para marcar los contenidos (para designar lo que es un párrafo, lo que es un titular o lo que es una lista de elementos)

CSS se utiliza para definir el aspecto de todos los contenidos, es decir, el color, tamaño y tipo de letra de los párrafos de texto, la separación entre titulares y párrafos, la tabulación con la que se muestran los elementos de una lista, etc.

Posicionamiento y Trafico con Youtube

Posicionamiento Páginas Web. Tráfico Gratis Con YouTube

Escrito por: Alejandro Bustos

Hay muchos métodos para crear tráfico gratis hacia tu sitio, pero en este artículo te enseñaré específicamente como generar tráfico con YouTube o demás sitios de videos en línea y aumentar así el tráfico hacia tu sitio y el posicionamiento páginas web.

YouTube se ha convertido en una fuente invaluable para generar tráfico gratis hacia tu sitio, lo primero que debes hacer es una búsqueda de tu nicho de mercado o de tu tema en YouTube y mirar la cantidad de videos que hay, cuantas visitas han recibido esos videos y que tipos de comentarios reciben. Es muy importante concentrarse en analizar los videos que tengan más visitas y fijarte en 3 cosas:

1. El título

2. Las tags

3. La descripción

Una vez hecho esto, ya podrás darte cuenta si vale la pena o no colgar un video y si es así, que tipo de video le gustaría ver a la gente, el próximo paso a seguir es producir tu video, actualmente hay varios programas gratuitos para editar videos, hasta el mismo Movie Maker de Winodws lo puedes utilizar, pero el programa que yo utilizo porque es genial y te permite hacer miles de cosas a tu video es definitivamente Camtasia Studio.

Una vez tengas tu video listo debes pensar bien el título, las tags y la descripción que vas a ponerle, ya que de esto va a depender el posicionamiento de tu video y la cantidad de visitas que recibirá tu sitio, no olvides poner siempre una marca de agua al video con la dirección de tu sitio para que la persona que lo vea siempre la tenga presente, y en la descripción del video siempre debes colocar un enlace a tu página para que la gente haga click, recuerda que nosotros somos muy perezosos y es más fácil hacer click que escribir la URL y también ayuda al posicionamiento páginas web.

Te aseguro que si haces esto el tráfico a tu sitio web va aumentar dramáticamente, personalmente esto me ha funcionado bastante bien y me ha ayudado a generar tráfico importante en menos de un día y optimiza mi posicionamiento páginas web.

Fuente del artículo http://www.articulo.org/autores_perfil.php?autor=1228