A pasado tiempo pero lo prometido es deuda asi que continuaremos con la creacion de este fabuloso tutorial. Recuerden el objetivo es crear un juego web que sea persistente.
Asi que manos a la obra. Hoy dia veremos como podemos usar las populares Hojas de Estilo en el Desarrollo del juego. Crearemos una interfaz basica para logearse a la pagina web y le pondremos algunas cosas vistosas para que realmente el juego se vea de clase A1+1..
El Objetivo de Hoy
Pues vamos a aprender de que trata las hojas de estilo en cascada, A.K.A CSS. El CSS nos servira a la larga para hacer mucho mas vistoso nuestro juego pero como buen saltamontes que son, vamos a ir poco a poco. Paciencia muchachos.Entrandole al CSS
Las hojas de estilo o CSS, son archivos o codigo que permiten poner colores, tamaños y formas a casi todas los elementos de nuestras paginas web. No teman, tiene su sencillez este tema.Manos a la obra. Se acuerdan la pagina index.php que creamos en nuestro anterior tutorial?, bueno antes de tocar el CSS haremos una sencilla interfaz de logeo con puro HTML y despues le pondremos un mucho de swing (hold out nazis grammars) con CSS.
Primer Paso: Crear nuestro Login en HTML
Como conversamos en el anterior tutorial armaremos la estructura de la pagina con HTML. Para crear un Login usaremos los tags form e input que son casi por defecto la forma mas facil de crear formularios. No se preocupen aun por el funcionamiento, lo pondremos primero bonito y en el siguiente tutorial crearemos la parte funcional.Primero añadiremos el siguiente codigo a nuestro index.php. Primero borra todo lo que haya dentro de nuestros tags body y coloca dentro de los mismos el siguiente codigo:
Insectoides
Battle Insectos de Batalla Redundandes
- Inicio
- Registrate
- Imagenes
- Quien soy
Muy bien, ya tenemos una estructura simple de html, lo siguiente que haremos sera ahora si, usar CSS para maquillar esto.
Segundo Paso: Añadir y Probar nuestro CSS
Hay 3 formas de colocar CSS:- Archivos Externos: La forma ideal para proyectos grandes, el codigo CSS esta en archivos externos fuera de nuestro HTML.
- Cabecera de la pagina: Esta era la forma preferida hace como 10 años.Ahora no le encuentro mucho sentido asi que .. DONT!.
- Dentro de cada tag: Asi es podemos colocar CSS en cada tag de HTML, tiene su utilidad para ciertos casos (como por ejemplo usar un javascript para cambiarle el color de fondo a algo que hayas hecho click, mas de eso en nuestro siguiente post), pero no aconsejo usarlo manualmente.
- Dentro de nuestra carpeta CSS (recuerda, orden sobre todo) crea un archivo que se llame index.css. Este archivo contendra todo nuestro codigo basico de CSS
- Ingresa el siguiente codigo en el archivo:
body{ background:black; color:white; }
Este codigo basicamente indica que nuestro tag body se tenga de fondo el color negro y que las letras sean de color blanco. - Entra a tu archivo index.php y coloca lo siguiente debajo de tu tag title dentro de la cabecera:
- Excelente ahora maravillemonos con el resultado:
Tercer Paso: Selector ID
En nuestro primer CSS hemos cambiado los fondos al elemento body. En cualquier pagina html bien escrita , solo existe un tag body, pero que pasaria si queremos seleccionar solo un elemento de la pagina web que se repita, digamos un div en lugar de todos? Para eso existe en HTML lo que se conoce como ID. Fijense bien en el div que contiene a nuestro formulario, tiene un parametro llamado id con el valor de loginFormWrapper., aqui una imagen de lo que digo:
Pues bien, que les parece si le ponemos un color tierra de fondo? Entremos a nuestro archivo index.css y debajo de tu codigo coloca lo siguiente:
#loginFormWrapper{
background:#845942;
color:white;
}
Notas el # en el codigo antes de loginFormWrapper? Con ese #, estamos indicando que ponga el css entre llaves a cualquier elemento que tenga el ID loginFormWrapper. Actualicemos nuestra pagina y veamos el resultado:
Algo sobre colores en CSS
Los colores en CSS se pueden escribir en ingles ( como black, white, brown, yellow) o usar codigo RGB. Este codigo significa Red, Green, Blue y son valores hexadecimales, osea que van desde el 0 al 9 y de ahi sigue el A, B,C,D,E, F. Son 6 cifras, las primeras 2 son para el rojo, las siguientes cifras son para el verde y las siguientes cifras son para el azul.No se si se acuerden de teoria de colores, pero bueno en la teoria, valga la redundancia, el negro es la ausencia de colores, por lo que su valor en RGB es #000000, y el blanco es la combinacion de todos los colores, por lo que su valor en RGB es #FFFFFF. Si queremos sacar un rojo puro usariamos #FF0000, y asi uno puede mezclar sus colores como por ejemplo el amarillo que es la mezca de rojo con verde seria #FFFF00, podriamos sacar naranja usando un verde menos fuerte como #FFAA00. He actualizado mi tutorial 3 con las herramientas a usar con un programa muy util para estos temas de colores llamado ColorZilla, excelente plugin de Firefox.Tienen que instalarlo si o si y chekar la seccion del tutorial al respecto.
Y bueno, que es un selector en CSS?
J@der que emocion!. Hemos aprendido entonces a colocar CSS a un solo elemento mediante su ID. Ahora presta atencion a lo que te voy a decir, todo elemento HTML bien escrito puede tener un ID unico, es decir que no se va a repetir en todo tu HTML. Por supuesto puedes escribir codigo con id que se repitan pero no te compliques la vida, para eso existe otro parametro que te voy a contar al rato.Muy bien, ahora hemos visto que podemos cambiar el fondo de cualquier cosa por su tag (body) o por su ID. A este tipo de selección se llama Selectores en CSS, ya que nos permite seleccionar con que elementos de la pagina trabajaremos. Nos falta un selector mas, el mitico selector llamado clase.
Cuarto: Selectores de Clase
Ok digamos que estamos contento con este tipo de selector, pero quiero hacer que ciertos divs tengan caracteristicas iguales. Podriamos ponerle a cada div un id y repetir el codigo o podemos usar lo que se llama clases. Para eso escribamos primero un poco mas de HTML ;)Esta es mi columna 1Esta es mi columna 2Esta es mi supercolumna 3
Copien ese codigo en tu archivo index.html y coloquenlo antes del cierre de su tag body, como muestra la imagen:
Graba tu archivo y entra a index.css, preparte para el show con este codigo:
.columna{
background:#C67927;
width: 200px;
margin:10px;
}
Buena voz, graba tu archivo css de nuevo ( si estas usando netbeans presiona CTRL+S, y salvate el trabajo de ir hasta el menu). Veamos el resultado:
¿Te fijaste en el . (el punto) que pusimos antes de la palabra columna en nuestro CSS? Pues ese punto indica que cualquier elemento que tenga el parametro class con el nombre columna tendra los estilos que colocamos dentro de las llaves { }, en este caso un background medio naranja, un width (ancho) de 200 pixeles y un margen de 10 pixeles. No te preocupes entraremos a ver estas caracteristicas en un proximo tutorial.
¿Que tal un combo de ID con Class?
Muy bien, y que pasaria si desearamos que el objeto con clase columna pero que tenga un id llamado supercolumna tenga un fondo diferente? Bueno se puede hacer coloquemos el siguiente codigo:#supercolumna.columna{
background:green;
}
Actualicemos la pagina y veamos el resultado:
Verdeyeah!, ahora sabemos como usar el combo ID + Clase
Finalizamos la clase Yehhh!
Ok repasando la clase hemos visto 3 selectores que son los mas importantes- Por tags como body o html
- Por ID usando el indicador #
- Por Clase usando el indicador .
- ID sirve para indicar UN solo elemento dentro de toda tu pagina
- class sirve para señalar a varios elementos dentro de tu pagina
Espero que les haya gusta el tutorial. No te olvides de dejar comentarios y sugerencias, son la inspiracion que me hace continuar con los tutos. Hasta pronto :).
El poderoso Dreamweaver con la configuracion necesaria para la refectorizacion
¿Te gusta la pagina?, socializame haciendole click a tu color preferido: