Main menu

JUANJEORG

I would love to change the world, but they won’t give me the source code.

El twitter de @lagatasoka

Un día se me ocurrió hacerle una cuenta de twitter a mi gata ( @lagatasoka ) y este post de geekytheory me dio una idea.

El post trata de cómo con una raspberry detecta movimiento, hace una foto y la manda a twitter. Le hice que eso lo hiciera a una determinada hora, ya que no iba a tener luz todo el día en el cuarto. El resto de las horas podría dedicarse a hacer FAVs a gente que dijera unas palabras mágicas, esto la daría un poco a conocer.

El post original explica muy bien como hacerlo, así que os remito a él aquí y ahora os dejo el código que añadí y la configuración de @lagatasoka (En github aquí)

Continuar leyendo

Maquetación

Aquí algunos de los PSDs (o proyectos en Sketch) pasados a HTML5 y CCS3.

Professional Aurel Blue CV Resume Form

PSD to HTML5 and CSS3

VER PDS
DEMO

 

Notifi PSD Theme

PSD TO HTML5 AND CSS3

Description & details Notify is a modern PSD landing page template perfect to present your mobile app. The PSD file is fully layered and editable so you can easily change colors, fonts and styles. This resource has been created by Michael Reimer from Best Psd Freebies.

VER PSD
DEMO

Free PSD landing page

PSD to HTML5 y CSS3

A landing page concept that you can use to create a beautiful portfolio page. Free PSD designed by Evgenia Kornienko.

VER PSD
DEMO

Tradukoj HomePage

Propuesta para cambiar la página principal de la web. Diseño hecho con sketch y después maquetado.En el pull request se han metido las etiquetas twig que se precisaban.

DEMO
GitHub

 

ComingSoon

PSD pasado a HTML5 y CSS3.

It has a beautiful coming soon design from freebiesgallery.

VER PSD
DEMO

BoostSublime

Template simulado de Sublime Text. Se precisa de Genesis Framework. Meted los archivos en la carpeta themes/boostSublime

Demo no disponible.

Disponible dos screenshots en github

Elementos al 100% del ancho y alto de pantalla

Veamos como poner dos elementos, uno encima de otro y que ocupen cada uno el 100% de la pantalla.
Supongamos que tenemos esta estructura:

<body>
    <div id="contenedor">
        <div id="area1">
             <h1>Esta es la primera sección</h1>
        </div>
        <div id="area2">
             <h2>Esta es la segunda sección</h2>

        </div>
    </div>
</body>

Le diremos al html y al body que ocupe el 100% del alto. También quitaremos los márgenes y padding que pudiéramos tener.

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

Preparamos el contenedor en posición absoluta (el body tiene que estar en posición relativa) y le damos un top y un bottom de 0. La posición, el top y el bottom son los 3 elementos que hacen magia para tener el alto del 100%. Además añadimos el ancho del 100%.

#contenedor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

Ahora vamos a la áreas. Las ponemos en posición absoluta, con un alto y ancho del 100% ¿es lo que queremos, no? ;). El min-height se pone por si nos da problemas algún navegador.

#area1, #area2 {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

Y ahora lo que haremos es poner un área encima de otra. Para ello ponemos un área en el top, arriba del todo. ¿Cómo ponemos la segunda área a continuación? Si el area1 ocupa el 100% del alto, el area2 debemos ponerlo en ese punto, al top 100%, así una está a continuación de la otra.
Le ponemos unos bordes para que se vea claramente como queda.

#area1 {
    top: 0;
    border: 1px solid red;
}
#area2 {
    top: 100%;
    border: 1px solid blue;
}

Y eso es todo. Os dejo el enlace a la demo y al código.

Mi primera app

Hoy estoy contento. Ha aparecido en “Paterna al día”, un diario de paterna, una reseña a la aplicación que hice para interpenyes paterna. Aunque hay que reconocer que no es gran cosa, se podría decir que es la primera que sale con el calendario de las fiestas del pueblo. No he ganado un duro, ya lo sé, ni reconocimiento personal, también lo sé, pero sobre lo del dinero contaba con ello y lo segundo no lo busco.

app fiestas interpenyes paterna

FacebookTwitter