Borchani.COM – Blog

Cada diseñador y desarrollador web debe tener un wireframe (Mockup o prototipo) bueno y fiable. La importancia de esta herramienta se diferencia entre los diseñadores y desarrolladores web, algunos de ellos la utilizan, otros no. En Borchani.COM utilizamos diversos mockups como muestras para el cliente. Read the rest of this entry »

¿Qué tecnologías apoyan a la Web 2.0?

El Web 2.0 no significa precisamente que existe una receta para que todas nuestras aplicaciones web entren en este esquema. Sin embargo, existen varias tecnologías que están utilizándose actualmente y que deberíamos de examinar con más cuidado en busca de seguir evolucionando junto al web.

Tecnologías que dan vida a un proyecto Web 2.0:

• Transformar software de escritorio hacia la plataforma del web.
• Respeto a los estándares como el XHTML.
• Separación de contenido del diseño con uso de hojas de estilo.
• Sindicación de contenidos.
• Ajax (javascript ascincrónico y xml).
• Uso de Flash, Flex o Lazlo.
• Uso de Ruby on Rails para programar páginas dinámicas.
• Utilización de redes sociales al manejar usuarios y comunidades.
• Dar control total a los usuarios en el manejo de su información.
• Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros.
• Facilitar el posicionamiento con URL sencillos.

Animated Drop Down Menu with jQuery es un bonito menú desplegable basado en jQuery y Css.Ocupa muy poco lugar y a la vez lograra llamar la atención de los usuarios. Tiene un gran parecido al menu de NETTUTS como a todos los de la red de Envato.

Ver Demo – Descarga

Uso:

1.Realizar las llamadas correspondientes desde nuestro encabezado < head>

JavaScript:

<script type=“text/javascript” src=“jsfiles/jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function () {
    $(“ul.menu_body li:even”).addClass(“alt”);
    $(‘img.menu_head’).click(function () {
    $(‘ul.menu_body’).slideToggle(‘medium’);
    });
    $(‘ul.menu_body li a’).mouseover(function () {
    $(this).animate({ fontSize: “14px”, paddingLeft: “20px” }, 50 );
    });
    $(‘ul.menu_body li a’).mouseout(function () {
    $(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
    });
});
</script>

2. Agregar estilo:

CSS:

ul, li{margin:0; padding:0; list-style:none;}
.menu_head{border:1px solid #998675;} 

.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}

3. Nuestro menu:

HTML:

<img src=”images/navigate.png” width=”184″ height=”32″ class=”menu_head” />
<ul class=”menu_body”>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Support Forums</a></li>
<li><a href=”#”>Gallery</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>

Mas Info Animated Drop Down Menu with jQuery,

Espero les sirva

Saludos, Joel