Aprender diseño web. Animacion Web.
Diseño Grafico. Macromedia Flash Dreamweaver Fireworks .Front Page Photoshop
Colores CSS por palabra clave y Colores del Sistema
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
- Palabras clave
- Colores del sistema
- Hexadecimal RGB
- numérico RGB
- Porcentual RGB .
Esquinas Redondas con 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
CSS: Unidades de Medida
- Absolutas
- Relativas
UNIDADES RELATIVAS
em
: relativa al tamaño de letra usado. Si bien no es exacto el valor 1 seria el ancho de la letraM
mayuscula del tipo de fuente que se esta usando
-
ex
: relativa a la altura de la letrax
minuscula tipo defuente que se use -
px
: El pixel, una de las mas comunes que es relativa a la pantalla
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 son2.54
centímetros -
cm
,: centímetros -
mm
: milímetros -
pt
: puntos donde 1 punto vale a1 pulgada/72
, aproximadamente0.35
milímetros -
pc
: picas donde 1 pica vale a12
puntos, aproximadamente unos4.23
milímetros
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 {Luego a cada elemento .menu li a, le realizamos un diseño especial
list-style:none; //No hay viñetas
margin:0; //No hay Margen
padding:0; No hay padding (Distancia entre el contenido y el borde)
}
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
Simplemente se coloca el nombre y entre llaves la propiedad y el valor o los conjuntos de propiedad valor sin son varios
h1 {Los selectores se pueden separar por comas y unificar diferentes etiquetas
margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}
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
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
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
2) SELECTOR DE ETIQUETA: Se aplica a cualquier etiqueta HTML
(p, h1,table, tr,li....)
Por ejemplo
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
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
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
- Incluir CSS en el mismo documento HTML
- Definir CSS en un archivo externo
- CSS en los elementos HTML
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:
- Cuando existen un número pequeño de estilos
- Cuando se incluyen estilos específicos en un determinado documento HTML
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
- Se puede incluir el mismo archivo CSS en muchas paginas HTML estableciendo un estilo homogeneo al todo el sitio web
- 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
no dejes de visitas
http://wellstyled.com/tools/colorscheme2/index-en.html
Que es CSS?
CSS separa los contenidos y su presentación
Ventajas:
- Obliga a crear documentos HTML/XHTML bien definidos y con significado completo
- Mejora la accesibilidad del documento
- Reduce la complejidad de su mantenimiento
- 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
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