Revisaremos unas cuantas consideraciones importantes, que debemos tener en cuenta, siempre que trabajemos bajo Redes Ethernet, ya que podrían suponer la diferencia entre una topología aceptable u otra mucho más, desarrollando conceptos como los dominios de colisión y los de Broadcast, junto con información sobre el efecto de la latencia y los problemas de congestión de la red
También estudiaremos varios conceptos de segmentación de redes y su relación con los dominios de colisión, así como los límites de la emisión de mensajes de Broadcast y varios comandos útiles con Show.
El pasado dia 2 de octubre tuvo ocasión el evento "Create The Web" en Londres. Dicho evento forma parte del Tour que Adobe está dando al rededor del mundo para mostrar su compromiso hacia la web adaptando su estrategia a los estándares web y permitiendo a los desarrolladores crear contenidos de calidad con unas nuevas aplicaciones realmente interesantes.
A dicho evento tuve el privilegio de asistir en nombre de Cristalab invitado por Adobe, con lo que tengo que agradecer tanto la invitación como el fantastico trato recibido por la organización.
Las conferencias empezaron con una Keynote de Mike Chambers quien junto a Paul Trani mostraron las nuevas herramientas para crear la web actual. Seguidos de conferencias más teóricas como las de Divya Manian que mostró la evolución de la web a nivel gráfico, y el showcase de Sally Jenkinson mostrando gran parte de las nuevas capacidades creativas de la web. Quedando claro desde un principio el enfoque total y absoluto de Adobe hacia HTML5 para la creación de contenido en la Web.
A nivel de las nuevas aplicaciones presentadas en el evento, Freddie escribió anteriormente un articulo a raiz del mismo evento presentado en San Francisco: Edge Animate, Edge Reflow, Edge Code, Edge Inspect, Edge Webfont son herramientas muy interesantes y una gran noticia para todos los desarrolladores que quieran crear contenidos de calidad adaptándose a los nuevos estándares de la Web actual.
A continuación iré escribiendo diferentes artículos para ir mostrando de forma individual las nuevas aplicaciones y características presentadas. Ya que como digo, vale la pena probarlas y profundizar en ellas.
El diseño web en iPhone requiere conocimientos de HTML 5, CSS y Javascript especial para usar todo el poder de Safari Mobile. En este tutorial hablamos de cómo crear sitios web optimizados para iPhone y navegadores Webkit como Android.
You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.
En Cristalab y Mejorando.la creamos la MEJOR plataforma de cursos online que internet ha visto. Videos, sesiones en vivo, preguntas directas a los maestros, codigo compartible entre estudiantes y mucho, mucho mas.
Decidimos lanzarla con el MEJOR curso online que hemos creado. Un curso que te enseñará:
HTML5, CSS3, Javascript, jQuery, Node.js y Python con Django.
Si siempre quisiste aprender las tecnologías de frontend y backend más robustas y modernas, este curso es para ti. ¿Cómo inscribirte? Tan fácil como entrar acá:
http://cristalab.com/online
El curso inicia el 4 de diciembre, asi que inscribete ya. Solo necesitas las bases de HTML y una conexión a internet buena.
Al final del curso recibirás un diploma de certificación, impreso y firmado por los fundadores de Cristalab, Mejorando.la y Maestros del Web en la puerta de tu casa. Vivas, donde, vivas.
(Recuerda darle click al video central en el sitio de inscripción para ver un demo del curso)
No te pierdas hoy a Joaquín Reyes e Impromadrid, protagonistas del nuevo #FriendsOfTalent
¡Vuelven los encuentros 'Friends of Talent'! Esta tarde, a las 19 horas, el humorista, dibujante y actor Joaquín Reyes, y la innovadora compañía de teatro Impromadrid compartirán sus experiencias en el Espacio Fundación Telefónica.
Información práctica: Lugar:Auditorio Espacio Fundación Telefónica de Madrid (planta 2) Dirección: Edificio Telefónica en Gran Via, 28 (entrada por C/ Fuencarral, 3. Madrid) Fecha: 13 de noviembre de 2012 Horario: 19:00 h
Importante, no responda a este mensaje. Esta dirección electrónica sólo se utiliza para enviar la información desde la página http://www.fundacion.telefonica.com, y no existe un destinatario para su recepción.
Usted recibe esta comunicación porque sus datos se encuentran insertos en el fichero 'Comunicación Web', un fichero automatizado de datos de carácter personal propiedad de Fundación Telefónica, . Este fichero automatizado ha sido correctamente registrado en la Agencia Española de Protección de datos y su finalidad es 'USUARIOS REGISTRADOS PARA EL INTERCAMBIO DE INFORMACIONES Y CONTENIDOS A TRAVES DE LA PAGINA WEB DE FUNDACION TELEFONICA'. Este mensaje puede contener información privilegiada y/o confidencial. Si Ud. no es el destinatario indicado en este mensaje no está autorizado para copiar o entregar este mensaje a ninguna persona. En este caso, deberá destruirlo y se le ruega que avise al destinatario por e-mail.
SI NO DESEA RECIBIR MAS COMUNICACIONES DE FUNDACIÓN TELEFÓNICA PUEDE DARSE DE BAJA PULSANDO AQUÍ
Continuamos con la segunda entrega de nuestra miniserie de dos episodios, para comenzar a añadir los detalles adicionales a nuestro icono de un scanner en Illustrator, para dotarle de un aspecto más completo y elegante, utilizando las técnicas de recorte y suavizado aprendidas en el anterior videotutorial, para incorporar nuevas áreas de sombras e iluminación, botones y diferentes adornos.
Incluiremos nuevos detalles para recrear una botonera y un cartel de marca, gracias a uso de las formas y varios efectos.
Trabajaremos con las opciones de desvanecer y fusión, suavizando y redondeando la superficie del material para ofrecer a la ilustración de una imagen más natural, gracias al recorte de áreas con el buscatrazos para obtener diversas luces y sombras.
En este tutorial realizaremos un Slider sencillo en jQuery. Empezaremos con la estructura básica, eventos y animación con Javascript y lo terminaremos con un bonito aspecto en CSS. ¡Así que manos a la obra!
¿Cuándo deberíamos usar un Slider en nuestros formularios?
Fácil, cuando algún valor que nuestro usuario debe ingresar no es del todo claro para él. Por ejemplo, el usuario es consciente que debe ingresar un valor de 1 a 500px para el tamaño de su avatar pero no esta seguro que valor utilizar y como es muy incómodo probar valores en un campo de texto hasta que quede satisfecho con el elegido, debemos proporcionarle una mejor manera de hacerlo. Osea un ¡Slider!
Puedes seguir el paso a paso de este tutorial en vídeo:
Estructura básica HTML y CSS
En un nuevo documento HTML crearemos una nueva capa o DIV con clase SLIDER, la cual será nuestro contenedor principal. Dentro de ella crearemos un par de capas más con clase PROGRESS e INDICATOR respectivamente.
La primera servirá para mostrar el progreso de nuestro slider y la segunda para controlar dicho progreso.
Ok, Ahora agreguémosle un poco de estructura con CSS. Al contenedor le definimos un ancho y alto, pueden ser los valores que creamos convenientes. Agregamos un borde de un pixel (1px) y color gris. Para visualizar sus límites. [css:1:144a0af369].slider{ border: 1px solid grey; height: 60px; width: 100%; }[/css:1:144a0af369] Ahora en la capa progress asignamos su ancho y alto en cien por ciento (100%) para que tome dichos valores de la capa contenedora slider y agregamos un color de fondo. [css:1:144a0af369].slider > .progress{ background: #14aaf6; height: 100%; width: 100%; }[/css:1:144a0af369] Para la capa indicator definimos un color de fondo de nuestra elección, un alto de cien por ciento (100%) y un ancho un poco menor también en porcentaje (%). [css:1:144a0af369].slider > .indicator{ background: darkred; height: 100%; width: 10%; }[/css:1:144a0af369] Ahora en el navegador podemos ver como "progress" está dentro de "slider" pero "indicator" se encuentra fuera de éste.
Para solucionar esto, debemos utilizar la propiedad position, el valor para slider será relative y en progress e indicator el valor será absolute. [css:1:144a0af369].slider{ border: 1px solid grey; height: 60px; position: relative; width: 100%; }
.slider > .indicator{ background: darkred; height: 100%; position: absolute; width: 10%; }[/css:1:144a0af369] Con esto hemos sobrepuesto a progress e indicator sin salirnos de la capa slider.
Si deseáramos que nuestro slider estuviera a la mitad de su recorrido, simplemente cambiamos el ancho de progress a un cincuenta por ciento (50%). Pero también debemos hacer que la capa indicator coincida con este cincuenta por ciento (50%). Dándole este valor a la propiedad left podremos obtener el resultado deseado. [css:1:144a0af369].slider > .progress{ background: #14aaf6; height: 100%; position: absolute; width: 50%; }
Ok, Ahora podemos apreciar como tanto progress e indicator aparentemente se encuentran a la mitad del recorrido del slider.
¿Pero la capa indicator realmente esta en dicha posición?
Para ubicar indicator en la mitad exacta del recorrido debemos darle un margen izquierdo negativo de la mitad de su ancho. En este caso menos cinco porciento (-5%). [css:1:144a0af369].slider > .indicator{ background: darkred; height: 100%; margin-left: -5%; left: 50%; position: absolute; width: 10%; }[/css:1:144a0af369] Ya con esto terminamos la estructura básica de nuestro slider.
Animación y eventos con jQuery
En el body, ya que es siempre el mejor lugar para cargar javascript, incluiremos la ultima versión de jQuery y el archivo donde ira la lógica del slider. En mi caso main.js.
Ahora en la capa con clase slider capturamos el evento mousedown. Luego cuando éste se dispare, almacenaremos en la variable pos las coordenadas X e Y, en este caso serán left y top con respecto al objeto window.
Código :
$('.slider').on('mousedown', function(e){ var pos = $(e.currentTarget).offset(); });
Creamos una nueva variable pos-x que será la posición en X donde se produjo el evento menos la posición en X de la capa slider.
Actualizamos el navegador, y al hacer clic sobre slider vemos como progress se desplaza hasta esa posición. Hacemos lo mismo para la capa indicator pero en la propiedad left:
Actualizamos el navegador y al hacer clic sobre slider, las dos capas se desplazan simultáneamente hasta esta posición. Pero tenemos un problema, cuando llegamos a los extremos de slider haciendo clic, se desborda progress e indicator.
Para corregir este comportamiento, simplemente debemos darle unos límites de desplazamiento a slider. Con una condición en la que asignaremos el valor mínimo y máximo en los que es seguro el desplazamiento. En este caso serán cero (0) como valor mínimo y el ancho completo del slider como valor máximo.
Actualizamos el navegador, y vemos como progress e indicator se desplazan sin salirse de sus límites.
Ahora ordenemos un poco el código, creando una función que llamaremos move-slider y recibe como parámetro un evento. Llamamos la función cuando se dispare el evento mousedown.
Nos cercioramos que siga funcionando correctamente y continuamos. Luego, dentro de mousedown capturamos el evento mousemove y con este llamamos nuevamente la función move-slider.
Ahora cuando se produzca el evento mouseup sobre la capa slider, desactivaremos el evento mousemove para que este solo se ejecute mientras tenemos el click sostenido.
En la función move-slider crearemos una variable con el nombre value, ella va a ser igual a la cantidad en pixeles (px) donde se produce el evento multiplicado por cien (100) y dividido entre el ancho del total en pixeles (px) de la capa slider.
Vamos al navegador, y al arrastrar el indicador veremos cómo cambia el valor en el campo de texto.
Si deseamos que el valor máximo fuera 10, multiplicamos por este en la variable value y si quieren valores exactos, pueden utilizar el método Math.Round de JavaScript.
Agregando estilos con CSS
En nuestro archivo HTML, desactivaremos el campo de texto y crearemos dentro de slider una nueva capa con clase empty progress, la cual representará la sección del slider que aún no ha sido recorrida por el indicador.
Para el fondo de la capa slider utilizaremos la imagen de una cuadrícula que ya tenemos preparada, esta la desplazaremos -25px tanto en el eje X como en el eje Y y luego eliminaremos el borde. [css:1:144a0af369].slider{ background: url('../img/grid.png') -25px -25px; height: 60px; position: relative; width: 100%; }[/css:1:144a0af369] En la capa progress cambiaremos su altura a un 40% y la desplazamos un 25% desde la parte superior. [css:1:144a0af369].slider > .progress{ background: #14aaf6; height: 40%; top:25%; position: absolute; width: 0%; }[/css:1:144a0af369] Ahora duplicamos las propiedades de progress para crear empty progress y cambiamos su color de fondo. Puesto que la capa empty progress debe estar siempre visible, cambiamos su ancho a 100%. [css:1:144a0af369].slider > .emptyprogress{ background: #97d9fb; height: 40%; top:25%; position: absolute; width: 100%; }[/css:1:144a0af369] Ahora en el navegador podemos ver que al desplazar el slider, la capa progress se sobre pone a la capa empty progress. Continuamos con el indicador, Eliminamos el color de fondo y asignamos una imagen, esta no debe repetirse. [css:1:144a0af369].slider > .indicator{ background: url('../img/pointer.png') no-repeat; height: 100%; margin-left: -5%; left: 50%; position: absolute; width: 10%; }[/css:1:144a0af369]
Cambiamos el ancho actual por el ancho de la imagen que hemos utilizado. En este caso por 60px. En la margen serán 8px para el TOP, automático para la parte derecha e inferior y -30px para el left.
[css:1:144a0af369].slider > .indicator{ background: url('../img/pointer.png') no-repeat; height: 100%; margin: 8px auto auto -30px; left: 0%; position: absolute; width:60px; }[/css:1:144a0af369] Ahora en el navegador podemos ver mas centrado nuestro indicador. Volviendo a nuestro CSS, en progress y empty progress agregamos un borde solido de 3px y color blanco y una pequeña sombra de 1px y color gris claro para resaltar el borde. [css:1:144a0af369].slider > .emptyprogress{ background: #97d9fb; border: 3px solid white; height: 40%; top:25%; position: absolute; width: 100%; -webkit-box-shadow: 1px 1px 3px 0px #ccc; box-shadow: 1px 1px 3px 0px #ccc; }
.slider > .progress{ background: #14aaf6; border: 3px solid white; height: 40%; top:25%; position: absolute; width: 0%; -webkit-box-shadow: 1px 1px 3px 0px #ccc; box-shadow: 1px 1px 3px 0px #ccc; }[/css:1:144a0af369] Ya terminando, Agregamos unos bordes redondeados de 10px. Y cambiamos el cursor de indicator, progress y empty progress para darle un mejor aspecto. [css:1:144a0af369].slider{ background: url('../img/grid.png') -25px -25px; height: 60px; position: relative; width: 100%; }
.slider > .indicator{ background: url('../img/pointer.png') no-repeat; cursor: move; height: 100%; margin: 8px auto auto -30px; left: 0%; position: absolute; width:60px; }[/css:1:144a0af369] Con esto, hemos terminado nuestro slider, Recuerda que todo el código que vimos en este video esta disponible en el repositorio de GitHub de ninja code.
Si tienes alguna duda o pregunta, puedes hacerla en los comentarios y no te olvides suscribirte a nuestro canal de Youtube para mas ninja code.
Hola, este es mi primer tutorial y quisiera explicarles una sencilla forma de hacer el llamado social bar o social links en CSS3, que es una barra que contiene links sociales como Facebook, twiter, youtube etc, o lo que le quieras poner, ya sea texto o iconos.
Seguro los has visto en algunas páginas, esta en especial es animada y tendrá un hover que hará que gire 360 grados cuando el mouse esté sobre ella.
He colocado un simple div al cual lo identifiqué con una clase llamada "menú" el cual, dentro de éste se encuentran cuatro imágenes con un tamaño definido en 40 x 40px.
transition: all 0.4s ease; -webkit-transition:all 0.4s ease; [/css:1:878b9c6f04]
Seleccionamos a la clase menú y declaramos su posición, la cual será fixed ya que queremos que la barra nos siga mientras damos scroll con el mouse. Agregamos un color de fondo, le ponemos un borde, y definimos el ancho de 57px. Al left (izquierda) lo correremos a -50px, para que la mayor parte del elemento quede fuera de la pantalla. Declaramos z-index y le ponemos como valor 100 para que esté sobre todas las posiciones.
Como dato, z-index no tendrá efecto si no le has seteado ninguna posición al elemento. Por si te quedan dudas o no has entendido cómo funciona darles un valor a las posiciones, esta es una página donde podrás ver como funcionan en tiempo real (recomendado): posiciones en tiempo real
Volviendo al CSS, le he colocado box shadow para darle sombra:
También he redondeado con border-radius la parte superior e inferior derecha de la barra. La cantidad de sombra y el tamaño del borde puedes sacarlo si quieres de las páginas css3maker o css3please.
El transform con valor rotate(360) es para que de una vuelta completa, y agrego los prefijos para los demás navegadores. El valor de left es de 0px para que quede pegado en todo el extremo de la página.
En este videotutorial de Illustrator comenzamos a trabajar en la zona de los ojos, para añadir más detalles específicos a nuestro retrato, utilizando nuevamente para ello, los degradados suaves a través del uso de la herramienta Malla y varios degradados en las formas, que usaremos como base creándolas con elipses o dibujándolas a mano alzada, para que formen parte de varias zonas de la ceja y las pestañas.
Saludos.
You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.
EMPRESA 2020: nuevos modelos de negocio en el mundo digital
El próximo 22 de noviembre, a las 18 horas, comienza el ciclo de conferencias “Empresa 2020, los retos de las organizaciones" en Espación Fundación Telefónica. A lo largo de 5 jornadas, se reflexionará sobre cómo la digitalización afecta a todos los sectores de la actividad económica, creando nuevas relaciones, nuevas oportunidades y llegando incluso a redefinir el modelo de negocio de algunas industrias.
Programa:
- 22 de noviembre: Retos y oportunidades para las empresas en tiempos de redes.
- 22 de enero 2013: Perspectivas ante la Empresa 2020.
- 26 de febrero 2013: Marketing y comunicación.
- 19 de marzo 2013: La nueva era de la banca y las finanzas.
- 24 de abril 2013: La reinvención de los negocios.
Ya puedes inscribirtedesde aquí. (Inscripción gratuita hasta completar aforo)
Información práctica: Lugar:Espacio Fundación Telefónica de Madrid. Dirección: Edificio Telefónica en Gran Via, 28 (entrada por C/ Fuencarral, 3. Madrid) Fecha primera sesión: 22 de noviembre. Horario: 18.00-20.30h.
Importante, no responda a este mensaje. Esta dirección electrónica sólo se utiliza para enviar la información desde la página http://www.fundacion.telefonica.com, y no existe un destinatario para su recepción.
Usted recibe esta comunicación porque sus datos se encuentran insertos en el fichero 'Comunicación Web', un fichero automatizado de datos de carácter personal propiedad de Fundación Telefónica, . Este fichero automatizado ha sido correctamente registrado en la Agencia Española de Protección de datos y su finalidad es 'USUARIOS REGISTRADOS PARA EL INTERCAMBIO DE INFORMACIONES Y CONTENIDOS A TRAVES DE LA PAGINA WEB DE FUNDACION TELEFONICA'. Este mensaje puede contener información privilegiada y/o confidencial. Si Ud. no es el destinatario indicado en este mensaje no está autorizado para copiar o entregar este mensaje a ninguna persona. En este caso, deberá destruirlo y se le ruega que avise al destinatario por e-mail.
SI NO DESEA RECIBIR MAS COMUNICACIONES DE FUNDACIÓN TELEFÓNICA PUEDE DARSE DE BAJA PULSANDO AQUÍ
Aprenderemos a usar transiciones de filtros en Adobe After Effects sobre animaciones complejas, composiciones anidadas y edición gráfica de las animaciones creadas.
You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.
Hay muchos tipos de efectos de sonido en FL Studio (antiguo Fruity Loops). En este tutorial veremos los efectos de audio Delay, Reeverb, Flanger, Phaser, Chorus, Compressor, Clipper, Fast Distortion y Vocoder.
El diseño web en iPhone requiere conocimientos de HTML 5, CSS y Javascript especial para usar todo el poder de Safari Mobile. En este tutorial hablamos de cómo crear sitios web optimizados para iPhone y navegadores Webkit como Android.
You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.
