ya que me acordé de la contraseña….
Webkit Transforms
14 Sep
Hola, hoy veremos lo que se puede hacer con las propiedades de CSS3 y los navegadores webkit (Safari y Chrome), así que para poder ver el efecto deben hacerlo desde uno de éstos navegadores.
Markup.
Esto va a ser muy simple, sólo necesitaremos una sección y listo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Webkit transforms</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="example">
<h1>Hover over me!</h1>
</section>
</body>
</html>
El CSS no es nada complejo:
/*Webkit transforms*/
*{margin: 0; padding: 0;}
body {background: #f6f6f6; font-family: 'Lucida Grande', sans-serif;}
#example {margin: 50px auto; width: 800px; height: 200px; background: #FFFFEA; border: 1px solid #F5E082;
-moz-border-radius: 10px; -webkit-border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px #a6a6a6;
-webkit-transform: rotateZ(0deg);
-webkit-transition: -webkit-transform 1s ease-in-out;}
#example:hover {-webkit-transform: rotateZ(-5deg);}
#example h1 {color: #FFF; -webkit-text-fill-color: #ffffa9; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #F5E082;
text-align: center; margin-top: 80px;}
En este ejemplo utilizamos varias propiedades de CSS3, la primera es el «box-shadow», que nos permite dar una ligera sombra a nuestro elemento <section>, como el drop shadow de photoshop, en esta propiedad definimos las distancias a la que estará la sombra del objeto (horizontal offset/vertical offset) y el blur de la sombra, al final ponemos el color de la misma.
La transformación que vamos a aplicar va a ser que nuestro elemento rote un poco sobre el eje Z, primero definimos el estado inicial con -webkit-transform: rotateZ(0deg); lo que deja el <section> como está, también definimos cómo va a ser la transición con: -webkit-transition: -webkit-transform 1s ease-in-out; (la transición va a durar 1 segundo).
Para hacer el efecto sólo tenemos que poner un estado :hover al <section> con el estado final de la transformación:
-webkit-transform: rotateZ(-5deg)
y listo!
Pueden ver el ejemplo aquí
letras estilo apple tv
8 Sep
Este es el efecto que trataré de igualar en Photoshop, si lo hacen de otro modo que de resultados más parecidos a esta imagen por favor compártanlo!
Bien, hay que empezar con un nuevo documento en photoshop, el mío es de 850 x 350 px (no necesita ser tan grande…), puse la característica manzana y un texto con la fuente Myriad Pro (Semibold) que es la que usa Apple.
Si se fijan en la imagen de apple tv hay dos degradados, el más obscuro lo voy a hacer con un gradient overlay, también usaré bevel&emboss para logar el efecto del borde.
La gradiente va de #949494 a #000000
Debe de quedar algo así:
Ahora, para agregar el otro degradado hice un trazado con la herramienta pluma, en una nueva capa hice una selección con ese trazado y lo llené con una gradiente lineal que va de #686868 a #FFFFFF
Hay que duplicar la capa que llenamos con el degradado, ya que esté el duplicado seleccionamos la original y en la paleta de capas hacemos cmd+click (o ctrl+click en PC) sobre el «thumbnail» (la imagen pequeña) de la capa de la manzana para que quede la selección de la manzanita sobre la capa del degradado.
Ahora invertimos la selección (cmd+shift+i) y borramos (del) para que nos quede algo así:
Repetimos lo mismo para las letras, para que nos quede así:
El toque final es cambiar el «Blending mode» de las capas con gradiente, lo ponemos en «Hard Light» y listo!
Bueno…tal vez no quedó taaan parecido pero se acerca.
Moving On.
No me he olvidado del tutorial de HTML y CSS, pero estoy viendo la mejor forma de hacerlo.
Hasta entonces…
PHOTOSHOP is just a tool…
2 Sep
Hola, ésta vez quise hacer algo en Photoshop, tomé una frase de una carta de Magic que me gusta mucho y la adapté para este trabajo.
Esto es lo que vamos a crear:
Sólo son algunos efectos de capa y mucho azul photoshopezco.
Primero creamos un archivo de 400 x 400 px, en el fondo vamos a crear una gradiente radial de un azul claro a blanco
Hacemos el degradado y nos debe quedar algo así: (el borde gris en realidad es el fondo del photoshop :P)
Ya tenemos el fondo, ahora a trabajar los textos, yo usé la fuente League Gothic. Pueden acomodarlo como quieran, traté de que los textos formaran un cuadrado tomando en cuenta que añadiré la manita y la pluma después.
Aquí ya le puse color a las frases que no llevarán ningún otro efecto, «JUST A» es de color #3e95e0 y las demás son de color #6bb8f8.
De hecho el efecto aplicado a todos los textos, con excepción de «TOOL» y «LIFE» es el mismo. Tomamos la palabra «PHOTOSHOP» y abrimos los estilos de capa (LAYER>LAYER STYLE, o el ícono fx que está en la parte inferior izquierda de la paleta de capas)
Hay que poner los siguientes valores:
Si se fijan «HAND» tiene un degradado un poco más obscuro, ésto para resaltarla un poco.
Ahora vamos por la palabra «LIFE», hacemos el mismo efecto que en las demás aunque el degradado del gradient overlay irá de #1D5F9D a #82C6FF, luego añadimos el efecto de bevel y emboss, igual, para dar realce a la palabra:
Ya casi acabamos, sólo falta la palabra «TOOL»
Quise darle a «TOOL» el efecto del texto PS que está en el ícono del Photoshop CS4
Seleccionamos la capa y aplicamos éstos estilos:
Tenemos ya todo listo, sólo falta añadir la herramienta pluma y la manita, los acomodamos en el espacio que dejamos antes.
Añadimos una sombra a las dos imagenes y terminamos!
Moving On:
Espero que les haya gustado este sencillo tutorial, la próxima semana estará listo el tuto de cómo hacer una página web, de hecho es un trabajo que tengo que hacer para un cliente!
Hasta entonces…
Diseño Web #2: Empezando con CSS
30 AgoBienvenidos al segundo capítulo de la serie!
Esta vez no hay mal chiste, CSS (para los que se lo preguntan desde el capítulo anterior) significa Cascade Style Sheet y es lo que nos ayuda a diseñar nuestras páginas web, a ponerlas bonitas pues.
Pensemos en el html como una lata de ponga-aquí-su-refresco-preferido, el CSS sería la impresión sobre la lata, el color, la tipografía, el acomodo de elementos, todo lo que tenga que ver con el estilo visual.
En el html trabajamos con etiquetas que le dicen al navegador como interpretar el contenido dentro de ellas, en CSS trabajaremos con las mismas etiquetas que definimos pero acá les daremos estilo, de hecho podemos utilizar CSS dentro del html veamos un ejemplo:
Y ¡taraaaan! se volvió rojo.
Usar CSS inline o dentro del HTML no es una opción muy práctica, imagínense si tuvieramos 100 elementos h1 dentro de nuestra página y si, en vez de rojo queremos que el color sea azul, ¡tendríamos que cambiarlos uno por uno! algo nada eficiente, en cambio con una hoja de estilos CSS ese cambio nos tomaría segundos.
Un archivo de CSS también es un archivo de texto, sólo que éste lo guardaremos con extensión .css (en su editor pueden poner Archivo nuevo > CSS)
Como dije antes, en el CSS vamos a trabajar con las etiquetas que usamos en nuestro código HTML, primero vamos a enlazar nuestro archivo CSS con el HTML, dentro de la etiqueta <head> ponemos <link rel=»stylesheet» type=»text/css» href=»style.css»/> (nuestro archivo CSS se llama style.css), link es una etiqueta «self closing» lo que quiere decir que no se cierra como las que vimos anteriormente, noten que la diagonal de cerrado está dentro de la misma etiqueta de apertura.
Ya que tenemos enlazados los archivos, en nuestro style.css vamos a poner el estilo de nuestra etiqueta <h1>
La sintaxis del CSS no es muy difícil, hay que poner primero la etiqueta a la que nos referimos, después entre llaves ({ }) los estilos que tendrá, en este caso color, seguido de dos puntos y el valor que queramos, en este caso «red», al final de cada instrucción hay que poner un punto y coma.
El resultado es el mismo!, si queremos cambiar el color sólo debemos editar esa línea de código.
Automáticamente cambia el color al verlo en el navegador
Podemos modificar también el fondo de nuestra página al darle estilo a la etiqueta <body>:
DIV Y EL MODELO DE CAJA
La forma actual de hacer diseño web está basada en el modelo por cajas que utiliza la etiqueta <div> que puede ser representada como una caja o un contenedor, dentro de ésta caja podemos meter varios elementos y hasta otras cajas (divs).
ID’s y Clases
Creamos un div que contiene nuestros encabezados y el párrafo, éste div cuenta con un atributo id, como se podrán imaginar id es un identificador único, esto quiere decir que sólo este div puede llamarse «pagewrap» (le podemos poner cualquier nombre aunque es mejor utilizar nombres semánticos, es decir que vayan de acuerdo a la función del contenedor), existe otro atributo que podemos asignar: las clases (class), una clase se puede utilizar cuantas veces se desee en una página.
Los atributos id y class nos son exclusivos de los div, se pueden usar con cualquier etiqueta html.
ESTILO DEL DIV
Para utilizar una etiqueta que posee un id o una clase la sintaxis es:
#pagewrap {}
Se debe poner en el caso de los id’s el signo de número (#) antecediendo al nombre, si se trata de una clase hay que poner un punto:
.pagewrap {}
Ahora vamos a dar estilo a nuestro div:
Vamos a ver qué significa cada cosa:
background: #eee; El color de fondo, cuando trabajamos con color en css es mejor ponerlo en formato hexadecimal.
width: 500px; El ancho de nuestro div será de 500 pixeles.
margin: 0 auto; Los márgenes del div, 0 corresponde a los valores de arriba y abajo mientras que auto se refiere a la izquierda y derecha, ésta combinación permite centrar los divs con respecto a sus contenedores. Si el div es una caja, el margen hay que interpretarlo como el espacio que existe entre cajas.
padding: 10 px; El padding es un «colchón» o espacio que existe entre los elementos interiores de la caja y el borde de ésta; imaginémoslo como los páneles de unicel que protegen a nuestros aparatos cuando vienen dentro de sus cajas. Algo importante es que el padding se suma al ancho y alto de la caja, por lo que, si declaramos que nuestro div midiera 500px de ancho hay que sumar el padding para obtener el ancho total del div que será de 520px (10px a la derecha y 10px a la izquierda.).
Moving On
Hemos visto la sintaxis y funcionamiento básico del CSS, creo que, para profundizar más tendré que hacer más práctica esta serie, así que haremos una página web desde cero 🙂
Si desean saber más acerca de HTML y CSS les recomiendo que visiten éstos sitios:
Gracias por leer
Diseño Web #1: HTML básico.
30 AgoHace unos días me preguntó un amigo que dónde podía aprender HTML, que le recomendara un libro o algo así, la verdad yo nunca he tocado un sólo libro de HTML, todo lo que he aprendido sobre él lo he leído en la red; así que se me ocurrió hacer una serie de posts sobre éste lenguaje y también de su amigo inseparable el CSS, en ellos se basa el diseño web como lo conocemos hoy en día.
Empecemos por el HTML
HTML significa Hasta Tu Mamá lo Lee…Ok, mal chiste…en verdad quiere decir HyperText Markup Language y fue inventado por un tal Tim Berners-Lee (no más el que hizo, entre otras cosas, la internet.)
Éste es el lenguaje que debes aprender si quieres empezar a hacer sitios en la red.
Un archivo de HTML es puro texto, si, puro y llano texto sin más, no como un documento de word si no más simple, como el que haces en el bloc de notas por ejemplo —¿entonces puedo hacer una página web en el bloc de notas?— Si, si puedes, aunque existen varios editores que te harán la vida más fácil, se trata de hacer páginas web, no de ser un mártir del código.
Kit de supervivencia del Diseñador Web
Para ésta serie de posts vamos a necesitar:
- Un editor de texto (Bloc de notas [sólo mártires del código] / Adobe Dreamweaver CS algo / CODA / Text Mate / Notepad++)
- Un navegador DECENTE (Firefox, Safari, Chrome)
- Las infaltables ganas de aprender (si faltan pues mmm…)
- Paciencia.
Yo uso CODA 🙂
Bien, hora de empezar!
Como les decía anteriormente un archivo de HTML está formado por texto, en nuestro editor vamos a poner algo así:
Hola a todos!
Guardamos el archivo como index.html y lo probamos en nuestro navegador preferido (ir al menú ARCHIVO>ABRIR>index.html) y nos debe aparecer algo como ésto:
Fácil ¿no?, pero eso no es html, sólo es texto, lo que distingue al mentado lenguaje son las etiquetas (tags), que podemos entenderlas como formas de representar el contenido.
A nuestro Hola a todos! vamos a encerrarlo en una etiqueta html:
<h1>Hola a todos</h1>
Guardamos el archivo (cmd+s) y en el navegador le damos refresh y debemos obtener algo así:
¿Notan la diferencia? lo que hicimos fue decirle al navegador que interpretara nuestro Hola a todos! como un texto de encabezado o header mediante la etiqueta <h1>, piensen en cómo se estructura la información en un periódico, nuestro h1 sería la noticia más importante de la primera plana, que siempre viene en letras grandes y negritas, también existen otros encabezados más pequeños (<h2>), subtítulos (<h3>) y párrafos (<p>). Hay que notar que nuestro texto quedó en una especie de sandwich entre etiquetas: <h1>Hola a todos</h1>, en html siempre hay que abrir y cerrar las etiquetas que estemos usando, el no hacerlo llevará a resultados no deseados, las etiquetas de apertura son así: <h1> y las de cierre así: </h1>, si se fijan las de cierre llevan una diagonal antes del nombre de la etiqueta, lo que le dice al navegador que ahí termina, por lo tanto ¡nunca olviden cerrar!.
Hagamos un ejemplo con los headers y un párrafo:
No olviden guardar el archivo para que a la hora de dar refresh (perdón pero eso de refrescar….) en el navegador podamos ver los cambios.
Si se fijan bien cada etiqueta tiene su valor predeterminado en tamaño de fuente, siendo <h1> la más grande y <p> la de menor tamaño. Pero…¿qué son esos símbolos extraños?… desgraciadamente para todos los que no escribimos en inglés hay ciertos inconvenientes al introducir caracteres especiales (léase acentos y eñes) ésto se arregla de dos formas, una la veremos más adelante u otra es usar las entidades de HTML, que le dirán al navegador que se trata de un caracter especial para que lo interprete correctamente.
Trataremos con más detalle ésto en otro capítulo de la serie.
Ya sabemos que es una etiqueta, ahora vamos con algo más complejo, la estructura de un documento HTML:
Lo primero que debemos poner es el DOCTYPE o tipo de documento para que los navegadores sepan de qué se trata, si no se especifica pueden ocurrir resultados extraños en la interpretación de los navegadores, después hay que poner la etiqueta <html>, todo lo que pongamos dentro de ella será tratado como html, sigue el <head> o cabeza/encabezado, que contiene datos importantes para el navegador, como el título de la página, enlaces a hojas de estilos y archivos javascript, meta tags, entre otras cosas, por último tenemos la etiqueta <body> que se interpreta como el cuerpo del contenido, digamos que <body> es un contenedor de todo lo que va a ir en nuestra página.
Fíjense en el texto de la pestaña
Si ven sólo cambió el título de la pestaña en el navegador según lo que pusimos dentro de la etiqueta <title>.
Hypertext
Esta es una parte fundamental del HTML, la capacidad de hacer click en un enlace que nos lleve a otra página éso es el hypertexto. Estamos muy acostumbrados a hacer click acá y click allá, ¿cómo se logra que al hacerlo naveguemos a otra página?
La encargada de eso es la etiqueta <a>
Mmm…no cambió mucho ¿verdad?, es porque no hemos definido hacia dónde nos llevará ese link, vayamos a nuestro editor para crear la página de destino a la que llamaré otra.html, ahora para hacer que el enlace funcione debemos agregar el atributo href a la etiqueta <a>:
Ahora si notaremos un cambio a la hora de ver la página en el navegador:
El texto azul y subrayado nos dice que se trata de un enlace donde podemos hacer click y nos llevará a otra página. Prueben a ver si funciona!
Listo!, hemos hecho funcionar el link.
Moving On:
Espero haber explicado claramente qué es y cómo funciona el HTML, en el siguiente capítulo vamos a ver la interacción con el CSS y más etiquetas que nos ayudarán diseñar y estructurar nuestras páginas web.
Hasta entonces…
Monster Dash :: iPhone App Review
26 AgoTenía un buen rato que no me metía a la iTunes Store, pero en un tiempecito pude entrar y vi una app que me llamó la atención por su imagen (aparte de que estaba en las featured apps, jeje) su nombre es Monster Dash, cuesta 10 pesos y la bajé…
Realmente es un juego muy adictivo!, la historia pone:
EL TIEMPO SE ACABA.
En un mundo donde los monstruos están por doquier y no hay trasporte público un hombre está corriendo…
Ese hombre es Barry Steakfries.
Armado sólamente con armas de alto calibre, Barry debe hacerse camino entre masas de mounstruos sorprendentemente lindos.
Controlamos a Barry a través de 4 niveles distintos donde tendremos como oponentes a vampiros, zombies, momias y demonios, es un juego run&shot y nuestro personaje empezará su camino lentamente e irá acelerando conforme avanzamos en el juego, además de tener que matar/brincar sobre los monstruos debemos sortear precipicios y picos que se atraviesan en nuestro camino.
Empezamos con 3 corazones y una escopeta, cada vez que nos acerquemos demasiado a un mounstruo o caigamos sobre los picos se nos restará un corazón, pero podemos encontrar más corazones a lo largo de nuestro camino para reponernos; la escopeta tiene municiones infinitas y también podemos hallar diferentes armas (cuya munición si es finita 😦 ) como la Submachine gun (una ametralladora UZI), the Pacifier (un pistolón estilo magnum), el Mr. Zappy (un lanza rayos) y la Machinegun Jetpack (una ametralladora que nos hace volar un poco y de paso mata a los mounstritos)
Cuando Barry muere (por golpes de mounstruo, caida desafortunada en los picos o caída en el precipicio) nos dirá una frase (al menos para mí) muy graciosa, un buen detalle de éste juego, también hay ciertos logros que desbloquear dependiendo del número de moustruos eliminados o de la distancia recorrida.
También tiene habilitado el Open Feint, que permite ver logros, posiciones de otros jugadores y lanzar retos a tus amigos.
Por el momento sigo enganchado con éste juego tratando de superar los 5500 metros, una muy buena, bonita y barata app.
Server errors
23 Ago
Hace algunos días tuve la idea de hacer una guía de errores de servidor (o http status codes) usando HTML y CSS, además quería probar un efecto de «div hover».
Pueden ver el ejemplo terminado aquí.
El asunto del div hover era hacer que todo un div cambiara de estado al poner el ratón sobre él, así fue como lo hice:
Server Errors
<!DOCTYPE HTML>
<html lang=»es»>
<head>
<meta http-equiv=»X-UA-Compatible» content=»IE=8;chrome=1″ >
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width; initial-scale=1.0; maximum-scale=1.0;» >
<title>Server Errors</title>
<link type=»text/css» rel=»stylesheet» media=»screen» href=»style.css» >
<script type=»text/javascript» src=»http://use.typekit.com/zkv6poa.js»></script>
<script type=»text/javascript»>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id=»wrapper»>
<div><h1>*SERVER ERRORS*</h1></div>
<div>
<a href=»#»>
<h2>ERROR <span>204</span>: <span>NO CONTENT</span></h2>
<div>The server successfully processed the request, <span>but is not returning any content.</span></div>
</a>
</div>
<div>
<a href=»#»>
<h2>ERROR <span>301</span>: <span>MOVED PERMANENTLY</span></h2>
<div>This and all future requests should be directed to the given URI</div>
</a>
</div>
<div>
<a href=»#»>
<h2>ERROR <span>400</span>: <span>BAD REQUEST</span></h2>
<div>The request cannot be fulfilled <span>due to bad syntax.</span></div>
</a>
</div>
Si ven hago un div contenedor (error), luego el link para que tengamos el hover y luego otro div que tiene la explicación del error.
Lo interesante es lo que pasa con el h2 cuando hacemos hover, la magia ocurre en el css:
* {margin: 0; padding: 0;}
body {background-color: #f6f6f6; font-size: 62.5%;}
#wrapper {width: 960px; margin: 0 auto;}
.title {padding: 5px; margin-top: 10px; background-color: #d1e9ff; border: 2px solid #9fd1ff; -moz-border-radius: 10px;
-webkit-border-radius: 10px;}
.title h1 {font-size: 13em; color: #1e92ff; text-align: center; text-shadow: 0 1px 0 #fff;}
.error {margin: 0 auto; margin-top: 10px; font-size: 5em; background-color: #fdfdfd; border: 2px solid #eee; -moz-border-radius: 10px;
-webkit-border-radius: 10px; overflow: hidden; height: 85px; text-align: center;}
.error h2 {color: #333; text-shadow: 0 1px 0 #fff;}
.error a {text-decoration: none; display: block;}
.error a:hover h2 {margin-top: -95px;}
.error div {background: none; height: 85px; position: relative; padding: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.explain {color: #000; text-shadow: 0 1px 0 #fff; font-size: 0.7em; text-transform: uppercase;}
.bad {color: #ff1e00;}
.good {color: #1e92ff;}
.error a:hover h2 {margin-top: -95px;} esconde el h2 lo que permite que se vea el div que contiene la explicación del error, es una técnica muy ingeniosa, de fondo para el hover se puede poner cualquier cosa. La fuente utilizada en este ejemplo es League Gothic vía typekit, que es extremadamente fácil de usar.
Espero que ésto le sirva para algún proyecto.
Técnica de reemplazo de imágenes con css
19 EneDigamos que quieres cambiar lo que escribiste en un h1 ( o cualquier elemento que lleve texto) por una imagen donde las letras se ven mas bonitas o algo así, bueno, con CSS hay varias formas de lograrlo, una de ellas es recorrer el texto hasta donde no se vea, por ejemplo:
#title h1 {text-indent: -9999px;}
pero yo creo que la mejor es ésta:
#title h1 {display: none;}
ya que sólo esconde nuestro elemento a reemplazar .
Ustedes cuál usan?
Demo*Diseño y Desarrollo 