Cómo hacer un parallax sencillo

A menudo nos resulta muy complicado explicar y aprender cómo funciona un parallax. Pues bien os voy a presentar una opción más cutre del efecto de parallax. Se trata de mover el fondo de la web en el sentido contrario al de la navegación, ahí va el código:

<script type=”text/javascript”>
window.onscroll = scroll;
function scroll(){
var sc = 5*window.pageYOffset/2-700;
document.getElementById(‘body’).style.backgroundPosition = ‘right ‘+sc+’px’;
}
</script>

Una forma sencilla y efectiva de embellecer tu web. Si queréis ver un ejemplo os dejo mi nuevo blog de vídeos diarios: RABODEMONO

¿No te acuerdas de todos los tags de HTML5?

Continuar leyendo »

Cómo hacer un ‘I like’ propio sin atolondrar al usuario

Recientemente he iniciado un proyecto llamado WELIKELINKS. Se trata de una red social para compartir enlaces orientado al arte, diseño y creatividad. Bueno el caso es que se pueden hacer likes internos para los que el proceso es cargar un PHP que les paso por variables de URL los datos necesarios para guardar el ID de del enlace y la IP desde la que se ha hecho el like (para que no voten dos veces o al menos desde el mismo ordenador, algo es algo…). Me atormentaba el tema de andar con redirecciones y recargas de página, ¡así que busqué una solución!

Se me ocurrió ocultar en la parte superior del documento un iframe que cuando se hace el like carga todos los procesos internos para registrar el like. Su estilo tiene este aspecto:

iframe.process{
position: absolute;
top:0;
left:0;
width:10px;
height:10px;
z-index:-100000000;
opacity:0;
}

Luego lo único que tienen que cargar los enlaces de I like tiene que cargar con target del iframe en cuestión.

HR, ese gran tag olvidado

A menudo en cuestiones de HTML y CSS nos olvidamos de algunos tags usado hace tiempo, hasta que lo redescubres con propiedades nuevas y alucinantes. Éste es el caso de CSS-Tricks, ahí van algunas de las versiones del <hr>:


Continuar leyendo »

Detectar el tipo de dispositivo con el que navegan por nuestra web (detector de iPhone e iPad)

A menudo nos encontramos con que no podemos controlar si nos visitan con un iPhone o con iPad y las webs no se acaban de ver bien… Con la llegada de wordpress y sus plugins, hemos encontrado la manera de hacer versiones para dispositivos móviles. Pero la verdad es que es difícil cambiar el aspecto por defecto de estos templares a no ser que sean variaciones dentro del propio plugin.

La verdad es que la estructura no se vería mal en un iPhone si los estilos se adecuasen. Bien pues el siguiente código lo que hace es que en header selecciona un css u otro dependiendo del dispositivo con el que se accede a la página web.
Continuar leyendo »

Compartiendo por URL

A continuación comparto con vosotros una série de URLs customizables para compartir contenido:

twitter: http://twitter.com/home?status=[TITLE]+[URL]

facebook: http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

Tumblr: http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Digg: http://www.digg.com/submit?phase=2&url=[URL]&title=[TITLE]

StumpleUpon: http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Delicious: http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

Google Buzz: http://www.google.com/reader/link?title=[TITLE]&url=[URL]

Google Bookmarks: http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

Linkedin: http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Slashdot: http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

Technorati: http://technorati.com/faves?add=[URL]&title=[TITLE]

Posterous: http://posterous.com/share?linkto=[URL]

Reddit: http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Newsvine: http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm: http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote: http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

friendfeed: http://www.friendfeed.com/share?url=[URL]&title=[TITLE]

Evidentemente tendréis que substituir [TITLE], [DESCRIPTION] y [URL] por los datos correspondientes (ya sean literales o códigos PHP).

Cómo ordenar los posts de wordpress alfabéticamente

A menudo necesitamos ordenar los posts alfabéticamente (por ejemplo si usamos nuestro wordpress para nuestro portfolio). Pues es muy sencillo, sólo tenemos que editar dos archivos de la carpeta del tema a modificar: índex.php y archive.php

Sencillamente tenemos que añadir la siguiente línea antes del bucle que saca los posts: $posts = query_posts($query_string . ‘&orderby=title&order=asc&posts_per_page=-1′);.

<?php
$posts = query_posts($query_string . ‘&orderby=title&order=asc&posts_per_page=-1′);
if (have_posts()) : while (have_posts()) : the_post(); ?>

Cómo hacer un la función que te devuelve un número al azar con máximo y mínimo

Personalemnte no tengo una función definida de sacar números al azar con un rango específico. Pues bueno harto de no tener un estandard aquí os dejo una de las possibiliadades, en Flash AS2, de una función random, ya que ésta si la ejecutas tal cual te da un valor entre 0 y 1 con algunos miles de decimales.

function rand(min:Number, max:Number):Number {
var randNum:Number = Math.round(Math.random()*(max-min))+min;
return randNum;
}

Luego sólo hace falta llamarlo, en este caso queromos que randomnum sea un valor aleatorio entre 10 y 100:

var randomnum:Number = rand(10,100);

Transiciones de los links en CSS3

La verdad es últimamente no hay que no aprenda algo nuevo y hoy es el día de las transiciones en links (cómo podéis ver en mi página principal http://mononelo.es). Es muy sencillo, pero aún al no estar unificados los códigos entres webkit, firefox y el normal y para ello tenemos que hacer lo de duplicar las propiedades por 4:

Continuar leyendo »

Publicar en twitter desde tu web (sin plugins) en PHP

Recientemente he estado experimentando con microsites (libres del uso de wordpress) y me he dado cuenta que necesitabapublicar en twitter cada vez que había interactividad y buscando he encontrado este código de PHP que va genial.

Continuar leyendo »

Utilizar Open Graph Protocol de Facebook

Cómo ya venía diciendo hace unos días en un post anterior, recientemente me he puesto a investigar MySQL en combinación con PHP y JavaScript. Los resultado son muy interesantes y es que tiene infinidad de aplicaciones, sobre todo cuando usamos las API de Facebook.

Acabo de desarrollar una aplicación llamada FacebookWall que te permite insertar tu nombre de usuario y añadir automáticamente tu miniatura de perfil a una pared.

Continuar leyendo »

Establecer una conexión con una base de datos de tu servidor usando PHP

18 de abr de 2011

Últimamente estoy haciendo grandes progresos en mi aprendizaje de todo lo relacionado con MySQL y PHP (por motivos profesionales e instigado por ganas personales), bien pues vamos a ver algunas cosillas en los próximos días. Por el momento un pequeño avance: Cómo establecer una conexión con una base de datos MySQL (en nuestro servidor) mediante PHP:

En el body deberemos poner:

<?php

$db_host = ‘localhost’;
$db_user = ‘usuario’; /*usuario de la base de datos*/
$db_pass = ‘mononelo123′; /*contraseña del usuario de la base de datos*/
$db_name = ‘basededatos’; /*nombre de la base de datos*/
$db_table = ‘tabla’; /*nombre de la tabla que queremos trabajar (si queremos usar más de una no hace falta más que añadir más variable de tablas*/

$con = mysql_connect($db_host,$db_user,$db_pass); /*conexión con la base de datos*/
if (!$con){
die(‘Could not connect: ‘ . mysql_error()); /*muestra el error (si lo hay)*/
}
mysql_select_db($db_name, $con);

/*Aquí tiene que ir lo que tengas que hacer con la base de datos*/

mysql_close($con);
?>

5 webs inspiradoras de HTML

08 de abr de 2011

Crafty 2010

Se trata de una web muy visual que domina a la perfección las transiciones entre apartados y que demuestra sin tapujos que está basada en un grid (un sistema de guías y cajas) muy evidente.
crafty2010.com

Continuar leyendo »

Cómo hacer una plantilla de wordpress

La verda es que podría reproducir el post de este fantástico blog para quedar bien y explicarlo en castellano, pero la verdad es que no lo haría tan bien como el original. Lo que sí os puedo prometer es, que ahora mismo estoy haciendo desde 0 mi propia plantilla de wordpress de portfolio llamada mymononelo y que cuando la acabe Continuar leyendo »

Dale estilos al texto seleccionado

Hoy en día ya hay pocas cosas a las que no puedes dar estilos por CSS. Se pueden cambiar los colores de las tipos, los fondos, los bordes, hasta importar fuentes y redondear bordes… se puede hacer de todo. Pues hoy os presento cómo cambiar los estilos de un texto seleccionado con el cursor:

Continuar leyendo »

Cómo hacer un fondo el Flash AS2 que se reesacale según cambia el tamaño de la ventana

10 de feb de 2011

Ayer un amigo me pidió ayuda con un tema de reescalado de un fondo. Siempre queda muy bien que el fondo se adapte a la pantalla (sin deformarlo y llenando la pantalla completa).Está hecho en AS2, si alguien lo necesita en AS3 lo puedo traducir, sólo hace falta que me lo pidáis. Ahí va el código con comentarios (abajo os podéis descargar los archivos tanto en CS5 cómo en CS4):

Continuar leyendo »

5 herramientas muy útiles para diseñadores

04 de feb de 2011

A continuación os presentaré 5 herramientas que he encontrado muy útiles si os dedicáis a tareas de diseño. Incluso creo que puede mejorar las comunicaciones entre directores de arte o diseñadores de interfaces web e implementadores web.

Continuar leyendo »

Cómo hacer manualmente un botón para compartir a menéame

11 de ene de 2011

Lo que tenéis que hacer es crear un link con los estilos para que parezca un botón (cada uno tiene su técnica). Yo he cogido una imagen de fondo con los diferentes estados del botón y luego lo que hago es mover el fondo según el estado del botón:

Ahora bien lo que me interesa más explicaros es cómo configurar el link. El link tiene que llamar a una url determinada:
Continuar leyendo »

La importancia de un buen Sitemap

10 de ene de 2011

En 2005, el motor de búsqueda Google lanzó el Sitemap 0.84 Protocolo, que estaría utilizando el formato XML.
Un sitemap es una manera de organizar un sitio web para identificar las URL y los datos en cada sección. Anteriormente, los sitemaps se orientaron principalmente a los usuarios de la web. Sin embargo, el formato XML de Google fue diseñado para los motores de búsqueda, lo que les permite encontrar los datos más rápido y más eficientemente.

Continuar leyendo »

Etiqueta Canonical

Los tres principales buscadores, Google, Yahoo y Microsoft siguen preocupados con el problema del contenido duplicado, y acaban de proponer una nueva etiqueta llamada “Canonical” para indicar cuál es el contenido principal y cuáles las URLs secundarias.

Hasta ahora, resolvíamos el tema de la “canonicalización de las URL” mediante el htaccess, utilizando el Rewirte Rule, sobre todo para los CMS que generan varias URLs para acceder al mismo contenido. Ahoratenemos esta nueva opción, útil sobre todo para aquellas webs que no disponen de htaccess o para páginas concretas sin tener que preocuparnos de nada más.

Continuar leyendo »

Importar fuentes sin que haga un salto

A menudo nos gustaría poder escribir en una web con una tipo determinada (no de sistema) sin necesidad de crear imágenes. Pues con CSS3 es posible, aunque la mayoría de sitios dan excesivo código. Yo mediante la experimentación he podido comprobar que hay algunas partes que si se omiten tarda menos en importar las tipos:

@font-face {
font-family: ‘CustomFont’;
src: url(‘ruta/de/la/fuente.otf’) format(‘formato’);
}

Continuar leyendo »

WordPress: Campos personalizados

28 de oct de 2010

A continuación os presento la manera de usar los campos personalizados de wordpress. Este código en concreto sirve para poner la fuente de dónde has sacado la información (muy útil para un blog de tendencias o de cosas que te gustan por la red). Ésto simplifica mucho el trabajo ya que tenemos sólo que poner de nombre campo: fuente-name, y a continuación el nombre de la fuente. Por otra parte también añadiremos otro que se va a llamar: fuente-url, que contiene la url del sitio de dónde hemos sacado la información. Espero que os sirva de ayuda, desde luego a mí sí.

Continuar leyendo »

Cómo hacer aparecer un div y hacerlo desaparecer en X segundos

16 de oct de 2010

¿Cómo podemos hacer que desaparezca una capa determinada con jQuery?

Pues así:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#theLayer’).fadeIn(1000);
setTimeout(“hide()”,13000);
});
function hide(){
$(‘#theLayer’).fadeOut(2000);
}
</script>

Continuar leyendo »

Iconos de Apple para webs

Hace un tiempo ya comentamos cómo añadir nuestras páginas favoritas a nuestro Springboard (Springboard es la pantalla de inicio del iPhone, dónde tenemos los iconos); pues bien ahora os voy a mostrar cómo personalizar estos iconos.
Para aquellos que no usen wordpress (o similares) y que tengan un plugin que ya haga eso, hay una forma muy fácil de personalizar el icono “apple-touch-icon”. Se trata simplemente de pegar en el <head> de nuestro HTML (PHP o similar) estas líneas de código:

Continuar leyendo »

Cómo mostrar el último tweet

06 de oct de 2010

A continuación podéis ver el código de cómo conseguir el último tweet de un usuario concreto:

<p>Last tweet: <ul id=”lasttweet”>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/mononelo.json?callback=twitterCallback2&count=1″></script>
</ul>
</p>

Continuar leyendo »

Páginas: 1 2 Siguiente