Creación de un menú estilo minimalista [parte 2]

Carlosmax — Tue, 22 Mar 2011 18:30:10 +0000

Esta es la segunda entrega del tuto sobre la creación de un bonito y sencillo menú minimalista, en la parte anterior expliqué como hacer los íconitos que son la parte escencial de este menú. Sentimos que no se publicara ayer el vídeo, como dijimos, fue un problema técnico.

Si te perdiste la parte 1 de este tutorial, te recomiendo visitarla antes de seguir con esta: Creación de un menú minimalista [parte 1]

Ahora, en esta parte del tutorial terminamos la creación de los íconos del menú y seguimos con la terminación de la maquetación, añadiendo estilos CSS para el efecto hover que será lo que hará al menú ser estilo minimalista. Esperemos que os guste (recordad dar a “Me gusta”, si os ayudan los vídeos, ya que así nos ayudáis a nosotros también )

Os recomiendo que veais el vídeo en Youtube, para más calidad y comodidad .

Creación de un menú estilo minimalista [parte 1]

Carlosmax — Mon, 14 Mar 2011 07:47:03 +0000

Hola, esta es mi primera publicación para Concepto Pixel y me gustaría primero que todo presentarme, soy Carlos Castillo, tambien me conocen en la web como Carlosmax, estudiante y diseñador freelance, llevo 10 años aproximadamente diseñando webs y molestando en internet (?). Espero que les guste los tutos que les traeré en mi estadía en este maravilloso blog y así aportar algo más de sabiduría a la blogosfera hispana.

Voy a especializarme en Videotutoriales de diseño web y gráfico con herramientas como Photoshop y Dreamweaver, ya que son mi fuerte en el diseño. Bueno, ahora les mostraré un tutorial bastante sencillo para crear un menú muy bonito que de seguro les gustará, el cual consta de 3 partes en video. Hoy se publicará la primera parte, y el siguiente lunes la 2ª; la tercera parte será el lunes siguiente a el de la 2ª. Aquí está la primera parte:

Recursos utilizados:

Descargar paquete Iconic

Crea screencasts en HD usando una aplicación web

Luis Lopez Garay — Thu, 12 Aug 2010 19:40:00 +0000

Buenas amig@s, esta vez tengo una idea genial, es la creación de videotutoriales o screencasts (en ingles, grabaciones de pantalla). Me dio la de querer crear unas cuantas video series y tutoriales individuales en un nuevo servicio que descubrí mientras navegaba por internet, se trata de screenr, un servicio web basado en Java que nos permite grabar toda o parte de nuestra pantalla, sea la resolución que sea, mientras que a la par también nos permite usar cualquiera de nuestros micrófonos integrados (laptop) o conectados (recomiendo los conectados, sobre todo de auricular VoIP).

Lo que necesitamos para grabar un buen screencast es lo siguiente:

Conectar un micrófono si no es integrado como los de las notebooks, esto solo en caso de que quieras que la grabación sea narrada, créanme aunque su voz sea mas grave o un poco distinta le añade un gran valor humano.

Necesitas también Java, preferentemente Java 6, puedes obtenerlo buscando en google pero la mayoría de las computadoras Apple, PC tienen soporte para Java ya integrado.

Preparar lo que vas a decir, practicar tu velocidad en cuanto a la apertura de programas, ventanas, y realización de procesos sean cuales sean, eso permite que a la hora de la grabación no te pongas nervioso o no pierdas tiempo tratando de recordar lo que estabas por hacer, también es bueno entonar tu voz y calentar para que no suenes torpe hablando.

Abrir una cuenta en twitter en caso de que no tengas ya que esto es lo que se toma como cuenta para entrar y almacenar tus videos (no, twitter no tiene disco duro virtual, pero screenr si y usa tu twitter porque el sitio esta creado para que puedas twittear de inmediato tu screencast y la gente te replique tus videos por medio de twitter).

Bien ahora debes entrar a screenr.com y presionar el botón de “signing in with twitter”.

Una vez que haz hecho el proceso (permitir aplicación en twitter) estas listo para grabar tu primer screencast, lo siguiente es presionar el botón amarillo grande o el que dice RECORD con un símbolo rojiblanco.

Ahora que estas en la siguiente pantalla solo tienes que mover el recuadro punteado en caso de que quieras solo una porción o en el panel negro de la esquina inferior izquierda puedes cambiar de resolución estándar o elegir pantalla completa.

Ahora un gran pero gran consejo… recuerda ALT+D porque lo vas a necesitar para iniciar la grabación, pausar y reanudar la grabación una vez iniciada, y por ultimo, cuando termines de grabar (ojo, la grabación tiene un limite de 5 minutos) presiona el botón verde DONE que se localiza cuando pausas la grabación o termina el tiempo limite, justo sustituyendo al botón CANCEL de la imagen. También mientras grabas o pausas hay un icono al lado de las resoluciones que indica el eliminar esa grabación para continuar con otra (muy útil si tu primer intento falla o se te olvido algo).

Como puedes ver, una vez finalizado salen varias cosas, primero la vista previa en definición baja (360p) para que sepas y veas que es lo que acabas de hacer (sea bueno o no), luego tienes la descripción, desafortunadamente en la descripción solo puedes poner lo mismo que en un tweet (palabras) por lo que tendrás que ser breve, otra cosa es el checkbox que permite no twittear que acabas de crear un screencast (ese tweet incluye la dirección) y por ultimo esta el botón de Publish, que una vez pausado sale lo de la imagen, una barra de progreso la cual indica cuando falta para que tu screencast este en la red y ya en alta definición, disponible para la vista de todos aquellos que deseen verlo.

Una cosa mencionaré y es que el tiempo que tarda en subir no es tanto ya que de alguna forma el método de compresión en MP4 es bastante efectivo y el video pesa lo justo, según el cuadro de la imagen dice que el tiempo que tarda en subir es el tiempo que dura el video multiplicado por uno (1x), entonces según ahí si mi video duró 4 segundos, en 4 segundos se publica, pero esto es algo engañoso y depende mucho de tu velocidad de subida, la verdad yo experimente con el video de la imagen exactamente 5 segundos de tardanza al subir con una conexión que me da unos 30kbps de subida.

Y cuando finalmente hemos subido un video tenemos disponible ese video en la galería de screencasts de usuario, el cual se localiza en el menú principal, elemento 2, al lado del enlace para grabar (el que dice MY SCREENCASTS).¨

Para demostrar mejor como queda el video, este servicio integra el video en su propia dirección (muy corta por cierto, es útil que sea corta) pero también permite hacer cosas como:

Si el usuario quiere ver el screencast en HD tendrá que verlo en pantalla completa

Descargar el video en .mp4 original, que para 5 minutos no es mucho, publicar directo en tu cuenta de youtube y borrarlo, también puedes copiar la URI y embeberlo en alguna pagina web, justo como estoy apunto de hacer:

Justo como les decía, mi voz suena mas grave, hay ruido de fondo porque mi micrófono no es de lo mejor que hay (de hecho es integrado) y aparte me sentía algo nervioso al hablar, pero como es mi primer screencast con voz tengo la esperanza de mejorarla en los siguientes, ahora ya lo tienen, si tienen cualquier duda no duden en dejar un comentario.

Concepto Pixel » Video Tutoriales

Creación de un menú estilo minimalista [parte 2]

Creación de un menú estilo minimalista [parte 1]

Crea screencasts en HD usando una aplicación web