Como van muchachos, en la anterior entrada conversamos acerca del posicionamiento con Floats. Me toca mostrarles un truco mas para que puedan continuar por sus propias manos.

Nos quedamos aquí haciendo el menú.

Estilizando el Menú Principal

Lo primero es decirle a nuestros tags li que se comporten . Quitaremos los redondos al lado de cada li y lo pondremos en linea, usando nuestro popular display:float

Añade este CSS al final de tu archivo index.css. Con el haremos que nuestros tags li osea nuestros items del menu, aparezcan de izquierda a derecha en lugar de arriba a abajo, que tengan un tamaño de fuente potente, le quitaremos los redondos que aparecen por defecto a cada tag li, y pondremos algunos paddings para que se vea bonito.

Pero que Dioses que somos

Ok pusimos el CSS y nos vamos acercando a nuestro objetivo, solo nos falta ponerle el bloque de fondo y añadir un par de margin y padding para separar bonito nuestro contenido. Poniendo el siguiente estilo:

Y actualizamos la pagina y....


No pasa absolutamente nada!. ¿Pero que caraxos? se preguntaran mientras ven homicidamente la pantalla de su computadora, si hemos puesto un estilo a nuestro ul que contiene a todos nuestros li, este no se pinta, ni siquiera el fondo que le pusimos!. Porque los dioses conspiran contra nuestras ganas de desarrollar juegos?

Con ustedes el hack de clearfix

Ahora si, CTRL + F5 y veamos a este hack corriendo:


Hermoso!. ¿Ahora ven lo necesario de aplicar este hack? Creanme les sacara de muchos apuros cuando este maquetando.

Estilo Border Radius

Los que hayan chekado con detenimiento notaran que las esquinas de nuestro ul aparecen redondeadas. Esto es gracias al estilo  border-radius, que como su nombre lo indica le da un borde redondo a cada una de las esquinas de nuestro contenedor. ¿Sabias que puedes darle un redondeo diferente a cada una de las esquinas? Solo necesitas especificarlas una por una. Aqui un esquema:

Desde arriba a la izquierda, vas en el sentido de las agujas del reloj.

Añadiendo la Fuente

Y donen muchachos, nunca cae mal una donación :D

La carnecita por así decirlo esta en el archivo stylesheet.css. Copiate todos los archivos que estoy seleccionando en verde a la carpeta css de tu proyecto, estos son los archivos necesarios para que funcione. Despues renombra stylesheet.css como font.css


Y no nos olvidemos de añadir este nuevo archivo CSS a nuestro index.php, ponlo antes de definir nuestro index.css

Después de toda esta agotadora jornada, al fin podemos indicar donde queremos que se muestre esta fuente. Para eso abre font.css y añade este estilo de #mainMenuWrapper:

Ahora si, CTRL+F5 y veamos que tal esta quedando!


No hay duda, los estoy volviendo Tigres en Desarrollo Web, dense otro abrazo porque conocer el manejo de los floats y el añadir fuentes a una pagina web, es un level bien pro en diseño de paginas webs.

Y así es como se maqueta una Pagina Web

A partir de ahora creo que ya tienen los conocimientos básicos como para que puedan continuar por ustedes mismos. Por supuesto no duden en comentarme sobre sus dudas que tendrán, háganme caso esto es solo el comienzo, aunque uno muy auspicioso. Espero se hayan divertido tanto como yo.

En nuestros siguientes tutoriales vamos a ver ya temas de programación en servidor y cliente y también entrar al tema del manejo de base de datos. Traten con sus conocimientos actuales de terminar nuestra interfaz:

En los dos ultimos episodios por asi decirlo, creamos un div que iba a contener a todos los demas divs y asi atarlos en las tinieblas, al mejor estilo del señor de los añillos, y tambien le colocamos un fondo bonito, hell yeah.

Hora de mas lecciones de maquetacion de HTML5 para crear nuestro superjuego!.

Nociones Básicas para maquetar en HTML5

Ahora normalmente los display block son colocados de arriba a abajo. Un item a la vez.

Sin Float

Osea normalmente no podemos colocar un tag con display:block al lado de otro, a menos que usemos el magico estilo float.

Con Float

Creando la estructura del Header con HTML

Bueno rompiendo un poco con la onda de los tutoriales, y para justificar en algo mi injustificada desaparición del blog, quería hablar un poco sobre la experiencia de estar en un GameJam en mi ciudad, Arequipa:

Fue el primer GameJam que hacemos en Arequipa. Logramos traer a 28 Hobbistas en el desarrollo de juegos, desde programadores hasta diseñadores, y entusiastas, que al final aprendieron a programar a la fuerza y en la madrugada :D.

Fueron 2 días que estuvimos entre mañana, tardes y madrugadas diseñando, dibujando y programando lo mas que podíamos. En nuestro caso, como organizadores del evento recién nos dimos tiempo de armar nuestra idea en la primera madrugada, y vaya que salieron las ideas

Porque lo pusimos en ingles? No tengo idea!

Pero lo importante son los 8 proyectos que sacamos los cuales te invito a visitar en la pagina del GameJam

El de nosotros se llama Blind, un Survival en 2D que lo puedes jugar online (en firefox de preferencia, escuche que con chrome se comporta raro) gracias a la magia del Construct2!!!.

Y para terminar, pues fácil saldrá otro GameJam el próximo año y sobretodo dejenme animarlos a que organicen uno en su ciudad. Se los recomiendo totalmente.

Holas holas castañolas, como diria Flanders, a quien quiero crucificar de tan solo escucharlo, upss lapsus mental, bueno continuamos con el tutorial, esta ves trabajaremos la maquetación de la pagina web, mi objetivo es que conozcan de que va el HTML y el CSS para que vayan preparandose para lo bueno.

Pero primero una ligera novedad, vamos a hacer unos cambios a nuestro diseño inicial. Con ustedes la nueva interfaz que vamos a desarrollar:

El antes y después, pueden lanzar la primera piedra, pero creo que esta mejor y mas directo

El Fondo, donde esta toda la magia

Y así obtenemos una imagen que nos servirá como base para el fondo de tu pagina web

Ahora tenemos que trabajar con los bordes de esa imagen para que al repetirla a su lado calce correctamente como mosaicos:

Otra nueva entrega del tutorial para crear tu juego web persistente, Retomemos lo que aprendimos en los ultimos capitulos. En el  capitulo 5 aprendiendo un poco de HTML con CSS,  en los siguientes capitulos, el capitulo 6 y capitulo 7 aprendimos como hacer el diseño de nuestras interfaces (en caso por supuesto de no tener un diseñador).

Ahora combinaremos estos conocimientos para crear la pagina inicial de nuestra web, también conocido como EL Front. Esta fase nos servirá entonces como traducir tus diseños a una pagina web, con todo y manejo de tu servidor Wamp.

Algunos puntos Previos

Para esta ocasión, prendan de nuevo su wamp y activen su netbeans con los archivos creados hasta el capitulo 5. Por supuesto nos servira bastante la imagen de insectoides que hemos desarrollado entre el capitulo 6 y 7. Ah no tienes los archivos anteriores? No os preocupeis estoy creando un repositorio en GitHub para manejar los branches, de paso aprendo a manejar GIT. Así que ya sabes, bajalo de ahi. Por si las dudas voy a crear un nuevo branch por cada Nuevo Capitulo. Si quieres empezar de cero usa el branch Episodio6, si quieres ver terminado lo que hayamos avanzado en este tutorial usa el branch Episodio8

Empecemos la Maquetación

Lo primero que aconsejo es tener una idea de donde poner los contenidos. Generalmente y una buena tendencia en desarrollo web en general, es mantener el contenido centrado y damos la impresión de que la pagina abarca toda la pantalla mediante el uso de un fondo continuo.



Un tamaño interesante a usar para el contenido son 960 pixeles de ancho. Salvo que queramos hacer una pagina web responsiva, nos atendremos a este tamaño que nos servirá perfectamente para nuestros maquiavelicos planes.

Manos a la obra. Lo primero es crear la estructura inicial que nos permitirá tener ese contenido centrado. Usaremos una técnica ancestral para centrar un div principal. Lo primero sera añadir un DIV de id wrapper que mantenga todo nuestro contenido, osea abre tu archivo index.php que creamos y reemplazalo con este codigo:
Y aumentamos lo siguiente en nuestra hoja de estilos index.css

Listo prueba el centrado, te debería de quedar una cosa así:


La explicación sencilla es que text-align:center de nuestro body hace que todo el contenido se centre, esto no influiría normalmente en un DIV, porque no es texto, pero si le ponemos margin:0 auto y  width:960px esto funciona de maravilla!.

Por supuesto hay una explicación larga y tiene que ver con que los divs vienen por defecto con un display:block (no les afecta el text-align por defecto), mientras que otros tags que son de texto como el span usan el display:inline, no hemos visto nada de esto aun en nuestro código pero te recomiendo que leas sobre los display modes y tambien sobre el modelo de cajas en CSS

Muy bien aunque tenemos un largo camino por andar dejare este post aqui para que vayan haciendo sus pininos, si quieren encontrar el codigo completo de lo que hemos estado avanzando, entren a mi github y descarguen los avances :D