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

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

Servicio para crear paginas web Gratis de Google

Nuevo Servicio de Google para crear paginas web Gratis

Google Sites, como se llama el nuevo sistema, es una versión reducida de JotSpot, un servicio fácil de editar para que organizaciones y particulares construyan y editen páginas web y que Google adquirió hace 16 meses bajo condiciones no publicadas.

El nuevo servicio marca el último paso de la empresa en su estrategia de entrada en el mercado empresarial y educativo.

La iniciativa permite a los usuarios no entendidos en la materia organizar y compartir información digital como enlaces web, calendarios, fotos, videos, presentaciones, archivos adjuntos y otros documentos en una página fácil de mantener, o crear su propia "intranet" para gestionar proyectos en equipo.

"Crear una página web para un equipo siempre ha sido demasiado complicado, requería hardware especializado y software, así como conocimientos de programación," dijo Dave Gorouard, director general de la unidad Enterprise de Google, dirigida a trabajadores de oficinas.

Google Sites es una versión reducida del programa SharePoint de Microsoft, que permite a los usuarios de una organización compartir documentos y mantener calendarios en páginas web seguras, pero es mucho más complejo de construir y mantener.

Las páginas son gratis o con una pequeña cuota en función del número de usuarios, dependiendo de si las organizaciones han adquirido versiones completas de Google Apps, un paquete de software que incluye procesador de textos, hoja de cálculo y un programa de presentaciones, además de correo electrónico y herramientas sencillas de publicación web.

"La idea es que los departamentos de Tecnologías de la Información no tengan que hacer nada salvo facilitar a los usuarios valerse por sí mismos," indicó Gorouard.

A diferencia de SharePoint, que normalmente exige a las organizaciones comprar y mantener su propio hardware y software, con un gasto que puede oscilar entre decenas y cientos de miles de dólares para cien usuarios, Google Sites está alojada en los ordenadores de Google y es gratis para los usuarios de Google Apps.

Según Google, más de 500.000 empresas y varios miles de escuelas y universidades adoptaron Google Apps durante el año pasado.

La psicología del color al diseño web

Escrito por: Jose Carlos Ibañez Manchego


Si usted desea ser un profesional en cualquiera de los campos del arte, debe, como un paso importante conocer el color. En este artículo, conoceremos un poco la Psicología del color.

Los colores afectan nuestros estados de animo. Dependiendo de la parte del mundo en la que vivamos, tendremos distintas percepciones del color basadas en nuestra cultura. Incluso dentro de un mismo territorio o país, nuestra percepción a cambiado con el paso del tiempo. A pesar de que la psicología convencional rechaza la idea de que los colores pueden afectar nuestros estados de ánimo, hoy muchos psiquiátras han descubierto algunas verdades universales acerca del color y su efecto en nuestra conciencia.

Y usted se preguntará ¿Porqué esto es importante en el diseño de mi sitio web? Muy sencillo, por ejemplo, si usted esta creando un sitio web sobre la naturaleza, o cosas relacionadas con la naturaleza, entonces debe alejarse completamente del color púrpura. Porque el púrpura esta completamente alejado de la naturaleza, ya que es muy poca o mínima la presencia del púrpura en la naturaleza, es así que el púrpura es a menudo visto como un color artificial. Sin embargo si su sitio trata sobre enseres, muebles o decoración con un tono de abundancia, los tonos púrpuras serían perfectos para esto, ya que estos imparten ideas de realeza, lujo, riqueza y sofisticación.

Ahora que ya entendió la idea, pongamos manos a la obra. Como ya mencioné la idea de los colores puede, y debería, afectar el diseño de nuestro sitio web. Existen muchas reglas simples para escoger las combinaciones correctas de color, y la mayor parte de ellas tienen relación en como afecta el color la mente consciente de los individuos.

Por ejemplo, si usted realiza ventas de productos en su sitio web, debería entender el rol específico de la psicología del color en el marketing online. El rojo estimula la acción, representa agresividad, excitación y combinado con el gris, representa impulsividad. El azul, representa sensibilidad y lealtad. En un negocio online, sombras de color rojo, azul y marrón, representan seguridad. Mientras el blanco es siempre visto como profesional, pues es asociado con un sitio comercial. Es el color el que brinda la primera impresión.

Trabajando de la forma correcta la psicología del color, usted podrá rápida y fácilmente realizar un trabajo más profesional en sus diseños de paginas web. Tómese un tiempo y estudie o lea acerca del significado de los colores y de como estos afectan nuestra conciencia.

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

www.haciendowebs.com

La psicología del color al diseño web

Escrito por: Jose Carlos Ibañez Manchego


Si usted desea ser un profesional en cualquiera de los campos del arte, debe, como un paso importante conocer el color. En este artículo, conoceremos un poco la Psicología del color.

Los colores afectan nuestros estados de animo. Dependiendo de la parte del mundo en la que vivamos, tendremos distintas percepciones del color basadas en nuestra cultura. Incluso dentro de un mismo territorio o país, nuestra percepción a cambiado con el paso del tiempo. A pesar de que la psicología convencional rechaza la idea de que los colores pueden afectar nuestros estados de ánimo, hoy muchos psiquiátras han descubierto algunas verdades universales acerca del color y su efecto en nuestra conciencia.

Y usted se preguntará ¿Porqué esto es importante en el diseño de mi sitio web? Muy sencillo, por ejemplo, si usted esta creando un sitio web sobre la naturaleza, o cosas relacionadas con la naturaleza, entonces debe alejarse completamente del color púrpura. Porque el púrpura esta completamente alejado de la naturaleza, ya que es muy poca o mínima la presencia del púrpura en la naturaleza, es así que el púrpura es a menudo visto como un color artificial. Sin embargo si su sitio trata sobre enseres, muebles o decoración con un tono de abundancia, los tonos púrpuras serían perfectos para esto, ya que estos imparten ideas de realeza, lujo, riqueza y sofisticación.

Ahora que ya entendió la idea, pongamos manos a la obra. Como ya mencioné la idea de los colores puede, y debería, afectar el diseño de nuestro sitio web. Existen muchas reglas simples para escoger las combinaciones correctas de color, y la mayor parte de ellas tienen relación en como afecta el color la mente consciente de los individuos.

Por ejemplo, si usted realiza ventas de productos en su sitio web, debería entender el rol específico de la psicología del color en el marketing online. El rojo estimula la acción, representa agresividad, excitación y combinado con el gris, representa impulsividad. El azul, representa sensibilidad y lealtad. En un negocio online, sombras de color rojo, azul y marrón, representan seguridad. Mientras el blanco es siempre visto como profesional, pues es asociado con un sitio comercial. Es el color el que brinda la primera impresión.

Trabajando de la forma correcta la psicología del color, usted podrá rápida y fácilmente realizar un trabajo más profesional en sus diseños de paginas web. Tómese un tiempo y estudie o lea acerca del significado de los colores y de como estos afectan nuestra conciencia.

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

www.haciendowebs.com

Clase PHP para ver videos Youtube

Con esta clase en php podreis insertar en vuestras web videos embedidos de youtube y las capturas de imagenes que tienen:

class YouTube {

//recoge el id del video
function _GetVideoIdFromUrl($url) {
$parts = explode('?v=',$url);
if (count($parts) == 2) {
$tmp = explode('&',$parts[1]);
if (count($tmp)>1) {
return $tmp[0];
} else {
return $parts[1];
}
} else {
return $url;
}
}


// muestra el video embedido
function EmbedVideo($videoid,$width = 425,$height = 350) {
$videoid = $this->_GetVideoIdFromUrl($videoid);
return '';
}


//recoge la url de la imagen del video
function GetImg($videoid,$imgid = 1) {
$videoid = $this->_GetVideoIdFromUrl($videoid);
return "http://img.youtube.com/vi/$videoid/$imgid.jpg";
}

//muestra la imagen

function ShowImg($videoid,$imgid = 1,$alt = 'Captura de video') {
return "";
}

}

http://www.zonaprecios.com

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