En el primer Tips de Diseño de la semana vemos como colocar una imagen dentro de una forma en Photoshop, Illustrator, Indesign, Animate (o Flash) y en HTML. Podemos ver que cada una de las aplicaciones que ocupamos hace esta labor de una forma diferente. Recuerda que estaré subiendo videos frecuentemente de tips específicos de diseño, así que si tienes algo que quisieras saber no dudes en preguntarlo por aquí o por los otros medios. youtube.com/jorgellanten facebook.com/wwwj2.cl twitter.com/jorgellanten jorgellantenb@gmail.com o en la sección de contacto de este sitio.
Continuar leyendoManual básico para el no entendido en el asunto del desarrollo y diseño web.
Desde el sitio BrandWarm no encontramos con este interesante manual para comenzar a diseñar sitios web si no eres entendido en el tema, con los siguientes temas: 1) Planificación. 2) Estudia bien como usar los elementos disponibles y cómo es su compatibilidad en distintos browsers. 3) La gráfica a ocupar y el peso de ella. 4) Recursos y FrameWork 5) programas y app’s que ocuparemos. 6) Haciendo nuestros primeros Wire Frames. y no olvides a ver la segunda parte en donde te explican el funcionamiento del HTML y CSS. Ir a BrandWarm con el artículo completo.
Continuar leyendoExtract PSD en Brackets 1.0
Por fin tenemos una versión oficial de la aplicación para el editor de código gratuito Brackets. Y la gran novedad es la implementación de la extensión Extract PSD en donde podemos ver un archivo PSD con todas sus capas y copiar de forma rápida sus características al estilo CSS de cualquier página web. Pero eso no es todo, por que te permite utilizar rápidamente las imágenes utilizadas en tu PSD y guardarlas en la carpeta y formato que quieras. Para los que no conocen esta aplicación y necesitan trabajar archivos HTML, CSS o JS les recomiendo darle un vistazo por que puedes ver de inmediato los cambios y cada vez que seleccionas… Leer más
Continuar leyendoWeb con HTML5+CSS partiendo de un Photoshop
Video grabado en una de mis clases en donde explico como comenzar a trabajar una web a partir de un documento de Photoshop utilizando HTML5+CSS.Se puede complementar lo visto con los siguientes vídeos: Menú con HTML y CSShttp://youtu.be/yB36v1gBZsA Ejemplo de página básica con HTML y CSShttp://youtu.be/VuZwD1z_5r4 CSS básico (BOX)http://youtu.be/WBnvIbknWl4 HTML Básico: Textoshttp://youtu.be/1UEX7W_DJBg Como utilizar otras fuentes tipográficas en CSShttp://youtu.be/Av7piOMQURA Tutorial: Galeria con Sprite CSS y Ligthboxhttp://youtu.be/-BQwRQvSa0A
Continuar leyendoTutorial: Galeria con Sprite CSS y Ligthbox
Video tutorial de HTML y CSS en donde se realiza una galería intercambiando las imágenes miniaturas con Sprite en CSS y agregando LigthBox para mostrar la imagen en grande. [youtube https://www.youtube.com/watch?v=-BQwRQvSa0A]
Continuar leyendoTutorial: Menú con HTML y CSS
Después de mucho tiempo por fin puedo realizar un nuevo video tutorial en donde explico a realizar un menú con opciones desplegables (o submenú) partiendo de una lista. Si sabes algo de CSS podrás personalizar este menú para tus diseños. [youtube https://www.youtube.com/watch?v=yB36v1gBZsA] Si sigues leyendo podrás ver el código utilizado.
Continuar leyendoAprende a crear un sitio web profesional con Codecademy
Gracias a Bitelia conocemos a Codecademy, que es una plataforma de educación gratuita en línea que ofrece cursos de programación en lenguajes como JavaScript, PHP, Python y Ruby; y de lenguajes de marcado como HTML y CSS. Su popularidad se ha multiplicado a partir de su fundación en 2011 y se ha mantenido. Más de 24 millones de personas han tomado sus cursos y hoy en día sigue siendo de las mejores opciones para aquellos que quieren aprender a programar por su cuenta.
Continuar leyendoObtén el código CSS de tus diseños con Proyecto Parfait de Adobe
Proyecto Parfait es un proyecto beta de Adobe que le permite extraer todo lo que necesita de sus PSD en tu navegador. Por ahora dice funcionar sólo funciona con Chrome, pero yo lo probé en mi mac y funcionó también en Safari y Firefox, pero se ofrece soporte para todos los navegadores modernos muy pronto. La idea aquí es subir tu archivo PSD para encontrarte con ventanas de styles, layers y assets. Podrás extraer colores, degradados y la información de la fuente tipográfica de tu PSD, copiar texto y CSS, obtener mediciones precisas entre los elementos y guardar imágenes optimizadas para la web. Estas mismas opciones ya las tienen las… Leer más
Continuar leyendoTransformaciones, transiciones y animaciones CSS3.
En este tutorial traido desde creativasfera vamos a ver las transformaciones de CSS3, así como las transiciones y animaciones de CSS3. Las transformaciones de CSS3 permiten modificar la visualización de los elementos de una página web tanto en 2D como en 3D. Con las transiciones de CSS3 podemos crear exactamente esto, un efecto de transición, de los elementos en la pantalla. Con las animaciones de CSS3 podemos crear muchos efectos con movimiento sin necesidad de JavaScript, uso de frameworks o de la librería jQuery, de aquí su potencia. La combinación de HTML5 con CSS3 y en algunos casos JavaScript (por ejemplo, para el elemento de dibujo canvas), podremos crear sitios de la potencia… Leer más
Continuar leyendo