Blog de José Rico, diseño web, diseño gráfico, Onil (Alicante) » Diseño web http://www.joserico.com/blog Hola, en este blog encontrarás apuntes, bocetos y demás trabajos inconclusos. Sun, 29 Jan 2012 19:38:43 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Plexola, comparte lo que quieras con tus amigos http://www.joserico.com/blog/diseno-web/plexola-comparte-lo-que-quieras-con-tus-amigos/ http://www.joserico.com/blog/diseno-web/plexola-comparte-lo-que-quieras-con-tus-amigos/#comments Wed, 15 Jun 2011 19:34:21 +0000 José Rico http://www.joserico.com/?p=2177
El pasado mes de junio tuve el placer de trabajar junto a la gente de la Red Social de Microblogging llamada Plexola diseñando y maquetando su front-end. La verdad que fue una experiencia muy positiva. Formación y ganas veo que sobran así que espero que el proyecto siga adelante.

Como ellos dicen Plexola es:

Plexola es la forma más sencilla de compartir con tus amigos lo que quieras, las fotos y videos de la última fiesta en la que estuviste, esa frase de un amigo que te ha gustado, o esa canción que no consigues sacarte de la cabeza. Además puedes compartir automáticamente el contenido que desees a Faceboook y Twitter. Podrás compartir el contenido de otros blogs tan fácilmente como pulsando un botón.

Os invito a todos a probarla y a reportar posibles bugs o errores. Mi plexboard, por si os interesa, es http://code.plexola.com

Visita plexola.com

]]> http://www.joserico.com/blog/diseno-web/plexola-comparte-lo-que-quieras-con-tus-amigos/feed/ 1 Botón Facebook Connect puro CSS3 (sin imágenes) http://www.joserico.com/blog/diseno-web/boton-facebook-connect-puro-css3-sin-imagenes/ http://www.joserico.com/blog/diseno-web/boton-facebook-connect-puro-css3-sin-imagenes/#comments Thu, 12 May 2011 21:10:37 +0000 José Rico http://www.joserico.com/?p=2109 Hace poco salió en el trabajo la posibilidad/necesidad de realizar el botón de Facebook Connect y como el trabajo se está desarrollando, lo que se puede, en HTML5 y CSS3 pensé que no necesitábamos ninguna imagen para poder realizar el botón ya que las nuevas funcionalidades de CSS3 permiten hacer el botón sin problemas. Al final el botón se realizó con imágenes por motivos legales. A continuación pongo el código CSS y el resultado para que veáis la versión 3 tiene unas nuevas posibilidades muy interesantes.

el resultado final:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Botón facebook connect puro CSS3</title>
<style type="text/css">
	.facebook_btn{
		width:192px;
		height:39px;
		border:1px solid #375B95;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background-color: #425C97;
		background: -moz-linear-gradient(#6D82AD,#425C97);
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#6D82AD),  to(#425C97));
		cursor:pointer;
		clear:left;
	}
	.icono, .texto{
		border:1px solid #657AAF;
		border-top: 1px solid #99A6D0;
		height:37px;
	}
	.icono .f1, .icono .f2, .icono .f3, .icono .f4{
		position: absolute;
		background-color:#FFFFFF;
	}
	.icono .f1{
		width:10px;
		height:4px;
		top:4px;
		right:5px;
		-moz-border-radius-topleft:5px;
		border-top-left-radius: 5px;
	}
	.icono .f2{
		width:5px;
		height:6px;
		top:8px;
		right:10px;
	}
	.icono .f3{
		width:14px;
		height:5px;
		top:14px;
		right:5px;
	}
	.icono .f4{
		width:5px;
		height:15px;
		bottom:3px;
		right:10px;
	}
	.icono{
		border-right: 1px solid #375B95;
		border-radius: 5px 0 0 5px;
		width:40px;
		float:left;
		position:relative;
	}
	.texto{
		border-radius: 0 5px 5px 0;
		width:148px;
		float:left;
		font: bold 20px Arial, Helvetica, sans-serif;
		text-shadow: 1px 1px 1px #3A538C;
		text-align:center;
		color:#FFFFFF;
		letter-spacing: 1px;
		line-height: 37px;
	}
</style>
</head>

<body>
<div class="facebook_btn">
	<div class="icono">
    	<div class="f1"></div>
        <div class="f2"></div>
        <div class="f3"></div>
        <div class="f4"></div>
    </div>
    <div class="texto">
    	Connect
    </div>
</div>
</body>
</html>

Como veis el resultado es un botón sin imágenes. También el icono de facebook está echo en CSS puro sin una sola imagen. Obviamente se necesita un navegador moderno con soporte CSS3 como Mozilla Firefox o Chrome.

Ver ejemplo de botón en una ventana externa

]]> http://www.joserico.com/blog/diseno-web/boton-facebook-connect-puro-css3-sin-imagenes/feed/ 0 Detalle sobre web 20 jornadas http://www.joserico.com/blog/diseno-web/detalle-sobre-web-20-jornadas/ http://www.joserico.com/blog/diseno-web/detalle-sobre-web-20-jornadas/#comments Sat, 06 Mar 2010 21:12:38 +0000 José Rico http://www.joserico.com/blog/?p=1403

A raíz de una consulta en el foro de ADWA he vuelto ha visitar las web que preparé para el trabajo que realizamos entre la clase para las 20 jornadas de diseño de l’Escola d’Art i Superior de Disseny d’Alcoi. La web en cuestión es simple ya que no era un proyecto comercial pero no estaba del todo mal. La cuestión es que, como diseñador gráfico y programador, voy dejando mensajes ocultos, chorradas, dibujos, mi nombre, etc. en casi todos los trabajos que realizo, así puedo demostrar que el trabajo es mío. Cuando me acuerdo y tengo tiempo, claro! No se si a vosotros os pasa!
En los videojuegos se programan espacios para ejecutar trucos, niveles extra,… y de ahí parte mi idea.

La web en cuestión es www.easdalcoi.es/sites/20jornadas/ y para ver los créditos hay que pulsar en cualquier menú, pulsar espacio y escribir creditos (sin acento).

pulsa cualquier menú + space + creditos

]]> http://www.joserico.com/blog/diseno-web/detalle-sobre-web-20-jornadas/feed/ 0 Alguien se apunta al ADWA Casual Conference en Alicante? http://www.joserico.com/blog/cosas-que-pasan-a-diario/alguien-se-apunta-al-adwa-casual-conference-en-alicante/ http://www.joserico.com/blog/cosas-que-pasan-a-diario/alguien-se-apunta-al-adwa-casual-conference-en-alicante/#comments Mon, 26 Oct 2009 22:38:44 +0000 José Rico http://www.joserico.com/blog/?p=1160 casual conference adwa alicante

Este sábado 31 de octubre ADWA organiza una “Casual Conference” o, como ellos describen:
La forma de estar todos más unidos de cara al futuro. Serán encuentros Casuales donde poder intercambiar opiniones con respecto a nuevas tecnologías y al futuro de la asociación, muy alejado del formato típico de conferencia.
La conferencia es de 10:00 a 13:00 más o menos.
Me parece una buena idea así que yo me apunto. Si alguien se quiere venir que me avise.
Más información en ADWA, Asociación Desarrolladores Web Alicante

]]> http://www.joserico.com/blog/cosas-que-pasan-a-diario/alguien-se-apunta-al-adwa-casual-conference-en-alicante/feed/ 0 Subflash 09 en Alicante http://www.joserico.com/blog/diseno-web/subflash-09-en-alicante/ http://www.joserico.com/blog/diseno-web/subflash-09-en-alicante/#comments Sun, 30 Aug 2009 15:42:05 +0000 José Rico http://www.joserico.com/blog/?p=1050 Es hora de escribir el post sobre los talleres subflash 09.
Al igual que el año pasado los de Subflash han organizado unos talleres relacionados con el diseño gráfico y el diseño web.
Este fin de semana hemos bajado Pablo y yo a los Talleres y ponencias que Subflash organizaba en la Villa Universitaria en San Vicente y se han desarrollado tal y como esperaba, geniales!! xD

Las ponencias han sido las de AIR con JavaScript donde Andrés Cayón nos ha mostrado cómo crear aplicaciones funcionales en html a Air (aplicaciones de escritorio).
La segunda ponencia del sábado fue “Nandrolona mobile” que nos brindaban Raúl Jiménez (elecash! te conozco por tu web pero tu nombre no me sonaba, mucho gusto!) y Marcos González y donde nos explicaron cómo funcionaba el emergente mundo de las webs adaptadas a la telefonía móvil y las complicaciones y soluciones que tenía esta tecnología.
La tercera y última ponencia del sábado me dejaba un buen sabor de boca ya que se trataba de animación flash y nada menos que contada por Sergio R. Vandulciel dedicado actualmente a esta actividad. Los que visitéis mi blog sabréis de mi afición por la animación flash pero, a decir verdad, nunca había hecho un proyecto de grandes dimensiones ya que me faltaban algunos consejos como que para exportar a vídeo los clips de película se crean como gráficos y que se reemplazan los clips quedando fijados por el mismo punto de anclaje. Gracias tío me has abierto los ojos!.
El primer ponente del domingo por la mañana era Alejandro Sánchez (otro de los que conozco por la web, fenómeno!) que nos enseñaba los adelantos sobre el Papervision y la realidad aumentada según él “un infierno”!
Y por último la ponencia de un fenómeno en After Effects, Jorge Mochón que nos dejaba de piedra con lo que este magnífico programa de post-producción de video conseguía realizar con unos cuantos clicks y unos pocos minutos.

En general ha sido un fin de semana provechoso. Espero que estos eventos se sigan realizando y animo a todo el mundo interesado en el diseño web y las últimas tecnologías aplicadas en él que asistan el próximo año! Nos vemos.

Animación flash ir y javascript Webs para móviles Subflash 09 Gentesubflash 09 After Effects CS4 CDMon Papervision 3D y RA (realidad aumentada) gente subflash Gente subflash ]]> http://www.joserico.com/blog/diseno-web/subflash-09-en-alicante/feed/ 0 Este blog cumple dos años http://www.joserico.com/blog/cosas-que-pasan-a-diario/este-blog-cumple-dos-anos/ http://www.joserico.com/blog/cosas-que-pasan-a-diario/este-blog-cumple-dos-anos/#comments Sun, 15 Mar 2009 21:58:32 +0000 José Rico http://www.joserico.com/blog/?p=944 Parece ser que el blog cumple dos años. Desde que tengo este dominio han pasado multitud de diseños. Desde diseños web en html, pasando luego por el css, el flash y actualmente un blog de wordpress. Dos años con el blog es todo un récord para mí y espero seguir escribiendo mucho tiempo más.

]]> http://www.joserico.com/blog/cosas-que-pasan-a-diario/este-blog-cumple-dos-anos/feed/ 0 Web de la Onilparty 2009, party informática de Onil http://www.joserico.com/blog/diseno-web/web-de-la-onilparty-2009-party-informatica-de-onil/ http://www.joserico.com/blog/diseno-web/web-de-la-onilparty-2009-party-informatica-de-onil/#comments Sun, 28 Sep 2008 21:13:56 +0000 José Rico http://www.joserico.com/blog/?p=684
Captura web onilparty 2009

Captura web onilparty 2009

He estado este fin de semana con la web de la fiesta informática de Onil y ya parece que va tomando forma. La estructura era muy antigua y la he tenido que modificar casi que toda. Todavía le falta contenido, validar el CSS y el XHTML, ajustarla para que se vea bien en el explorer 6 y alguna cosa más pero ya tiene color.

Ver web de la onilparty

]]> http://www.joserico.com/blog/diseno-web/web-de-la-onilparty-2009-party-informatica-de-onil/feed/ 2 Archivo de webs de internet http://www.joserico.com/blog/diseno-web/archivo-de-webs-de-internet/ http://www.joserico.com/blog/diseno-web/archivo-de-webs-de-internet/#comments Thu, 11 Sep 2008 11:40:21 +0000 José Rico http://www.joserico.com/blog/?p=613 Hoy he encontrado una página en internet donde he podido consultar las primeras webs que hice allá por el 2000. Que tiempos aquellos!.
La web en cuestión se llama www.archive.org y se anuncia como archivo de internet. Tiene almacenada la portada principal de casi todas las páginas web desde principios de toda esta movida (lástima que por aquél entonces me gustara hacer intros cutres en flash y no se guardaran las portadas).

Algunas de mis primeras webs con dominio propio (con subdominios gratis mucho antes)

1. www.tomatemazo.com Sólo sale el código html y la portada pero son lo mejor. Lo hice con el webfacil Pro, casi na. (Mi primer dominio propio. No podría haber pillado google.com o viajes.com)
2. www.comunidad-mosca.com lo que queda de la web Esta fue una web de humor y donde había mucho flash.
3. www.creditec.net Intro. Web donde nos anunciábamos mi hermana y yo como diseñadores y tal.
También se pueden ver anteriores versiones de una misma web, en este caso joserico.com:
Versión anterior

Lo que deduzco es que llevo ya casi 8 años haciendo webs. Mucho tiempo!

]]> http://www.joserico.com/blog/diseno-web/archivo-de-webs-de-internet/feed/ 0 Creando un patrón, fondo o mosaico para tu web http://www.joserico.com/blog/diseno-web/creando-un-patron-fondo-o-mosaico-para-tu-web/ http://www.joserico.com/blog/diseno-web/creando-un-patron-fondo-o-mosaico-para-tu-web/#comments Wed, 03 Sep 2008 11:21:20 +0000 José Rico http://www.joserico.com/blog/?p=530 Demostración de la aplicación del patrón

Demostración de la aplicación del patrón

Este minitutorial lo he creado en vídeo. Espero que se vea un poco claro lo que quiero conseguir ya que no tiene comentarios. El truco está en crear tu dibujo original (más o menos) e ir copiando en los bordes del lienzo el mismo objeto para que al repetirse quede perfecto. De todas maneras si hay alguna duda escribid un comentario y os respondo.

Bueno, ahora viendo el vídeo no me aclaro ni yo. Además para ahorrar un poco de time he comprimido demasiado el vídeo y no se ven las cosas muy claras. Voy a tener que instalarme el micro en el PC… sorry.

Por cierto el patrón en si se puede encontrar en www.amosaico.com listo para descargar y utilizar.

]]> http://www.joserico.com/blog/diseno-web/creando-un-patron-fondo-o-mosaico-para-tu-web/feed/ 0 Google ranking para conocer tu posición en google por palabras clave http://www.joserico.com/blog/programacion/google-ranking-para-conocer-tu-posicion-en-google-por-palabras-clave/ http://www.joserico.com/blog/programacion/google-ranking-para-conocer-tu-posicion-en-google-por-palabras-clave/#comments Sun, 31 Aug 2008 22:15:46 +0000 José Rico http://www.joserico.com/blog/?p=484 He mirado el reloj y pensaba que no me costaría mucho hacer esta otra pequeña aplicación que calcula tu posición en google por determinadas palabras clave o keys de búsqueda.
Sólo tienes que insertar un parámetro de búsqueda por ejemplo diseño y tu web con las www, por ejemplo www.joserico.com y te dirá que posición ocupa en google (calcula si es menor de la posición 100).

Google page ranking

Google page ranking

Visitar el google ranking o ver más proyectos

]]> http://www.joserico.com/blog/programacion/google-ranking-para-conocer-tu-posicion-en-google-por-palabras-clave/feed/ 0