No puedo recordar exactamente cuando se atravesó en mi camino el framework Phaser para desarrollo de videojuegos, aunque me ha llamado la atención no lo avía probado y he aquí el primer acercamiento confitado con unas cuantas cosas más.

1. Centrado vertical y horizontal de un elemento con CSS.

2. Escalado adaptativo, del elemento al tamaño de la ventana que lo contiene.

3. Maximisar al tamaño de la pantalla una ventana emergente.

4. ‎cargar una imagen con el framework Phaser.

Centrado vertical y horizontal de un elemento con CSS.

Concretamente necesitamos dos contendores (< div >) el "padre" el cual determina lo necesario para heredar las características al "hijo".

En el caso del ejemplo el "padre" es el de la pagina.

html, body { margin: 0px; background-color: #656565; width: 100%; height: 100%; display: flex; /* esta propiedad es la que proporciona la magia*/ align-items: center; /* alineacion vertical */ justify-content: center; /* alineacion horizontal */ }

y definimos las características del "hijo".

#videojuego{ width: 320px; height: 192px; }


display: flex es una propiedad que nos permite el diseño de una estructura flexible de disposición receptiva. ¿quieres conocer mas? puedes verlo en este articulo de w3school.

Css JS localhost Phaser Programacion

17:04

Reproducir localmente un proyecto que se este realizando nos ayuda a verificar como se comportara en la web, hay varios métodos para realizarlo.

Con la Terminal linea de comandos.

Podemos hacerlo con el comando  " python -m SimpleHTTPServer; " aunque es un método un tanto tedioso ya que primero que nada se debe "navegar" con el comando " cd  " (uso OSX ) hasta la carpeta donde tenemos los proyectos o la mas próxima. Una ves aplicado el comando. Ejecutamos el navegador de nuestra preferencia y en tramos a la siguiente dirección "http://127.0.0.1:8000/"

Si nos localizamos en la carpeta de origen de nuestro proyecto y contamos con el clásico index.html ,se mostrara la pagina

Aplicación de Google Chrome.

"Web server for Chrome" es una aplicación de este navegador, que simplemente nos facilita todo lo anterior con un muy cómodo entorno gráfico donde  seleccionamos la carpeta de origen y nos devuelve la ruta a colocar en la barra del navegador.

Para ejecutar las aplicaciones de google chrome  puede ser un tanto rebuscado, pero para ello existe un my buen complemento "Apps Launcher" que  la igual que la otras extensiones de google agrega junto a la barra de la dirección un icono compuesto por nueve cuadros, que al presionarlo nos muestra las aplicaciones del que hemos descargado.

localhost Programacion

15:52

Tuve la idea de crear un nuevo blog para cargar el nuevo contenido pero para que tener dos blogs que o actualizo mejor todo en uno.

Creo que la mejor manera de reafirmar cualquier conocimiento es tratando de explicarle a otra persona.

No domino los temas que mencionó pero es un gran ejercicio el tratar de explicar como "Resolví" ciertas necesidades que han surgido en mi trabajo como diseñador: web, e-learning, gráfico y "lo que se ofrezca en cuanto a Diseño". 

Así que me he visto en la necesidad de llevar acabo ciertas soluciones, implementaciones, Frankensteins y de más adefesios antinaturales. 

A sí que a manera de compendio quiero explicarlos en este blog para ayudar a que los usuarios de la web puedan generar sus propias soluciones  así como tantos otros con sus entradas me han ayudado a crear mis "homúnculos".

Si al leer cualquier entrada conoces un método mejor al que les que presento, te agradecería de sobre manera que lo expongas para compartirlo.

Programacion

15:48