valeriofuiorea
Usuario (España)
Cuando Internet Explorer se retire, este será su museo Ante un paraguas, ¡Hazte el muerto! Esto es todo amigos.
¿Tu crees que funcionaria? Cigarrillos Lipton Balas m&m's Tic Tac Boom McDonalds UltraBook Google Gooooo Kaspersky Anti insectos Adobe Protección de la piel Jabón Canel Extintores Heineken Pianos IKEA (Sería cojonudo que tuvieras que montarlo tu mismo) Neveras Marshall
He visto en muchos sitios personas preocupadas por si el hecho de estudiar diseño gráfico tiene salida laboral. Y como de costumbre agarre un lápiz sin punta para mordiquearlo y ponerme a pensar. Pensé en quién podria ofrecernos trabajo si fueramos muy buenos con Photoshop. Y los resultados sorprendentemente fueron esperanzadores. Llegué a la conclusión de que tenia que buscar empleadores que se pudieran encontrar en cualquier parte del mundo. Asi que me puse a buscar en internet fotos de anuncios de lineas aereas por estar en todo el mundo y por ser empresas que se anuncian muchisimo.De hecho Turkish Airlanes y Emirates Airlanes son 2 de las empresas que más se anuncian del mundo. Pero me di cuenta de que hay infinidad de empresas que existen en todo el mundo y utilizan el diseño gráfico para anunciarse. Quiero aclarar que son anuncios impresos no de televisión. Interjet Mexico’s low-cost airline Norwegian Airlines Singapore Airline’s Emirates Airlines Turkish Airlines American Airlines Gol Airlines Turkish Airlines Lan Airlines Ukraine International Airlines Turkish Airlanes Tame Ecuador Airlines Southwest Airlines American Airlines Brazil airlines Turkish Cargo Air France South African Airways Turkish Airlines
Gallery CSS es una excelente alternativa a la hora de utilizar un slider de contenidos cuando lo que prima es la simpleza. Su principal característica es la de no utilizar JavaScript para funcionar, el creador de este recurso logró un slider completamente funcional utilizando para ello solo CSS3. El slider en sí no es muy distinto a los que utilizan JavaScript, por lo que estamos hablando de una alternativa real a lo que respecta a este tipo de recursos, inclusive tenemos a nuestra disposición efectos a la hora de realizar las distintas transiciones, estas ultimas también se logran mediante el buen uso de CSS3. Obviamente el punto débil de este proyecto es la compatibilidad con los distintos navegadores, en este caso la compatibilidad es buena siempre y cuando hablemos de navegadores modernos que aceptan la mayoría de las propiedades nuevas de CSS3. Ejemplo de Slider CSS3: Incluimos las hojas de estilos a nuestro sitio: <link rel="stylesheet" href="css/gallery.theme.css"> <link rel="stylesheet" href="css/gallery.min.css"> Utilizamos la estructura básica: <div class="gallery items-3"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <figure class="item"> <h1>1</h1> </figure> <figure class="item"> <h1>2</h1> </figure> <figure class="item"> <h1>3</h1> </figure> <div class="controls"> <a href="#item-1" class="control-button">•</a> <a href="#item-2" class="control-button">•</a> <a href="#item-3" class="control-button">•</a> </div> </div> Y si lo deseamos podemos utilizar el autoplay: <div class="gallery autoplay items-3"> La hoja de estilo es muy liviana, apenas 10kb en su versión extendida y unos 4.5kb en su versión simplificada, ambos valores se obtienen luego de comprimir los archivos mediante gzip. Algo que me gusta de este proyecto de descarga gratuita es que el autor para obtener ganancias ofrece por medio de un pago acceso a una serie de video-tutoriales para aprender más a fondo como funciona este slider, explicando paso a paso como implementar CSS3 para crear proyectos similares a este o utilizar estas propiedades para nuestras necesidades. Una forma de obtener beneficios de lo más interesante. Sigueme
Ya perdí la cuenta sobre cuantos slider nuevos de imágenes con jQuery aparecen a diario, por lo general todos son similares salvando mínimas diferencias, lo bueno de tantas alternativas es que prácticamente hay un slider para cada gusto. En esta oportunidad les quería recomendar zAccordion un plugin jQuery que muestra las imágenes en forma de acordeón horizontal con un curioso efecto de rebote. No se pierdan la demostración online de este fantástico plugin. El plugin cuenta con unas cuantas opciones de configuración, entre ellas podemos destacar la posibilidad de mostrar el texto alternativo de las imágenes a medida que se vayan destacando, una opción simple pero que puede llegar a resultar muy útil para aquellos que buscan mostrar una imagen y su descripción. Las imágenes deben ser colocadas dentro de listas, una vez que tenemos todos los archivos dentro de cada <li></li> simplemente tendremos que inicializar el plugin, un ejemplo de esto sería: HTML: <ul id="featured"> <li> <image src="diner.jpg" alt="Old School Diner" /> </li> <li> <image src="pool.jpg" alt="Vintage Pool" /> </li> <li> <image src="gas.jpg" alt="Retro Gas Pump" /> </li> <li> <image src="car.jpg" alt="Old Car Steering Wheel" /> </li> </ul>[/php] JavaScript: $(document).ready(function() { $("#featured".zAccordion({ easing: "easeOutBounce", timeout: 5500, slideWidth: 600, width: 960, height: 310 }); });[/php] Opciones: timeout: 6000, /* Time between each slide (in ms). */ width: null, /* Width of the container. This option is required. */ slideWidth: null, /* Width of each slide in pixels or width of each slide compared to a 100% container. */ tabWidth: null, /* Width of each slide's "tab" (when clicked it opens the slide) or width of each tab compared to a 100% container. */ height: null, /* Height of the container. This option is required. */ startingSlide: 0, /* Zero-based index of which slide should be displayed. */ slideClass: null, /* Class prefix of each slide. If left null, no classes will be set. */ easing: null, /* Easing method. */ speed: 1200, /* Speed of the slide transition (in ms). */ auto: true, /* Whether or not the slideshow should play automatically. */ trigger: "click", /* Event type that will bind to the "tab" (click, mouseover, etc.). */ pause: true, /* Pause on hover. */ invert: false, /* Whether or not to invert the slideshow, so the last slide stays in the same position, rather than the first slide. */ animationStart: function () {}, /* Function called when animation starts. */ animationComplete: function () {}, /* Function called when animation completes. */ buildComplete: function () {}, /* Function called after the accordion is finished building. */ errors: false /* Display zAccordion specific errors. */[/php] Métodos: start /* Start the accordion. */ stop /* Stop the accordion. */ trigger /* Trigger a specific slide. */ destroy /* Destroys accordion, unbinds events, and removes styles. */[/php] Ejemplo: <ul id="splash"> <li> <img src="diner.jpg" alt="" /> <div> <strong>Old School Diner</strong> <p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.</p> </div> </li> <li> <img src="pool.jpg" alt="" /> <div> <strong>A Day at the Pool</strong> <p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.</p> </div> </li> <li> <img src="gas.jpg" alt="" /> <div> <strong>Fill it Up!</strong> <p class="splash-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p> </div> </li> <li> <img src="car.jpg" alt="" /> <div> <strong>Going for a Drive</strong> <p class="splash-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p> </div> </li> </ul>[/php] No olviden revisar la documentación de zAccordion en donde encontraran infinidad de opciones para personalizar el desplazamiento como el efecto de esta forma de mostrar imágenes que resulta novedosa y atractiva. Si en lugar de necesitar lograr este efecto con imágenes quieren usar divs les recomiendo otro plugin para crear un acordeón con jQuery.[/note]
Este es un buen ejercicio para la inspiración de los diseñadores y creadores de arte. El contacto con la naturaleza siempre ayuda ¡Disfrutarlo!
Cuando alguien toma varias fotografías y las manipula para crear un resultado surrealista podemos decir que ha realizado una fotomanipulación. La fotomanipulación es un arte en sí mismo que va mas allá de solo utilizar “herramientas mágicas” como Photoshop, si no, que se requiere de habilidad y creatividad. A lo largo de la historia los grandes diseñadores han utilizado la fotomanipulación como una forma de expresarse, mostrar su creatividad y transmitir a través de la imaginación un mensaje o idea. También hay muchas empresas de publicidad que utilizan esta técnica para ser mas atractivos sus anuncios. Para realizar una fotomanipulacion existen muchos softwares como el ya mencionado Photoshop, Illustrator, Corel Draw, Indesign entre otros. En este articulo te quiero mostrar una impresionante colección de fotografías manipuladas por diferentes artistas, que te pueden servir como una gran fuente de inspiración. Disfruta así como yo, de esta grandiosa galería.
Como vengo haciendo desde hace dias atrás traiendo pluguins jQuery para nuestras webs, hoy no será menos. Asi que aqui teneis el Persepctive Page View Navigation. Desde la entrada de Window Vista se ha puesto de moda las vistas en 3D, Pues con este plugin lo que conseguimos es esconder a un lado nuestra web para mostrar un menú. Éste plugin se puede editar y ampliar facilmente aunque ahora ya tiene incluidos bastantes efectos. No necesitas el Xampp para probarlo simplemente descarga el archivo y haz click en "index" y el plugin funcionará ya que utiliza CSS3 y JavaScript. Demo: http://tympanus.net/Development/PerspectivePageViewNavigation/index.html Para hacer que funcione la estructura HTML tiene que ser asi: [color=#000000][color=#000000]<div id="perspective" class="perspective effect-airbnb"> <div class="container"> <div class="wrapper"><!-- wrapper needed for scroll --> <!-- ... --> </div><!-- wrapper --> </div><!-- /container --> <nav class="outer-nav left vertical"> <!-- ... --> </nav> </div><!-- /perspective -->[/color][/color] Este es el ejemplo de mover a la izquierda: [color=#000000][color=#000000] /* Effect Move Left */ .effect-moveleft { background: #f4f3f1; } .effect-moveleft .container { transition: transform 0.4s; transform-origin: 50% 50%; } .effect-moveleft .container::after { background: rgba(255,255,255,0.6); } .effect-moveleft.animate .container { transform: translateX(-50%) rotateY(45deg) translateZ(-50px); } /* Fallback */ .no-csstransforms3d .effect-moveleft.animate .container { left: -75%; } /* Navigation */ .effect-moveleft .outer-nav a { color: #e86a32; opacity: 0; transform: translateX(100px) translateZ(-1000px); transition: transform 0.4s, opacity 0.4s; } .effect-moveleft .outer-nav a:hover { color: #333; } .effect-moveleft.animate .outer-nav a { opacity: 1; transform: translateX(0) translateZ(0); } .effect-moveleft.animate .outer-nav a:nth-child(2) { transition-delay: 0.04s; } .effect-moveleft.animate .outer-nav a:nth-child(3) { transition-delay: 0.08s; } .effect-moveleft.animate .outer-nav a:nth-child(4) { transition-delay: 0.12s; } .effect-moveleft.animate .outer-nav a:nth-child(5) { transition-delay: 0.16s; } .effect-moveleft.animate .outer-nav a:nth-child(6) { transition-delay: 0.2s; } .effect-moveleft.animate .outer-nav a:nth-child(7) { transition-delay: 0.24s; }[/color][/color] Y el menú que nos aparecerá: [color=#000000][color=#000000]<nav class="outer-nav left vertical"> <a href="#" class="icon-home">Home</a> <a href="#" class="icon-news">News</a> <a href="#" class="icon-image">Images</a> <a href="#" class="icon-upload">Uploads</a> <a href="#" class="icon-star">Favorites</a> <a href="#" class="icon-mail">Messages</a> <a href="#" class="icon-lock">Security</a> </nav>[/color][/color]