bitelemental

Aptana Studio, completo entorno de desarrollo web

 30/09/2009

Aptana Studio es, para mí, uno de los mejores entornos de diseño de aplicaciones web que he tenido el gusto de probar. Combina toda una serie de potentes herramientas de edición de HTML, CSS y JavaScript, junto con miles de plugins adicionales creados por la comunidad. Sus características principales son las siguientes:

• Es una herramienta multi-plataforma.
• De código abierto (opensource) y de uso libre.
• Se puede instalar como aplicación independiente o como plugin de Eclipse.
• Soporta las bibliotecas Javascript y Ajax (jQuery, Prototype, Mootools, YUI, Dojo…)  -esta opción me encanta-
• Permite la adición de plugins para PHP, Python o Ruby on Rails.
• Posibilidad de crear aplicaciones de escritorio con el plugin de Adobe AIR.
• Multi-vistas previas de los diferentes navegadores.
• Contiene herramientas adicionales para el tratamiento de bases de datos SQL.
• Depurador Javascript.
• …

Toda una serie de opciones que hacen de este entorno uno de los más completos dentro del mundo del diseño. ¿Qué entorno de desarrollo utilizáis o cuál es vuestra aplicación preferida para realizar trabajos de diseño?

»Descargar: Aptana Studio

Categoría(s): Herramientas, Web
 aptana studio, Diseño, Herramientas
  2 comentarios

Cheat Sheet o “chuleta” de jQuery 1.3

 25/09/2009

Para todos los fans de este framework, entre los que me incluyo, Antonio Lupetti (de Woork) ha dado a luz a una hermosísima “chuleta” con la que podremos realizar todos nuestros scripts de una forma más cómoda. En 6 páginas hace una referencia a toda la API del framework (en su versión 1.3) incluyendo detalles y descripciones. Y si a todo esto le sumamos un diseño elegante y simple, ¿qué más podemos pedir?

» Descargar: jQuery Visual Cheat Sheet

» Via: aNieto2k

Categoría(s): jQuery
 cheat, jQuery
  Sin comentarios

Recursos para el Webmaster (XVI): 70 packs de iconos tematizados

 22/09/2009

Cuantas veces hemos necesitado de un buen pack de iconos para nuestros diseños? Personalmente, no me gusta tener que ir colocando iconos de aquí y de allá, me gusta que todo diseño esté unificado, con un mismo estilo.

Gracias a PuntoGeek he encontrado esta página que recopila 70 paquetes de iconos tematizados para todo aquello que necesitemos . Como en todos los recursos, se recomienda atender a sus licencias de uso.

» Enlace: 70+ Awesome Free Icon Sets and Icon Collections for Web Designers

Categoría(s): Recursos, Web
 iconos, recursos
  Sin comentarios

Wallpapers del mes de Septiembre (2009)

 18/09/2009

Vuelvo a las andadas con las recopilaciones de fondos de pantalla de calendarios, todos ellos elaborados por Smashing Magazine. En esta ocasión os dejo con todos los wallpapers del mes de septiembre.

» Enlace: Desktop Wallpaper Calendars For September 2009

Categoría(s): Diseño, Wallpapers
 septiembre, Wallpapers
  Sin comentarios

Formulario de contacto en pop-up con jQuery

 

Buscaba exactamente esto y lo encontré. En la página oficial de Eric Martin, programador avanzado de aplicaciones web en Java, tenemos varios proyectos y plugins (todos ellos basados en jQuery) que podemos descargar. Entre los que más destacan podemos encontrar un formulario de contacto en el que la información se nos presenta en forma de ventana modal (o pop-up) y el envío de datos se realiza mediante Ajax.

Siempre viene bien tener a mano esta serie de plugins por si en el apartado “Contactar” de cualquier web queremos mostrar información adicional de contacto, que no un simple formulario. Por ejemplo, podríamos poner un enlace en el que se acceda a dicho formulario, pero también visualizar el teléfono de contacto y su correspondiente correo electrónico, todo en la misma página.

Os dejo con un ejemplo del formulario y el enlace a su descarga. He realizado la traducción del plugin al español para todo aquel que quiera utilizarlo en sus proyectos. Su configuración es muy trivial y no requiere de muchos cambios. Espero que os sirva de ayuda.

» Ejemplo de formulario de contacto en pop-up con jQuery | »Descargar

Puedes descargar todos los demás plugins, todos ellos realizados por Eric Martin a través de su página web de proyectos.

Categoría(s): jQuery, tutoriales
 formulario, jQuery, Plugins
  31 comentarios

Menú de navegación por pestañas con jQuery

 16/09/2009

Si el otro día ya enseñé un menú en el que se nos mostraba un texto descriptivo al realizar el hover sobre cada elemento, hoy os traigo el famoso menú de navegación por pestañas (tabs) realizado también con jQuery.

Aunque existen plugins que facilitan mucho toda esta tarea de desarrollo (jQuery UI), Héctor Guedea en su blog personal, elaboró un script que cumplía dicho objetivo de una forma muy trivial. Yo le he dado un toque personal sacándole más partido al método animate.

Este es el código jQuery:

<script language="javascript">
	$(document).ready(function() {
		$("#tabNav li.tab").click(function() {
 
			$(".current").removeClass('current');
			$(this).addClass('current');
			$(".container").animate({opacity: 0}, 500).hide('slow');
 
			var elemento = $(this).attr("title");
			$("#"+elemento).show('fast', function() {
				$(this).animate({opacity: 1000}, 'fast');
			});
		});
	});
</script>

Mi hoja de estilos:

body {
	font: 70% "Trebuchet MS", sans-serif;
}
 
#tabContainer {
	width: 400px;
	height:100px;
	padding: 5px;
	background: #ccc;
	border: 1px solid #999;
	margin-top: -6px;
}
 
#tabNav ul li {
	display: inline;
	padding: 5px 20px;
	cursor: pointer;
	background: #ccc;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
}
 
#tabNav2, #tabNav3 {
	display:none;
}
 
#tabNav li.current {
	border-bottom: 1px solid #ccc;
}

Y el HMTL asociado:

<div id="tabNav">
<ul>
	<li class="tab current" title="tabNav1">Tab 1</li>
	<li class="tab" title="tabNav2">Tab 2</li>
	<li class="tab" title="tabNav3">Tab 3</li>
</ul>
</div>
<div id="tabContainer">
<div id="tabNav1" class="container">
        	Texto para la <strong>primera</strong> pestaña. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit ut mi malesuada rhoncus. Integer consequat, justo ullamcorper egestas semper, elit mi pretium est, vitae consequat velit justo nec risus.</div>
<div id="tabNav2" class="container">
        	Texto para la <strong>segunda</strong> pestaña. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit ut mi malesuada rhoncus. Integer consequat, justo ullamcorper egestas semper, elit mi pretium est, vitae consequat velit justo nec risus.</div>
<div id="tabNav3" class="container">
        	Texto para la <strong>tercera</strong> pestaña. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel velit ut mi malesuada rhoncus. Integer consequat, justo ullamcorper egestas semper, elit mi pretium est, vitae consequat velit justo nec risus.</div>
</div>

» Ejemplo menú de navegación por pestañas con jQuery

Categoría(s): jQuery, tutoriales
 jQuery, menu, tutorial
  Sin comentarios

Convertir un div entero en enlace con jQuery

 15/09/2009

Interesante script que he descubierto en Intenta, en el que convertimos un bloque div completo en un enlace utilizando jQuery.

Código Javascript:

<script language="javascript">
 
	$(document).ready(function() {  
		$("#enlace").click(function() {
     		window.location = $(this).find("a").attr("href");
     		return false;
		});
	});
 
</script>

Código HTML:

<div id="enlace">
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum luctus mauris, vitae laoreet ligula pulvinar sed. Maecenas tincidunt egestas tortor ac dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae velit mattis justo faucibus ullamcorper. In quis est nec metus lobortis dapibus.
    <br />
    <br />
    <a href="http://bitelemental.es">Leer m&aacute;s [+]</a>
 
</div>

» Ejemplo convertir div en enlace con jQuery

Recuerda que puedes aprender más acerca de este framework a través de su página oficial.

Categoría(s): jQuery, tutoriales
 jQuery, tutorial
  Sin comentarios

Menú animado con descripción utilizando jQuery

 14/09/2009

Como ya todos sabréis, o si no os lo recuerdo, jQuery es un framework Javascript con el que podemos realizar infinidad de efectos para nuestros diseños web. En una entrada anterior ya expliqué como empezar a estudiar este lenguaje exponiendo algunos enlaces a páginas que pueden resultar de interés.

En mi práctica diaria aprendiendo esta estupenda librería, he llegado a elaborar un menú (basándome en unos ejemplos sencillos) bastante simple, pero que puede resultar interesante para algunos de vosotros. Se trata de un menú horizontal animado, en donde al realizar un hover sobre los elementos aparece una pequeña descripción. Dicha descripción representa el atributo “title” de la etiqueta “<a>” dentro del menú.

El código Javascript asociado es el siguiente:

<script type="text/javascript">
 
$(document).ready(function() {
	$(".menu a").append("<small></small>");
 
	$(".menu a").hover(function() {
		$(this).find("small").animate({opacity: "show", top: "40"}, "slow");
		var hoverText = $(this).attr("title");
	        $(this).find("small").text(hoverText);
	}, function() {
		$(this).find("small").animate({opacity: "hide", top: "5"}, "fast");
	});
});
</script>

Y la parte html del menú:

<ul class="menu">
	<li>
		<a href="#" title="Volver a la p&aacute;gina de inicio">Inicio</a>		
	</li>
	<li>
		<a href="#" title="Todo lo referente a mi trabajo">Acerca de</a>
	</li>
	<li>
		<a href="#" title="A trav&eacute;s de formulario web, e-mail o tel&eacute;fono">Contacto</a>
	</li>
</ul>

Y con un poco de CSS puedes tener un resultado como el que he conseguido yo. Puedes ver un ejemplo de su funcionamiento a través de este enlace:
» Ejemplo menú horizontal con descripción utilizando jQuery

Espero que les haya sido de ayuda.

Categoría(s): jQuery, tutoriales
 jQuery, menu, tutorial
  1 comentarios