Home Authors Publicaciones porJesus Liñan

Jesus Liñan

946 PUBLICACIONES 1 COMENTARIOS
Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....

0 6616

Le agrega un valor visual extra cuando una imagen tiene un decorado como un clip en la esquina, un marquito ó una etiqueta informática en la parte inferior de esta. Existen muchas formas de lograrlo, una de estas es con CSS en esta ocasión con los pseudo-elementos :before y :after. Estos elemento nos permite añadir cosas antes y después de un elemento HTML.

Vamos usarlo para agregar ó decorar imágenes en este caso con un clip en la parte superior izquierda de las páginas.

decorar imagenes

HTML

Dentro del body tenemos esta estructura dentro de una lista:

<ul class="galeria clip">
	<li>
      <a href="http://ribosomatic.com"><img src="1.jpg" alt="image" width="301" height="223"></a>
  	</li>
	<li>
	  <a href="http://ribosomatic.com"><img src="2.jpg" alt="image" width="291" height="215"></a>
	</li>
	<li>
	  <a href="http://ribosomatic.com"><img src="3.jpg" alt="image" width="291" height="215"></a>
	</li>
</ul>

CSS

Dentro del documento HTML ó una hoja de estilo aparte, colocar el siguiente código:

<style type="text/css">
.galeria {
	margin: 0 0 25px;
	text-align: center;
}
.galeria li {
	display: inline-block;
	margin: 5px;
	list-style: none;
}
.galeria a {
	position: relative;
	display: inline-block;
}
.clip img {
	padding: 4px;
	border: solid 1px #bbb;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.clip a:before {
	position: absolute;
	content: ' ';
	top: -5px;
	left: -4px;
	width: 30px;
	height: 60px;
	background:url(paper-clip.png) no-repeat;
}
</style>

Hay que tener en cuenta que todo trabajo lo hace el selector .clip a:before, donde especificamos la posición de la imagen que se sobrepondrá.

[ Ver el resultado final ]

Más adelante usaremos HTML 5 y CSS 3 para realizar otro decorado.

2 10007

BookBlock es un plugin para jQuery que puedes usar para crear contenido web en forma de folletos ó revista, con un efecto de voltear página ó “page flip”. Cualquier contenido puede estar dentro del bloque que se convertirá en una página, tales como imágenes ó texto. El plugin transforma el bloque o estructura sólo cuando sea necesario (a pasar de página).

Codrops explica el uso de este plugin en un tutorial paso a paso y utiliza adicionalmente otro plugin jQuery++ que contiene algunos complementos para jQuery.

bookblock

Uso Básico 

<div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <!-- custom content --> </div> <div class="bb-item"> </div> <div class="bb-item"> <!-- ... --> </div> <div class="bb-item"> <!-- ... --> </div> <!-- ... --> </div>

Llamar al plugin:

$(function() { $( '#bb-bookblock' ).bookblock(); });

Opciones de BookBlock

// speed for the flip transition in ms. speed : 1000, // easing for the flip transition. easing : 'ease-in-out', // if set to true, both the flipping page and the sides will have an overlay to simulate shadows shadows : true, // opacity value for the "shadow" on both sides (when the flipping page is over it). // value : 0.1 - 1 shadowSides : 0.2, // opacity value for the "shadow" on the flipping page (while it is flipping). // value : 0.1 - 1 shadowFlip : 0.1, // perspective value perspective : 1300, // if we should show the first item after reaching the end. circular : false, // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'. nextEl : '', // if we want to specify a selector that triggers the prev() function. prevEl : '', // callback after the flip transition. // page is the current item's index. // isLimit is true if the current page is the last one (or the first one). onEndFlip : function( page, isLimit ) { return false; }, // callback before the flip transition. // page is the current item's index. onBeforeFlip: function( page ) { return false; }

Enlaces | Demo, Código fuente

5 9474

Existen aplicaciones muy robustas en la web, muchas de ellas programada con HTML y JavaScript, y el diseño con CSS (trabajando con lenguajes de servidor y manejadores de BD). Muchos programadores se sienten cómodos con lenguajes de programación web que usan. Cuando hablamos de aplicaciones de escritorio, muchos lenguajes de web no se usan para ello (salvo algunos conocidos). Para un programador muy hábil no habria problema ponerse al día con la sintaxis y funciones de un nuevo lenguaje, pero aun siendo muy habiles quizas queramos ahorrarnos el tiempo que ello implique pues el tiempo es oro ¿verdad? Entonces ¿por que no desarrollar aplicaciones de escritorio y multiplataforma con los conocimientos que tenemos sobre lenguajes enfocados para web?

tidesdk

Bueno de esto se trata TideSDK, una plataforma para compilar y desarrollar aplicaciones de escritorio con HTML 5, CSS 3 y JavaScript. El cual puede extender su funcionalidad trabajando con lenguaje de lado del servidor como PHP, Python y Ruby. 

La plataforma tiene una API sencilla y familiar, además cuenta con una extensa documentación y una comunidad que da soporte y resalpado a la plataforma. Con esta herramienta no solo somos desarrolladores web, sino que además complementamos nuestras habilidades para el desarrollo de aplicaciones de escritorio.

Particularmente me parece muy interesante, no es la primera vez que veo un proyecto así, pero está vez me empaparé un poco al respecto y publicaré lo que iré aprendiendo.

Enlace | TideSDK

4 2365

Gracias a CSS podemos transformar el diseño de un sitio web. Con mucha creatividad podemos sacarle partido a este lenguaje. Sin embargo, de vez en cuando, las técnicas convencionales de su uso no satisfacen ciertos requerimientos, es por ello que podemos hacer uso de otras declaraciones también disponibles, pero que muchas veces están ocultas, por decirlo asi (propiedades de cada navegador). Veamos algunas de ellas:

Esquinas redondeadas

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

El enemigo número uno de este tip es IE, aqui artículo para que funcione en Internet Explorer

Sombras

La mayoría de navegadores soporta esta propiedad box-shadow. En Safari existe una propiedad alternativa -webkit-box-shadow.

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

Regla @media

Esta regla se utiliza para hacer cambios en el estilo de un página web para diferentes tamaños de pantalla, teniendo en cuenta la técnica de Diseño Web Sensible. Ver un ejemplo de ello.

@media screen and (max-width: 480px) {

}

Efecto degradado

No todos los navegadores soportan este regla. Algunos ejemplos en este post.

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

Propiedad background-size

Una de las propiedades que ha alcanzado gran soporte de los navegadores. Esta propiedad específica el tamaño de la imagen de fondo. Algo de información aqui.

div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

@font-face

Una propiedad muy útil para la transformación del diseño en cuanto a tipografía. Recientemente comentamos un artículo sobre Icons Fonts.

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}

Una vez declarado, como usarlo:

div
{
font-family:mySmashingFont;
}

En smashinghub podemos encontrar otras 3 tips CSS más que no deben faltarnos como desarrolladores web.

0 1460

De vez en cuando hay que relajarnos del trabajo con algun jueguito y que mejor que los del género arcade pues tienen niveles cortos, controles intuitivos, sencillos y la dificultad aumenta a medida que se superan los niveles; lo cual lo hacen entretenidos y nos permiten pasar un buen rato. Obviamente no es la mejor opción para la productividad pues nos quitarían mucho tiempo, pero si viajamos largas distancias es una buena opción para ocupar en parte el tiempo del viaje.

Si tiene un dispositivo con Android y estás buscando buenos juegos género arcade, aqui te recomendamos algunos:

Temple Ruin

temple ruin

Nin Jump

ninjump

Falldown Classic

falldown classic

Labyrinth Lite

labyrinth

Dragon, Fly! Free

dragon

Yoo Ninja! Free

yoo ninja

Vía TechSource

0 4911

Esto me hace recordar que tengo que actualizar mi tarjeta de presentación siguiendo estas sugerencias. En el campo del diseño web ó diseño gráfico publicitario (entre otros) la tarjeta de presentación es muy importante. Es una carta de presentación, si es creativa dirá mucho de nosotros. Es una de las primeras cosas que ven nuestros potenciales clientes, inclusive dependerá en parte de ello si harán uso de nuestros servicios. Así que añadimos esta lista a las posteadas anteriormente (Creativas tarjetas de presentación y negocio, Tarjetas de presentación con estilo) para que nos sirva de inspiración.

diseño, fotografia

estilista

pupiletra

pupiletra resuelto

compañias

dentista

diseñador minimalista

sample

para varios miembros

diseño interiores

restaurant

Vía Designer Daily

2 1870

El diseño web sensible (responsive web design) es una técnica sencilla pero potente que hace que un sitio web se vea bien en todos los tamaños de pantalla, ya sea telefonos moviles, tablets, PC e incluso televisores. Google recomienda el enfoque del diseño sensible para la indexación mejorada ya que mantiene el contenido para PC y movil en una sola URL. Hace unas semanas atrás explicamos en un tutorial de Cómo Redimensionar contenido de página web independientemente del dispositivo que se usa para navegar por la web, probablemente les sirva.

Volviendo al tema del post, si usamos anuncios de Google en nuestra web quizas nos daremos cuenta que aunque nuestro contenido podemos redimensionarlo, el de los anuncios de Google no, pues tiene un ancho fijo y no vamos a poder redimensionarlo en función del tamaño del dispositivo.

responsive web design

Si, por ejemplo estamos usando en nuestra web un anuncio de 728x90px, que muy bien se ve en nuestra computadora personal, pero que en un dispositivo movil con 320px de ancho el anuncio se extienda más allá de la pantalla, definitivamente descuadra nuestro diseño.

Para ello se puede usar código de JavaScript para que los anuncios respondan al tamaño de la pantalla. Puedes crear varios bloques de anuncios y en base al tamaño de pantalla del dispositivo del usuario, mostrar el formato más apropiado. 

<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 60;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "ad-unit-2";
        google_ad_width = 300;
        google_ad_height = 250;
    } else {
        google_ad_slot = "ad-unit-3";
        google_ad_width = 468;
        google_ad_height = 60;
    }
</script>
<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Obviamente tienen que cambiar los valores de google_ad_client y google_ad_slot, valores que aparecen en sus anuncios.

Cómo se aprecia en el código es la propiedad innerWidth, que obtiene el ancho en píxeles de la ventana del navegador, la que realiza el proceso principal. Una vez se sabe su valor sirve el anuncio respectivo.

Vía Digital Inspiration

0 2208

Web Audio API presenta una variedad de nuevas características de audio para la plataforma web. Puede ser usado con las APIs grafícas canvas 2D y WebGL 3D para crear una nueva generación de juegos y aplicaciones interactivas. A qui se muestra su uso bien básico sin Flash, ni elemento de audio HTML 5. Se usa jQuery para seleccionar las etiquetas y trabajar con eventos, pero no es necesario. Más bien se usa un pequeño framework para trabajar con Web Audio API más facil, ya que nos ayuda a hacer las verificaciones de soporte en el navegador y manejo de errores.

web audio api google

Cómo usarlo

Es necesario utilizar más JavaScript con la Web Audio API que con los elementos de audio de HTML 5, pero vale la pena por lo ligero del proceso de la API. En el ejemplo lo que se desea lograr es que cuando el puntero del mouse se pose sobre un link el sonido se reproduzca. Veamos:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Audio API</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="webAudioApiForDesigners.js"></script>
<script type="text/javascript">
	// you'll put the PCM audio in here
	var audioBuffer = null;  
	var context = new webkitAudioContext();
	
	function loadDogSound(url, variableToBufferSound) {
	  var request = new XMLHttpRequest();
	  request.open('GET', url, true);
	  request.responseType = 'arraybuffer';
	
	  // Decode asynchronously
	  request.onload = function() {
		context.decodeAudioData(request.response, function(buffer) {
		  variableToBufferSoundIn = buffer;
		}, onError);
	  }
	  request.send();
	}
	
	function playSound(buffer) {
	  // creates a sound source
	  var source = context.createBufferSource();

	  // tell the source which sound to play
	  source.buffer = buffer;          
	
	  // connect the source to the context's destination (the speakers)           
	  source.connect(context.destination);       
	  
	  // play the source now
	  source.noteOn(0);                          
	}


</script>
</head>

<body>
    <ul id="nav-one" class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    
	<script type="text/javascript">
        // 1
        var context = initializeNewWebAudioContext();
        
        // 2
        context.loadSound('beep.ogg', 'beep');
        
        $("#nav-one a")
          .mouseenter(function() {
            // 3
           context.playSound('beep');
         });
    </script>
</body>
</html>

Con esta API y el pequeño framework, hacemos todo en tres pasos:

  1. Creamos un AudioContext, por así decirlo el marco de reproducción del audio, sin preocuparnos por el navegador.
  2. Cargar un sonido en el AudioContext.
  3. Finalmente reproducimos el audio.

Vía CSS-tricks | Demo

0 1477

Recientemente Microsoft ha renovado completamente su logotipo, que en parte comprende cuatro cuadrados que representan su paquete de productos insignia que comprende Windows, Office, Xbox y Windows Phone. Mediante CSS y HTML en pocas líneas de código podemos recrear este logotipo 🙂 veamos el código:

logo

Código

<!-- dentro del body -->
<style> logo { font: bold 60px "Segoe UI"; color: #747273; line-height: 1.5em; padding-left: 1.7em; } logo:before { content: '\2006'; position: absolute; height: 0.095em; left: 0; box-shadow: 0.35em 0.35em 0 0.25em #f8510c, 1.05em 0.35em 0 0.25em #7eba00, 0.35em 0.97em 0 0.25em #00a3f4, 1.05em 0.97em 0 0.25em #ffba00; } ?</style> <logo>Microsoft</logo>?

Si la fuente Segoe UI no está en su equipo, puede probar con Open Sans, una fuente de Google.

Vía Digital Inspiration

1 3453

D3 es un poderoso framework en JavaScript para manipulación visual de datos. Combina las tecnologías HTML, SVG y CSS que lo hace sencillo y compatible con la mayoría de navegadores actuales. Podemos consultar el site principal, y ver la diversidad de ejemplos para darnos una idea del potencial de este framework, como la documentación.

d3

Codrops ha preparado un tutorial paso a paso de como crear un diversos gráficos con la ayuda de D3: Multiple Area Charts with D3.js

SOCIAL

SOCIAL

0FansLike