Los mejores Frameworks para tu sitio web

Los Frameworks web son una herramienta utilizada  para el desarrollo de sitios web.

Proporciona una esqueleto o una estructura para ser rellenado por el desarrollador y de esta manera crear una aplicación.

Algunas de las ventajas al utilizar frameworks son:

  • Ahorro de tiempo y trabajo
  • Facilita el entendimiento de código si se desarrolla en una aplicación por mas de una persona.
  • Es mas sencillo encontrar herramientas o librerías para el framework.
  • Facilita la funcionalidad en diferentes navegadores para que luzca similar.

Mientras que entre las desventajas se encuentran:

  • Limita la libertad de diseño
  • Fuerza a usar la semántica propia del framework

Para decir que framework utilizar, se necesita plantear que lenguaje de programación se utilizará y el tipo de aplicación que se realizará.

A continuación te presentamos una lista de los framework, mas utilizados por los desarrolladores

LARAVEL

Laravel es uno de los mejores Frameworks de desarrollo PHP utilizados para desarrollar una aplicación web.

Es una aplicación web con una sintaxis expresiva y elegante. Algunos de los beneficios para los usurarios son:

  • Proporciona un serie de instalaciones a los desarrolladores
  • Cuenta con bibliotecas orientadas a objetos
  • Seguridad, contraseña y cifrado
  • Migración de bases de datos
  • Almacenamiento en cache y varias características mas.

DJANGO

Django es un framework gratuito de código abierto para el desarrollo de aplicaciones web, escrito en Python, un conjunto de componentes que te ayudan a desarrollar sitios web de manera mas rápida y fácil.

Este framework fue diseñado para ayudar al llevar las aplicaciones desde el concepto hasta su finalización, es tranquilo y seguro evitando errores en la seguridad ademas Django es escalable.

 

ANGULAR.JS

Un framework basado en JavaScript, que permite ampliar el vocabulario HTML para la aplicación. El entorno resultante es expresivo, legible y rápido de desarrollar.

AngularJS es un conjunto de herramientas completamente extensible. Cada característica se puede modificar o reemplazar para adaptarse a su flujo de trabajo de desarrollo.

METEOR

Meteor es una framework javascript diseñada para agilizar el proceso de desarrollo de aplicaciones.

Las ventajas de usar este framework son:

  • Meteor simplifica el proceso de desarrollo al ofrecer la posibilidad de crear una aplicación solo con Javascript.
  • Funciona a base de modulos.
  • Es una framework sencilla de manejar, se puede aprender a manejar en cuestión de horas.
  • Para comenzar a utilizar Meteor se necesita de un nivel básico de JavaScript.
  • Para desarrolladores más experimentados en JavaScript, Meteor les da la oportunidad de escribir código y ver resultados de manera inmediata.
  • Es un framework de respuesta rápida, de manera que todos los elementos se actualizan automáticamente.
  • Por ultimo, cuanta con el apoyo de una gran comunidad activa, con la que se pueden resolver dudas que surjan respecto al funcionamiento de meteor.

RUBY ON RAILS

Es un entorno de desarrollo web de codigo abierto que permite escribir un código eficaz, evitando que se repita.

Ruby es un lenguaje de scripts, multiplatarfoma orientado a objetos.

Entre las carecterísticas del lenguaje se encuentran:

  • Posibilidad de hacer llamadas directamente al sistema operativo.
  • Muy potente para el manejo de cadenas y expresiones regulares.
  • No se necesita declarar las variables.
  • La sintaxis es simple y consistente.
  • Gestión de memoria automática.
  • Todo es un objeto.
  • Métodos Singleton.

Rails permite crear aplicaciones con acceso a bases de datos como lo son Twitter, Scribd, Hulu, Soundcloud, xing, github entre otras.

 

YII

Es un framework PHP de alto rendimiento, y el mejor para desarrolar aplicaciones web 2.0, permite la maxima reutilizacion y asi acelerar el proceso de desarrollo.

El requerimiento para poder utilizar este framework es tener un servidor web con soporte PHP 5.1.0 o superior, ademas del entendimiento de la programación orientada a objetos.

Como la mayoría de los frameworks PHP, Yii es un framework MVC (modelo-vista-controlador) y sobresale del resto por su eficiencia y gran cantidad de características y su clara documentación

 

Ahora ya conoces algunos frameworks que te pueden ayudar a facilitar el desarrollo de un sitio web.

 

Creación de menú (UL) desde cero – 3 Submenus.

En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.

Comencemos….

1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a>
                    <!– este es el submenu –>                    
                    <ul class=”submenu”>
                        <li><a href=”#Subseccion1″>SubSeccion1</a></li>                    
                        <li><a href=”#Subseccion2″>SubSeccion2</a></li>
                        <li><a href=”#Subseccion3″>SubSeccion3</a></li>
                    </ul>
                    <!– Termina el submenu –>                
                </li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.

/*Estilos para submenu UL*/
            .submenu
            {
                display:none; /*No mostrar*/
            }

/*Estilos para los SubmenuItems    */
            .submenu li
            {
                background: #a921A6;   /*Color de fondo para el menu*/                
                width:140px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }

3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.

/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
            .menu li:hover > .submenu
            {
                display: inline-block;            /*Mostrar submenu*/
            }        

 

Ahora, tenemos un menú parecido a este:

Menu Ul

En el siguiente post veremos como hacer un sticky menú

Gracias

Como utilizar un Sprite con CSS

Esta técnica ha sido utilizada desde hace mucho tiempo, principalmente en juegos para simular movimiento a los elementos (gráficos).

Los sprites en el desarrollo de páginas web, evita que para cada icono incorporado como imagen se haga una petición y transferencia entre cliente y servidor, es decir, si mi página tiene un conjunto de iconos para cada icono se hace una petición de transferencia de imagen, entonces con esta técnica, todas las imágenes de los íconos están en una sola imagen, de manera sólo se transfiere una sola imagen al cliente (navegador), evitando así un sinnúmero de peticiones y transferencias para cada icono de la página web.

Una primera opción es crear las imagen con los íconos en una sola linea vertical, como se muestra en al siguiente imagen:
css-sprites-vertical
esta distribución vertical es la forma más sencilla de implementar porque solo nos preocupamos por el alto entre cada gráfico, el HTML se vería así:

<p id=”l1″>Las calculadores del siglo pasado</p>
<p id=”l2″>Sonido desactivado</p>
<p id=”l3″>Unidad de CD/DVD</p>
<p id=”l4″>Cara con lentes</p>

El CSS de la siguiente manera:

#l1, #l2, #l3, #l4 {
    padding-left: 32px;
    height: 32px;
    line-height: 32px;
    background-image:url(‘css-sprites-vertical.gif’);
    background-repeat: no-repeat;
}
#l1 {background-position: 0px 0px;}
#l2 {background-position: 0px -32px;}
#l3 {background-position: 0px -64px;}
#l4 {background-position: 0px -96px;}

donde se declaran algunos aspectos generales, la separación del margen izquierdo (padding), el alto específico (height), la misma imagen de fondo (con la distribución vertical de los gráficos), por último la posición del background de manera estratégica que corresponde al gráfico que se quiere mostrar.

Un inconveniente al utilizar imágenes como sprites donde tienen todas las imágenes ordenadas verticalmente, es cuando son demasiadas imágenes, entonces se propone otra alternativa, la cual establece una sola imagen que contiene gráficos (imágenes) tanto vertical como horizontalmente, como lo muestra la siguiente imagen.

css-sprites

Esto tiene implicaciones, la primera es que el código HTML tiene que cambiar, es necesario hacer uso de un elemento más que servirá para delimitar el espacio vertical y horizontal del background que se mostrará, los elementos que pueden servir para trabajar esta técnica son div, p o img.

En este caso mostraré el ejemplo usando un elemento img, el código HTML quedaría de la siguiente forma:

<p id=”l5″><img src=”pixel.png” alt=”” />Las calculadores del siglo pasado</p>
<p id=”l6″><img src=”pixel.png” alt=”” />Tecla a con acento</p>
<p id=”l7″><img src=”pixel.png” alt=”” />Signo de música</p>
<p id=”l8″><img src=”pixel.png” alt=”” />gráfico de copiar</p>

La imagen pixel.png es una imagen de 1px de alto por 1px por ancho de manera que no interfiera en tapar el background del elemento web.

Para este ejemplo el CSS quedaría así:

#l5 img, #l6 img, #l7 img, #l8 img{
    height: 32px;
    width: 32px;
    background-image: url(‘css-sprites.gif’);
    background-repeat: no-repeat;
    vertical-align: middle;
}

#l5 img{background-position: 0px 0px;}
#l6 img{background-position: -32px 0px;}
#l7 img{background-position: -32px -32px;}
#l8 img{background-position: -64px -64px;}

de igual manera se define el ancho, alto del espacio del gráfico, una única imagen de fondo para el elemento img y de manera personalizada el espacio de la imagen que se mostrará.

Ahora a probar!.

Saludos

Nota: las imágenes utilizadas no son propias, son imágenes tomadas de otros sitios en internet que también las utilizan para ejemplificar el uso de sprites.

Fuentes optimizadas para web

Desde que apareció @font-face en CSS el aspecto de las páginas web cambio. Ahora ya no tenemos que usar solo las aburridas fuentes que por defecto traen los navegadores, ahora podemos usar un amplio conjunto de fuentes y seleccionar el conjunto de fuentes que van de acuerdo al estilo que le queremos dar a nuestra web.

Google ofrece un servicio llamado Google Fonts donde podemos seleccionar entre un amplio catalogo de fuentes disponibles y optimizadas para web.

fuentes

Lo que tenemos que hacer es seleccionar las fuentes que vamos a utilizar y dar clic en el boton Add to Collection. Cada vez que realicemos esta acción las fuentes se irán agregando a nuestra colección.

fuentes2

Una vez que tenemos todas las fuentes que vamos a utilizar damos clic en la opción Use, que se encuentra en la parte derecha de la colección de fuentes. Esta acción nos llevará a otra pantalla donde nos muestra un resumen de las fuentes seleccionadas. Algunas fuentes están diseñadas en mas de un ancho, si este es el caso será necesario seleccionar cuales estilos son los que nos interesan. Por default todas las fuentes traen el ancho normal (400).

Como un dato extra Google Fonts nos brinda información sobre el impacto que tendrá en nuestro sitio el uso de las fuentes. Recordemos que las fuentes son un recurso mas de la web y como tal implica al menos una solicitud al servidor.

fuente3

Una vez que checamos que todo está bien procedemos a utilizar las nuevas fuentes. Existen 2 alternativas, la primera es descargar las fuentes para incluirlas directamente en nuestros proyectos. Se descargará un archivo .zip que incluye una carpeta por fuente y dentro de cada una de estas carpetas se encuentran los archivos .ttf.

La segunda forma es utilizar directamente el servicio de Google Fonts y así evitarnos hacer la descarga y aprovechar los beneficios de la carga en paralelo de los navegadores al descargar las fuentes desde fonts.googleapis.com. De esta segunda forma existen a su vez 3 formas de utilizarlas, la primera es agregando una hoja de estilos.

<link href=’http://fonts.googleapis.com/css?family=Lobster|Tangerine|Dancing+Script|Crafty+Girls’ rel=’stylesheet’ type=’text/css’>

La segunda es utilizando @import

@import url(http://fonts.googleapis.com/css?family=Lobster|Tangerine|Dancing+Script|Crafty+Girls);

La tercera forma es utilizando JS

<script type=”text/javascript”>
  WebFontConfig = {
    google: { families: [ ‘Lobster::latin’, ‘Tangerine::latin’, ‘Dancing+Script::latin’, ‘Crafty+Girls::latin’ ] }
  };
  (function() {
    var wf = document.createElement(‘script’);
    wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
      ’://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
    wf.type = ‘text/javascript’;
    wf.async = ‘true’;
    var s = document.getElementsByTagName(‘script’)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Cada una de estas forma genera una llamada al API de Google que se encarga de generar el código necesario para poder utilizar las fuentes. Para las fuentes que seleccionamos para este artículo el código generado fue el siguiente.

@font-face {
  font-family: 'Crafty Girls';
  font-style: normal;
  font-weight: 400;
  src: local('Crafty Girls'), local('CraftyGirls'), url(http://themes.googleusercontent.com/static/fonts/craftygirls/v3/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: local('Dancing Script'), local('DancingScript'), url(http://themes.googleusercontent.com/static/fonts/dancingscript/v4/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
}
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), url(http://themes.googleusercontent.com/static/fonts/lobster/v6/MWVf-Rwh4GLQVBEwbyI61Q.woff) format('woff');
}
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v4/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Una vez que agreguemos cualquiera de las formas descritas anteriormente a nuestro proyecto estamos listos para usar las fuentes. Solo es necesario agregar la propiedad font-family en CSS a los elementos que usaran la fuente.

font-family: ‘Lobster’, cursive;
font-family: ‘Tangerine’, cursive;
font-family: ‘Dancing Script’, cursive;
font-family: ‘Crafty Girls’, cursive;

Web icon fonts

Cada vez es mas común el uso de iconos en páginas web. La forma tradicional de trabajar estos iconos era usando pequeñas imagenes. Algunos problemas de trabajarlo de esta forma es que si tu web la trabajas para dispositivos con una mayor resolución (por ejemplo pantallas de retina) tus iconos se podian ver pixeleados, otro problema es que cada imagen es una solicitud al servidor, lo que provoca muchas peticiones web, esto en parte se podia solucionar usando sprites de imagenes.

Una alternativa de solución para este problema es usar icon web fonts, es decir manejar los iconos como si fueran texto (cada icono es un caracter del conjunto de caracteres que componen la fuente). Los beneficios que nos da usar esta técnica es que los iconos ahora son vectoriales 😀 podemos cambiar su tamaño usando css (css:font-size) y su color (css:color) y todo esto sin perder calidad y hablando sobre peticiones al servidor solo se realiza una al invocar la fuente que contiene el conjunto de iconos.

Hay muchos sitios que ofrecen este tipo de fuentes, yo estoy utilizando fontawesome que proporciona un conjunto de iconos bastante amplio y es fácil de utilizar en conjunto con bootstrap. Ademas nos proporciona un cdn. Fontawesome proporciona ejemplos muy claros sobre como utilizarlo.

Esta técnica se basa en el “shadow dom” y utiliza un rango de caracteres reservado para propositos especiales.

 

 

 

¡¡Bienvenidos colaboradores!!

Le damos la más cordial bienvenida a nuestros colegas del Grupo Desarrollador SLP

Que de ahora en adelante se unen como colaboradores de este blog con aportaciones sobre nuevos temas y enriquecimiento de los actuales, sin duda cada una de las entradas generadas por estos nuevos colaboradores enriquecerán el contenido de sitio y apoyará a todos aquellos que buscan tips, trucos, códigos y experiencias!.

Bienvenidos y a compartir!

@chuy_rodriguez & @igarperez