documento ejecutivo ReAl Invaders

ReAl invaders
Video juego de realidad aumentada con fines de incentivar el turismo interactivo de la ciudad de Manizales y sus sitios de importancia. Implementando tracking paralelo y mapeo por visión de computador utilizando Flash para dispositivos Android.

¿QUE ES?
Un aplicativo para dispositivos móviles enfocado al incentivo turístico de la ciudad de Manizales bajo parámetros de realidad aumentada sin marcadores, lenguaje de videojuego y adaptación a iconos de la ciudad.
El proyecto ReAl Invaders, fue elaborado durante una duración de dos semestres académicos, en los cuales fue soportado teóricamente y ejecutado en su producto, este último fue bastante complejo, debido a variables tecnológicas, las cuales fueron finalmente llevadas a buen término.

¿POR QUE?
Para el incentivo turístico de la ciudad de Manizales, manejando conceptos de interacción, inmersión y tecnologías en dispositivos móviles, como ventana hacia la realidad aumentada.
El proyecto que se ha realizado en el área de profundización digital se centra en una simbiosis generada entre el entorno físico y digital, reconociendo al primero como la constitución visual y fenoménica que afectara al objeto digital, dando como resultado una interacción de estos medios sin recurrir a la simulación del espacio físico. Siendo que este proyecto trata en cierta medida de eliminar la interfaz virtual y sacar el elemento digital de la consola y él ordenador para llevarlo al mundo real, la plataforma elegida para esto son los dispositivos móviles, versátiles en cuanto a su naturaleza liviana y compacta, también son los que a hoy poseen la tecnología que permite la relación entre lo físico y lo digital que se busca para este proyecto. Para la visualización y estructuración del aplicativo se recurre al video juego, ya que este se puede definir como una simulación de sucesos físicos, además, este permite flexibilidad en cuanto al manejo de la interacción y la interfaz mayor que otro tipo de aplicación o estructura interactiva.
El videojuego escogido fue “space invaders”, como un homenaje al clásico árcade diseñado por Toshihiro Nishikado de la empresa Taíto, logrando con esto la metáfora ideal para el proyecto, reflejada en los invasores espaciales, tomando el espacio, como el entorno de la ciudad de Manizales y más específicamente el de la torre del cable, y los invasores, como los personajes del videojuego, los cuales llegan a los sitios para recorrerlos, dando una visión al usuario de total inmersión y retroalimentación con los componentes mismos de la aplicación, su naturalidad de interacción y la información de la cual esta lo provee.
¿PARA QUE?
La principal necesidad a satisfacer fue la de proyectar el turismo de Manizales hacia ámbitos digitales, proporcionando en sus entornos turísticos interactividad, más allá de la que se obtiene con un plegable o con una página web, formando un lazo totalmente estrecho con los iconos de ciudad y generando recorridos visuales a través de su propia arquitectura.

PROBLEMAS
Un importante problema a resolver fue el tecnológico, pues dada la naturaleza del producto, y su sustentación teórica, hacían de su desarrollo algo complejo en el ámbito del diseño, los problemas principales fueron la visualización de realidad aumentada sin marcadores impresos, la arquitectura de la ciudad como marcador, interactividad de videojuego, y computación ubicua; lo anterior lleva a una conclusión preliminar de la necesidad de la adaptación de distintos programas y su compleja articulación para fin de crear un prototipo exitoso. En la exploración tecnológica se encontró una herramienta que se caracteriza por tener todos los elementos necesarios para cumplir los requerimientos técnicos sin llegar a la estructuración con diferente software. Dada la complejidad del programa desarrollado enteramente en lenguaje de programación C#, se opto por conseguir la asesoría de un ingeniero de sistemas, que cuenta con conocimiento más profundo en el tema, igualmente se contacto el desarrollador Robert Castle, para conocer más de esta herramienta, la respuesta recibida por este fue pronta; durante el proceso de estudio y exploración con apoyo constante del ingeniero, se determina que en las características de este software tan complejo y extenso, hay muchas cuestiones en cuanto a los niveles de interacción logrados con la realidad aumentada y adaptación a dispositivos por desarrollar.

¿COMO SE LOGRA?
Analizando los resultados durante el tiempo de proposición y ejecución, se logro lo siguiente: identificación de diferentes programas que trabajan con realidad aumentada bajo distintos parámetros, como geolocalización, por tracking de color, de forma, de bordes, de movimiento y mapeado por visión de computador. Escogiendo el más adecuado a la aplicación realizada, se considero finalmente un software desarrollado por Robert Castle en la universidad de Oxford, el PTAM1 (parallel tracking and mapping) ó mapeo y escaneo paralelo, que lleva a cabo escaneo de un espacio que se tenga enfocado a través de la cámara y tomando puntos de referencia para realizar un mapa virtual que consecuentemente es adoptado como escenario de proyección para la realidad aumentada. Dado que esta herramienta se acomoda perfectamente para desarrollo en dispositivos móviles de última generación y el desarrollo de videojuegos en esta plataforma. ____________________________
1 PTAM: http://www.robots.ox.ac.uk/~gk/PTAM/
CONCLUSIONES
Se obtuvo un análisis completo de lo que significa la realidad aumentada hoy en día, que parámetros de interacción y de inmersión se obtienen, al proponerse como un modo de presentar la información turística.
Se consiguió la eliminación de marcadores como principal aspecto de rompimiento en la interacción y como agente externo a los entornos de la ciudad.
Se reestructuro la arquitectura de un videojuego clásico, mostrando así el contraste entre realidad y virtualidad, redefiniendo los modos de interacción con entornos urbanos de una ciudad.
Se estudio conceptos de jugabilidad adheridos a parámetros de turismo, noción de inmersión en computación ubicua y diseño centrado en el jugador.
Se consiguió enriquecer los entornos ambientales de la ciudad, con elementos virtuales que sin duda potenciaran e impulsaran la disposición de información en dichos puntos con un alto grado de inmersión.
Se realizó un video prototipo del videojuego en su funcionalidad total, aplicado al turismo de Manizales.
Se creó una estrategia de diseño en cuanto a la promoción dentro de ámbitos turísticos en la ciudad.

ReAl invaders
Alejandra González
Santiago López

Universidad de caldas
Programa de Diseño Visual
Profundización en digital
2010 - 2011

interfaz ReAl invaders

menú principal

Misión completada

Misión escogida y parámetros para completarla

Instrucciones

Misión: mapa de Manizales y sitios turísticos 

Avance Mayo ::PTAM::

Las características de portabilidad y expansión que tiene PTAM, ya que está disponible para múltiples plataformas y no solo soluciona las limitaciones de la realidad aumentada “convencional”, la visualización de RA en un espacio sin necesitar de marcadores impresos o mapas predeterminados, sino también, edición de características espaciales y formales de la RA en tiempo real, el desarrollo de animación, uso de texturas, imágenes bidimensionales en función de menus, desarrollo de videojuegos y aplicativos en dispositivos móviles, como se muestra en la cantidad de ejemplos encontrados en internet. Dando al videojuego ReAl Invaders, la posibilidad de un desarrollo más fluido, permitiendo la atención en el problema del diseño.

En el proceso de acercamiento a la herramienta de tracking y mapeo para la visualización de realidad aumentada en espacios de trabajo pequeños o PTAM, donde se necesita de programación en lenguaje C. Dado que esta herramienta está desarrollada enteramente en código, se necesita un programa compilador que maneje este lenguaje, que permita la edición y visualización de la aplicación. Ya que este es un proceso de complejidad que necesita de recolección de información y aplicación de conocimientos avanzados de programación no solo en C++, sino también en java, se decide optar por una versión ya precomplidada de PTAM encontrada online, que ya cuenta con las librerías y dependencias instaladas y los archivos ejecutables de PTAM y el calibrador de la cámara soportado con librería de visión de computador openCV. 

Los pasos a realizar para correr PTAM son

• Teniendo de antemano el patrón de calibración (ajedrez) impreso, se ejecuta el calibrador de la cámara (ya compilado en un .exe), lo que hace es verificar que la configuración de la cámara y la visión de computadora funcionan correctamente. al apuntar la cámara al patrón lo que el programa hace es buscar esquinas cuadradas y enlazarlas, que se muestra en los cuadros azules que se muestran en la pantalla. se toman 4 o más fotos desde distintas posiciones, lo que permite un reconocimiento espacial más amplio y menor margen de error. Se presiona el botón optimizar para calcular los parámetros de la cámara, al ajustarse los cálculos del programa al patrón se guarda y se cierra el calibrador. 

• Al correr PTAM el tracker se activa cuando el usuario, presionando barra espaciadora una vez y trasladando la cámara (apuntando a un espacio preferiblemente plano), el programa dibuja las líneas bases de lo que consecuentemente será “aumentado”, se presiona barra espaciadora una vez mas, se crea un mapa que es la línea base donde se ubica la realidad aumentada.

• Ya para mostrar la RA se presiona el botón Draw AR. La realidad aumentada aparece únicamente donde se realizo el mapeo.

Los modelados deben estar alojados una librería de XML, por lo que se debe subir el modelado a internet. 

Esta versión de PTAM es aún básica para las necesidades del proyecto, observando la complejidad y extensión de la herramienta en su totalidad, esta versión precompilada no tiene características para un desarrollo de interacción amplio, mas que la visualización de RA estática. También la cuestión de reconocimiento de formas predeterminadas (los sitios turísticos de Manizales), uno de los objetivos del proyecto, no está definido entre los ejemplos vistos, lo que se precisa como otro elemento a considerar en el desarrollo con esta herramienta.

Primer ensayo con demo para ReAl invaders

En la exploración del programa de mapeo y tracking paralelo para espacios de realidad aumentada pequeños o PTAM, se han encontrado versiones del programa precompilados que pueden funcionar a un nivel básico. Se está buscando como adaptar demos preexistentes de PTAM a lo que se necesita para el proyecto.

ReAl Invaders con PTAMM para la creacion del demo en PTAMM para Windows se ha modelado los personajes principales en la exención correspondiente .3DS

invader padre

ReAl invader hijo

animacion de destruccion de un ReAl invader

Para la instalación de PTAM o PTAMM para Windows se necesitan instaladas unas dependencias


BLAS
Sub-programas básicos de algebra lineal es una interfaz de programación de aplicaciones estándar para publicar librerías que realicen operaciones de algebra lineal como vectores y multiplicación de matrices.


LAPACK
Paquete de algebra lineal es una librería para algebra lineal numérica. Construcción y ubicación de elementos tridimensionales manteniendo sus proporciones


POSIX Threads,
O pthreads, es un estándar para secuencias de instrucciones independiente o procedimiento que funcionan relativamente de forma independiente al resto del programa


GLEW
Librería para permitir mecanismos eficientes de rendimiento para determinar que extenciones de librerías de gráficos o openGL


1394camera645
Permite rendimiento y velocidad de obtención de imágenes en una cámara web


JPEG
Método estándar de compresión de imágenes en gris y a todo color. Este está destinado a imágenes de “mundo real”


LibPNG
Librería para leer o crear imágenes en formato PNG


Zlib
Librería de compresión de datos orientada a imágenes libpng


TooN
Tom's Object-oriented numerics library o librería numérica orientada a objetos de Tom. Se encarga de de manejar de forma eficiente gran cantidad de pequeños vectores, también matrices y grandes vectores.


LibCVD
Librería de alto rendimiento para visión por computador y procesamiento de imagen y video.


Gvars3
Librería de sistema de configuración proyecto subsidiario para libCVD


LIB3DS
Librería para administrar archivos de 3-D Studio “.3DS”


Características al utilizar PTAMM


Para que funcione el traqueo se debe calibrar la cámara con un patrón de cuadrados en ajedrez desde varias vistas.
Para tracking de espacios el usuario debe apuntar la cámara a un espacio plano y trasladar la cámara hacia distintas vistas de ese punto.
La cámara debe ser wide-angle para permitir mejor rendimiento en la captura de las imágenes, también se debe desaturar o desenfocar la imagen de la cámara porque hay objetos en el entorno que pueden generar ruido.

portafolio santiago lopez cañon http://santiagolopezdv.com

LAS LEYES DE LA SIMPLICIDAD aplicadas al portafolio.
John Maeda.

Las leyes de la simplicidad de John Maeda reflejan una ruta a seguir en cuanto al diseño se refiere, estas rutas o pasos, no están estrictamente diseñados para seguirlos a la perfección, pero si para tomarlos como un referente de una buena composición de elementos en el plano de la interfaz; el plano como todo en la naturaleza es medible, así como también los elementos inmersos en su interior, estos determinan pesos los cuales hacen de una interfaz simple o no, dicha reducción se aplico al portafolio de manera ideal, quitando elementos que no transmitían información vital para el desenvolvimiento del usuario, y que solo significaban ornamentación dentro del plano.


La organización también es parte fundamental del portafolio, pues muestra de una manera jerárquica todos los elementos, permitiendo que el usuario encuentre lo que mas le interesa, y haciendo sencilla para su lectura los componentes de la misma; este portafolio presenta un ahorro de tiempo identificado en los no mas de cuatro niveles que posee, haciéndolo muy simple en cuestión de permanencia del usuario en la interfaz.


El dinamismo del portafolio esta determinado por sus formas y tipografía, las cuales estarán establecidas por animaciones en cada una de las interacciones.


Dada la importancia del contexto para diseñar el portafolio se pudo analizar que este como puerta de entrada hacia la vida laboral de una persona, necesitaba una clara lectura del mensaje a comunicar, dicho mensaje esta proporcionado por la misma naturaleza de los productos mostrados en el y su pregnancia en el usuario mas que su propio fondo, por esto la simplicidad del mismo.


La emoción que se quiere dar es mediante el perfecto manejo de la forma, la tipografía y el color, pues son estos en ultimas los que permiten al usuario juzgar mediante su interacción la simpleza del mismo y la facilidad en llegar a su objetivo.


El fracaso fue un factor fundamental, el ensayo y el error como sus componentes, demostraron que los elementos dispuestos en el plano pueden ser o no pertinentes, y sacando emociones de lado se puede llegar a una propuesta gráficamente y conceptualmente mucho mejor.

wikispace ReAl Invaders

¡AQUI! puedes encontrar todo lo referente al proyecto ReAl Invaders, cronograma, actividades 2010, 2011, pdf, informacion, desarrollo tecnologico y mucho mas!  WIKISPACE                                           REAL  INVADERS

http://real-invaders.wikispaces.com/

Diseño de interfaz para ReAl Invaders

diseño de interfaz, de icono y de personajes para ReAl invaders, se presenta bajo parametros de pantalla de una tablet con android 2.0. 1024 * 600px.

diseño de icono de aplicación

icono dentro de pantalla de inicio del dispositivo

menú principal ReAl invaders

instrucciones de manejo del juego.

misión ReAl Invaders

mapa ciudad de manizales, con principales sitios turísticos(sitios de juego, ReAl invaders)

interfaz del juego, compuesto por un shoot, una mira de disparo y los ReAl invaders.

con cada disparo, se crea una nube de texto, donde se encuentra información del punto turístico en especifico.

::::RA con reconocimiento de forma::::

Usando M&Ms como marcadores, se sobreponen cubos 3D en los chocolates. SHAPE TRAKING

personajes y mapa de navegacion de ReAl Invaders

El videojuego ha tenido modificaciones en cuanto a funciones e interactividad con el espacio se refiere y su fin, que se desarrolla para promover el turismo en la ciudad.


Con esto se han esquematizado las rutas, los personajes y las reglas de ReAl Invaders, para mayor entendimiento de la lógica del juego.

Procesos a seguir en proyecto ReAl Invaders

Adquisición de Smartphone o en su defecto tablet con las siguientes especificaciones.

*Android 2.0 o superiores
*Giroscopio

-Indagar sobre tecnología Wikitude, TUIO y openCV
-antecedentes locales de uso de videojuego DarkGreenMedia
-Esquematización de personajes
-diseño de interfaz
-Guión y mapa de navegación de videojuego
-Reconocimiento de los iconos emblemáticos de la ciudad y recorridos.

Ejemplo api wikitude para realidad aumentada.

Augmented Reality Using The Wikitude API

View more presentations from jgilfelt

Una API de realidad aumentada para Android

Cada día son más las aplicaciones que hacen uso de la nueva tecnología de realidad aumentada.

Esta tecnología, que consiste en combinar elementos virtuales sobre una visión real del entorno físico, parece que ha llegado para quedarse y probablemente, dentro un plazo corto de tiempo, será algo más que habitual verla integrada en multitud de aplicaciones.

Las compañías tecnológicas conocen bien sus posibilidades y ya podemos ver ejemplos comoGoogle Googgles o Nokia Point & Find.

Su implantación en los dispositivos móviles se está viendo acelerada por la rápida evolución de estos ya que la presencia de una cámara, un GPS y una brújula en combinación con una conexión de datos permite crear aplicaciones bastantes completas.

Si nos queremos lanzar a crear nuestra propia aplicación de realidad aumentada en Android hemos de saber que no tenemos porque empezar desde cero. La empresa austriaca Mobilizy ha creado una API que, junto con su ya conocida aplicación Wikitude, nos permite desarrollar aplicaciones de realidad aumentada para nuestro terminal.

Vamos a ver cómo dar los primeros pasos para crear nuestra aplicación de realidad aumentada en Android. Para el ejemplo se utilizará el entorno de desarrollo Eclipse.

Tomado de:http://www.paradigmatecnologico.com/una-api-de-realidad-aumentada-para-android/

Proyecto ReAl invaders 2011

http://real-invaders.wikispaces.com/Avance+2011

Wikitude

http://www.wikitude.org/en/developers

API para el desarrollo de ReAl invaders Manizales.

proyecto de profundizacion, 2011

CRONOGRAMA. REUNION SEMANAL.

En la reunión semanal, que se tiene para analizar y recopilar información, entre el grupo de trabajo, compuesto por dos estudiantes de diseño visual y un estudiante de ingeniería de sistemas, se presenta  bajo los elementos tecnológicos múltiples variables a resolver.

La primera variable tiene que ver con el aspecto tecnológico, el cual está siendo desarrollado mediante wikitude, que permite desarrollar aplicaciones en realidad aumentada basada en sus mismos componentes o api.

La segunda variable, es un problema que surge por la primera, puesto que la "api" de wikitude, no funciona en ordenadores comunes, y no es posible generar un simulador en ellos, lo cual era un punto necesario para realizar pruebas, dado este problema, se sugirió por parte del estudiante de ingeniería, realizar el desarrollo directamente en el dispositivo móvil; el cual debe tener las siguientes Características como mínimo:

Sistema operativo.

-android 2.0

-giroscopio

-plan de datos

 + Otros aspectos que se mencionaran luego.

Solucionados estos aspectos, la próxima reunión, tendrá como tema la coordinación, de los elementos tecnológicos, con los aspectos involucrados en el diseño.

Avances 2011 ReAl invaders Manizales. proyecto de profundizacion

En la semana 3 se comenzó con la etapa de contacto con un ingeniero para comenzar con el desarrollo de la aplicación, para esto se mando un correo electrónico a una empresa de diseño en Manizales “ZOPP Agency” donde se hablo con un ingeniero y se concertó una reunión con él para la misma semana, se resolvieron muchas inquietudes en cuanto al desarrollo y programación de la RA, lo cual, ayudo a direccionar el proyecto y a como se podría desarrollar el prototipo. Se trataron temas como los API (interfaz de programación de aplicaciones) que pueden resultar útiles, también programas de código abierto de RA en dispositivos móviles que se pueden modificar para el aplicativo sin necesidad de desarrollar uno desde cero y que soporta todo tipo de lenguaje.

En la semana 4 se hizo el contacto con un programador de la universidad de caldas que estaba interesado en ayudar al proyecto. También se ha discutido sobre el préstamo de un Iphone, lo que cambiaría un poco el desarrollo del prototipo. Hasta el momento todo ha ido de acuerdo al cronograma, ya en la semana 5 los integrantes del proyecto se reunirán para discutir y empezar el proceso de diseño de la interfaz.

En la semana 5 se concreto la forma de juego, como sería el recorrido, reglas de juego, los lugares sonde se harán los recorridos y se esbozo la interfaz. Reunión programada para la semana 6 con el ingeniero que desarrollara el proyecto.

En la semana 6 se dio a cabo la reunión con el ingeniero, donde quedaron claros los siguientes puntos en cuanto a la tecnología que se decidió utilizar con la información dada por el ingeniero de ZOPP Agency en la semana 3.

1. La tecnología de GPS es incipiente en Colombia, ya que se actualiza con una periodicidad larga.

2. La tecnología WIKITUDE también es incipiente en el país, con factores que impiden su utilización.

3. La realidad aumentada utilizada en gráficos 3d no puede ser utilizada, debido a problemas con el software requerido.

4. las primeras pruebas del prototipo deben realizarse en un simulador ya que es donde se cuadran las especificaciones y tamaño del aplicativo y de ahí pasar al dispositivo.

En la semana 7 se hará otra reunión para definir cuando se harán las pruebas del prototipo y que se necesita. Aun se está buscando un dispositivo móvil con Mac OS o Android OS.

debido a los inconvenientes que se presentaron en la universidad de caldas el cronograma del proyecto a cambiado para acomodarce al nuevo periodo academico.

Mi portafolio, por Santiago Lopez Diseño Visual.

//////////portafolio digital///////////

www.santiagolopezdv.com

Guía Breve de CSS

¿Que es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Para que sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

¿Como funciona?

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red(rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Las tres formas más conocidas de dar estilo a un documento son las siguientes:

• Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.

·         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

·         <html>

·           <head>

·             <title>Título</title>

·             <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />

·           </head>

·           <body>

·           .

·           .

·           .

·           .

·           </body>

·         </html>

• Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.

·         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

·         <html>

·           <head>

·             <title>hoja de estilo interna</title>

·             <style type="text/css">

·           

·               body {

·                 padding-left: 11em;

·                 font-family: Georgia, "Times New Roman", serif;

·                 color: red;

·                 background-color: #d8da3d;

·               }

·             

·               h1 {

·                 font-family: Helvetica, Geneva, Arial, sans-serif;

·               }

·             

·             </style>

·           </head>

·           <body>

·             <h1>Aquí se aplicará el estilo de letra para el Título</h1>

·           </body>

·         </html>

• Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.

Algunas normas básicas a la hora de crear una CSS son las siguientes:

• En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:

·         h1, h2, h3 {

·           color: red;

·         }

o lo que es lo mismo

h1 {color: red;}

h2 {color: red;}

h3 {color: red;}

• La propiedad, que en este caso sería color, especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el color. Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.

p {text-align:center;color:red}

Normalmente se describe una propiedad por línea, de la siguiente manera:

h1 {

  padding-left: 11em;

  font-family: Georgia, "Times New Roman",Times, serif;

  color: red;

  background-color: #d8da3d;

}

• El valor, representado a la derecha de los dos puntos (:), establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.

p {font-family: "sans serif";}

FUENTE: http://www.w3c.es/divulgacion/guiasbreves/hojasestilo

ejemplos, links y mas revisar fuente