Aprendiendo HTML, CSS y JavaScript

HTML: (Clase 1)
- Breve repaso de HTML.
- Estructura de un documento HTML.
- Formateado de texto.
- Links.
- Imagenes.
- Tablas.
- Formularios.

CSS: (Clases 2 y 3)
- Introduccion a CSS.
Proposito. Elementos y atributos. Sintaxis. Palabras reservadas. Propiedades. Etiquetas LINK y STYLE. Comentarios.
Mecanismos de colaboracion HTML-CSS: Propiedades STYLE, ID y CLASS. Etiquetas LINK y STYLE. Selectores: Sintaxis. Tipos de selectores: De atributos, de clase y de ID. Archivos CSS externos.
- Propiedades de texto:
- Colores, fondos y bordes:
- Propiedades de posicionamiento y visibilidad:


JAVASCRIPT: (Clases 4 y 5)
- Rudimentos del lenguaje.
- Mecanismos de colaboracion HTML-JavaScript:
- Etiqueta SCRIPT: Insercion en la pagina. Seleccion del lenguaje y de la version. Uso de archivos externos.
- Escritura de instrucciones, para la regulacion de eventos.
- Instrucciones: Propositos. Secuenciacion.
- Literales: Numeros. Textos. Booleanos.
- Salidas por pantalla: Ventana alert. Metodo document.write.
- Variables: Declaracion. Asignacion de valores.
- Entrada de datos: Ventanas prompt y confirm.
- Operadores y expresiones.
- Estructuras de decision y de repeticion: if. switch. for. while.
- Funciones internas

El Club de Programadores- Asociacion Civil, invita a participar del curso 'Aprendiendo HTML, CSS y JavaScript' que se dictara los dias Miercoles de 18.30 a 21.30 hs. a partir del 28 de Octubre de 2009, en Auditorio Congreso, Entre Rios 166

Modelo de CAJA en CSS

Contenidos: Es lo que esta adrento de un elementoa HTML
Padding: Lo que esta entre el contenido y el borde tambien llamado relleno
Borde:Lo que rodea al contenido y al relleno.
Margen: lo que separa esta caja de las caja adyacentes.

El padding y el margen son transparentes

Herencia en el Modelo de Caja

10 CSS Tips de un profesional Front-End Architect : Segunda Entrega

6. Use la regla @import para organizar tus CSS.

No sólo la regla de importación @ ahorrarle de un efecto indeseado de la herencia con navegadores, como IE4, IE5 y MAC Netscape 4 (algunos todavía existen!) Es más fácil de mantener. Puesto que usted cuidadosamente organizado su documento que no se avergüenza de su estilo-de marcas.

7. La organización ayuda a su CSS con los futuros de mantenimiento del sitio.

Comience con un maestro de hojas de estilo. Dentro de esta hoja de estilo importar sus reset.css, global.css, flash.css (si es necesario) y structure.css y, en ocasiones, una tipografía de hojas de estilo.

Aquí está un ejemplo de un "maestro" de hojas de estilo y la forma en que está incrustado en el documento:

* @ Import url ( "reset.css");
* @ Import url ( "global.css");
* @ Import url ( "flash.css");
* @ Import url ( "structure.css");

Uno de los aspectos de diseño web que ofende a los diseñadores es la falta de tipografías que se consideran seguras para su uso. Si bien es cierto que sólo hay un puñado de fuentes web seguras, tenemos a nuestra disposición muchas que pueden llegar a ser muy poderosas. Por sobre esto, el código CSS nos ofrece algo llamado cascada de familias tipográficas(font stack).

Las cascadas de familias tipográficas te dan libertad.

Quieres utilizar Gill Sans?, úsala entonces. La cascadas de familias tipográficas son listas de prioridades tipográficas, que son definidas en el atributo “font-family” del CSS, el cual proporciona la información para que el navegador busque dentro de las opciones que les damos y que además estén instaladas en el sistema. Esto significa que puedes utilizar Gill Sans, y si los usuarios no la tienen, puedes darles la opción de un sustituto adecuado que no opacará su experiencia de uso. Como Richard Rutter ya ha ilustrado, hay toda una gama de tipografías que pueden ser utilizadas para servir las necesidades de diseño.

Lamentablemente no se está utilizando este atributo a toda su capacida, tanto en prácticas comunes de diseño web o en tecnologías asociadas al desarrollo de sitios. Hay una clara desconsideración en el proceso de creación de estas cascadas. Por ejemplo, Dreamweaver nos entrega estas opciones:

• Arial, Helvetica, sans-serif
• Courier New, Courier, monospace
• Times New Roman, Times, serif
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

Como pueden ver no hay muchas posibilidades y las tipos sustitutas no son las más adecuadas. Este es un ejemplo de cómo la carencia de normas tipográficas en la web están dando lugar a una toma de decisiones que encaminan hacia un mal diseño. Para que vamos a especular en cuanto a quién es el culpable de que la tipografía en la web deje mucho que desear, ya que hay tantos culpables como infracciones. Diré, no obstante, que las cascadas de familias tipográficas son, en definitiva, factores de diseño y deberían ser analizadas como tal.

Todo queda en la familia

Cuando se crea una cascada tipográfica, en primer lugar hay que considerar el contexto del texto. ¿Elegiremos una tipografía para título, sub-título, párrafos ó textos extensos? Estas posibilidades determinarán el orden que debemos seguir. Sabemos que ciertas tipos funcionan mejor para títulos y encabezados y otras para textos extensos. Por ejemplo, Helvetica trabaja bien en pantalla cuando el texto esta en tamaños grandes, mientras que Helvetica Neue, debido a que es un poco más ancha, se lee mejor en tamaños más pequeños en pantalla. Arial también se ve mejor que Helvetica en tamaños pequeños. Por lo tanto, la cascada tipográfica para Helvetica puede ser diferente dependiendo de si se utiliza para textos extensos o títulos de página.

Teniendo en cuenta el contexto, hay un par de cosas más que considerar cuando creamos la cascada. En primer lugar, seleccionar la tipo ideal. Desde ahí, el camino que debemos seguir siempre será en función del contexto.

En el proximo post hablaremos mas sobre la tipografia de los titulos, los párrafos, y la estructura general de un correcto uso del CSS.

Pseudoclases Enlaces

El standar de las hoojas de estilo CSS definen cuatro llamadas pseudo-clases para aplicar estilos avanzados en los enlaces de una pagina
Las pseudo-clases aplican diferentes estilos a un mismo enlace en función de su estado:

link: enlace no visitado.
visited: enlace visitados
hover: enlace en el que se pasa el puntero del ratón por encima
active: enlace activo

Colores CSS RGB Decimal y RGB Porcentual

El modelo de colores RGB es un modelo donde se especifica la cantidad de Rojo (red), verdr (green( y azul (Blue) que tendra.
En CSS cuando se quiere especificar un color RGB en Hexadecimal se puede ver en el POST anterior pero si queremos el RGB decimal debemos anteponerle la palabra "rgb"

Por ejemplo:

h1 { color: rgb(71, 98, 176); }

RGB Porcentual

El formato es similar solo que se indica el porcentaje de cada color

Por ejemplo
h1 { color: rgb(27%, 38%, 69%); }

Al igual que sucede con el RGB decimal, si se indica un valor inferior a 0%, se transforma automáticamente en 0% y si se indica un valor superior a 100%, se trunca su valor a 100%.

Colores RGB Hexadecimal

3) Colores CSS Hexadecimal RGB

Es la forma mas comunmente usado. Se define con numeral (#) y los tres valores de RGB (Red Green Blue) en formato Hexadecimal
El negro es #000000 y blanco es #FFFFFF

El formato RGB permite comprimir. Por ejemplo el color lime #00FF00 se puede escribir #0F0

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;
}