5 Frameworkweb UIjavascript

I.
Framework web UI javascript

1. jQuery UI
jQuery UI es un complemento que permite implementar componentes diversos para generar

interfaces de usuario en pginas web, adems de otras funcionalidades bsicas para crear
aplicaciones web enriquecidas. Como su propio nombre indica, est basado en el popular
framework Javascript y podemos encontrar links, explicaciones, as como demos y
descargas a partir del sitio web oficial de jQuery.
1.1. Caractersticas
Mens en acorden
Barras de progreso
(progress bars)
Botones y casillas de verificacin
(checkbox)
Cuadros de dilogo que se superponen
Mecanismo para Autocompletar
Mecanismo de pestaas para facilitar la visualizacin de la pgina
Iconos personalizados
Controles
deslizantes (sliders)
Calendario (Cosa compleja de manejar)
Bsicamente en
esto se centra este plugin y la verdad es bastante lo que se
puede hacer con esta extensin de la librera jQuery. Vamos a continuar con un
ejemplo para esto yo utilizare jsFiddle ya que cuenta con la librera jQuery y con
el plugin jQuery UI para experimentar de manera rpida y casual.
1.2. Cdigo fuente y Ejemplo
etiqueta:
<div>
<script>
$("#tabs").tabs();
</script>
El mtodo tabs() con respecto a la documentacin oficial se utiliza de dos
formas:
<ul>
<li><em>$(selector, contexto).tabs (opciones)</em></li>
<li><em>$(selector, contexto).tabs ("accin", parmetros)
</em></li>
</ul>
la maner ms bsica es:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src = "./jquery/js/jquery-1.7.1.min.js"></script>
<script src =
./jquery/js/jquery-ui-1.8.18.custom.min.js></script>
<link rel=stylesheet type=text/css
href=./jquery/css/smoothness/jquery-ui-1.8.18.custom.css />
<style type="text/css">
li.ui-state-default{
font-size : 10px;
}
div.ui-tabs-panel{
font-size : 15px;
font-family : georgia;
font-style : italic;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>

</ul>
<div id="tab1">HTML5facil BLog de la comunidad HTML5</div>
<div id="tab2">Otro Hola Mundo pero en jQueryUI</div>
<div id="tab3">Lorem ipsum</div>
<div id="tab4">Contenido pestaa 4</div>
</div>
<script> $("#tabs").tabs (); </script>
</body>
</html>
y como resultado se debe tener
1.3.Conclusiones
Mientras este en etapa de aprensin de conocimientos sugiero NO utilizar
los CDN de jQuery UI en Google, pues es muy importante que se entienda
para que funciona cada archivo y cuando ya tengas mucha ms idea de
cmo funciona el plugin o ya ests en etapa de despliegue, podrs usarlos
adecuadamente.
2. Bootstrap
Bootstrap es el lder indiscutible entre los marcos disponibles en la actualidad. Dada

su enorme popularidad, que sigue creciendo cada da, usted puede estar seguro de
que este maravilloso juego de herramientas no te dejar, ni te deja en paz en su
camino a la construccin de sitios web de xito.
1.1. Caractersticas
Creadores: Marcos Otto y Jacob Thornton .
Lanzamiento: 2011
Versin actual: 3.3.1
Popularidad: de 75.000 estrellas en GitHub
Descripcin: "Manos a la Obra es el ms popular de HTML, CSS y
JavaScript marco para el desarrollo de los primeros proyectos de
respuesta, mviles en la web."
Conceptos / principios bsicos: RWD y el primer mvil.
Tamao de marco: 145 KB
Preprocesadores: Menos y Sass
Alternativa: S
Modular: S
A partir de plantillas / diseos: S
Conjunto de iconos: Glyphicons conjunto Medianos
Extras / Complementos: Ninguno incorporada, en muchos terceros
plug-ins estn disponibles.
Esos componentes exclusivos: Jumbotrn

Documentacin: Bueno
Personalizacin: Bsica GUI Personalizador. Por desgracia tiene que
introducir manualmente los valores de color, porque no hay selector de
colores disponibles.
Soporte de los navegadores: Firefox, Chrome, Safari, Internet Explorer 8 +
(que necesita Respond.js para IE8)
Licencia: MIT
2.2.cdigo fuente y ejemplo

<h1>Buttons</h
1>
</div>
<p>
<button type="button" class="btn btn-lg
btn-default">Default</button>
btn-primary">Primary</button>
btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
btn-warning">Warning</button>
btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-link">Link</button>
</p>
3. Semantic UI
es un esfuerzo continuo para hacer construccin de sitios web mucho ms

semntica. Utiliza los principios del lenguaje natural, con lo que el cdigo mucho
ms legible y comprensible.
Este framework orientado al diseo de interfaces ofrece un paquete de templates
entre los que podemos elegir el estilo que mejor se adapte a nuestra interface,
todos los elementos prediseados CSS ofrecen soporte responsivo haciendo aun
ms fcil la integracin con tu interface.
Por supuesto Semantic UI al ser un proyecto Open Source es completamente

gratuito, abajo les dejo una imagen de algunos de los elementos UI prediseados
que incluye Semantic UI y despus el enlace a la pagina oficial del proyecto para
poder descargar Semantic UI.
1.1. Caractersticas
Creador: Jack Lukic
Lanzamiento: 2013
Versin actual: 1.2.0
Popularidad: 12,900+ estrellas en GitHub
Descripcin: "Un marco de componentes de interfaz de usuario basada en
torno a principios tiles de lenguaje natural."
Conceptos bsicos / principios: Semntica, la ambivalencia, la etiqueta
sensible.
Tamao de marco: 552 KB
Preprocesadores: Menos
Alternativa: S
Modular: S
A partir de plantillas / diseos: No se
Conjunto de iconos: Fuentes impresionante
Extras / complementos: No hay
Esos componentes exclusivos: Divisor, Bandera, Rail, revele, Paso,
Publicidad, Tarjeta, alimentacin, artculo, estadstica, Dimmer,
Calificacin, forma.
Documentacin: Muy buena. Semntica ofrece una documentacin muy
bien organizado, adems de un sitio web independiente que ofrece guas
para empezar, la personalizacin y la creacin de temas.
Personalizacin: Sin personalizador de interfaz grfica de usuario, nica
personalizacin manual.
Soporte de los navegadores: Firefox, Chrome, Safari, IE10 + (IE9 con slo
el prefijo de navegador), 4 Android, Blackberry 10
Licencia: MIT
3.2. Ejemplos aplicativos

Utiliza frases simples, llamados behaviours, para lanzar los eventos de los
componentes en javascript.
Dispone de ms de 50 componentes prediseados que en otros frameworks no

disponemos, como sonfeed, comentarios o cards (tarjetas), y que nos hacen la
vida ms fcil a la hora de disear dichos componentes.
4. jQuery EasyUI
jQuery EasyUI proporciona fcil de usar componentes para la construccin de

aplicaciones JavaScript moderno, interactivo, en el navegador cruz. Es una coleccin
completa de los widgets y las interacciones con mltiples funciones, construidos en
la parte superior del popular ncleo de jQuery y HTML5. Los usuarios pueden utilizar
a todos juntos, o simplemente utilizar los componentes que desean.
4.1. Caractersticas
EasyUI es una coleccin de plug-in de interfaz de usuario basado en jQuery.
EasyUI proporciona la funcionalidad esencial para la creacin de

aplicaciones modernas e interactivas, javascript.
Utilizando EasyUI que no es necesario escribir muchos cdigo Javascript, por

lo general define la interfaz de usuario escribiendo algunas marcas HTML.
Marco completo para la pgina Web HTML5.
EasyUI ahorra tiempo y escalas, mientras que el desarrollo de sus

productos.
EasyUI es muy fcil pero potente.
4.2. Facilidad de uso en jQuery y HTML5

jQuery EasyUI proporciona fcil de usar componentes para los desarrolladores web, que se
basa en la popular ncleo de jQuery y HTML5. Esto hace que las aplicaciones adecuadas
para la web de hoy. Hay dos formas de declarar los componentes de interfaz de usuario:
Declarar componentes directamente en HTML

<Div class = estilo "-easyui de dilogo" = "width: 400px; altura: 200px"
datos-options = "
Ttulo: "Mi dilogo ',
iconCls: 'icono-ok',
onOpen: function () {} ">
contenido de dilogo.
</ Div>
Escribir cdigo JavaScript para crear componentes

<Id = Tipo de entrada de "cc" = "width: 200px" />
$ ( '# Cc'). Combobox ({
url: ...,
required: true,
campo de Valor: 'id',
textField: "texto"
});
4.3. Plugins
jQuery EasyUI ofrece una coleccin completa de los componentes incluidos poderosa
cuadrcula de datos, treegrid, el panel, combo y ms para la construccin de la pgina
web a travs del navegador. Los usuarios pueden utilizar a todos juntos, o
simplemente utilizar algunos componentes que quiere. Algunos de ellos son los
sigientes:
analizador
mvil
PasswordBox
easyloader
panel
combo
arrastrable
pestaas
caja combo
lanzables
acorden
combotree
de tamao
diseo
combogrid
variable
men
combotreegrid
paginacin
LinkButton
numberbox
caja de bsqeda
botn de men
datebox
barra de
SplitButton
datetimebox
progreso
informacin
boton interruptor
formar
sobre
validatebox
herramientas
caja de texto
5. Kendo UI
Kendo UI es una librera Javascript para el desarrollo de aplicaciones web

enriquecidas del lado del cliente, con diversas interfaces de usuario dinmicas
basadas en jQuery.
KendoUI es un paquete de libreras listas para usar por los desarrolladores en
pginas web dinmicas, enteramente realizadas con Javascript y basadas en
jQuery. A pesar de usar jQuery como base en el desarrollo, podramos denominarlo
framework Javascript, ya que ofrece diversas funcionalidades bsicas, como
arrastrar y soltar o un sistema de plantillas Javascript, pero su fuerte son las
interfaces de usuarios listas para incorporar en los proyectos web.
Por si nos sirve de algo esta comparacin, Kendo UI es algo parecido a lo que nos
ofrece jQueryUI, con la diferencia de que ambas libreras implementan algunos
componentes (widgets) distintos. En realidad la mayora de lo que podemos hacer
en jQueryUI lo podemos hacer tambin con Kendo UI, pero esta ltima librera va un
poco ms all, permitiendo algunas interfaces de usuario un poco ms novedosas.
La variedad de componentes para interfaces de usuario de Kendo UI incluye mens
dinmicos, grficas, paneles, rejillas de datos, rboles, ventanas, sistemas de
upload de archivos, etc. Son 13 distintos tipos de widgets altamente personalizables
y con funcionalidades realmente avanzadas.
5.1. Ejemplo de uso

A modo de demostracin de la facilidad con la que podemos crear nuestras pginas
basadas en las interfaces de Kendo UI, vamos a explicar a continuacin cmo poner
en marcha el widget "Menu", que nos sirve para crear mens desplegables
dinmicos con Javascript, que adems permiten varios niveles de anidamiento de
las opciones del men.
Para crear nuestro men debemos empezar por crear la estructura HTML necesaria
para definir las opciones que dispondr.
<ul id="menu">
<li>Opcin primera</li>
<li>Opcin segunda
<ul>
<li>Opcin anidada 1
<ul>
<li>Podemos anidar n niveles</li>
</ul>
</li>
<li>Otra opcin anidada</li>
</ul>
</li>
<li>Tercera opcin</li>
</ul>
Despus debemos invocar al componente mediante Javascript, tal como estamos
acostumbrados a hacer con los plugins jQuery.
$("#menu").kendoMenu()
Eso es todo!! como podramos ver en el siguiente ejemplo el men se ha creado
perfectamente y se encuentra animado por defecto con diversos efectos.
Pero adems, al crear el men podemos proveer distintas opciones para
personalizarlo. Cada tipo de componente soporta sus opciones particulares, que se
pueden encontrar explicadas en la documentacin. Nosotros veremos un ejemplo de
personalizacin por opciones, para hacer que el men presente sus diversas
opciones en vertical en lugar de horizontal.
$("#menu").kendoMenu({
orientation: "vertical"
})
Este men lo podemos ver en un ejemplo en pgina aparte.
Por si fuera poco, cada componente de interfaces de usuario ofrecido en Kendo UI
dispone de una serie de mtodos y eventos, encaminados a mejorar todava ms
los comportamientos dinmicos. Por ejemplo en un men de estas caractersticas
podemos hacer cosas como aadir opciones, quitarlas, habilitarlas o inhabilitarlas,
cerrar una rama o abrirla, todo a travs de mtodos que podemos invocar sobre el
objeto "kendoMenu". Podemos tambin definir instrucciones Javascript a ser
ejecutadas como respuesta a eventos creados especficamente dentro del
componente, como podra ser abrir una rama del men, cerrarla o seleccionar un
elemento.
Para ofrecer un ejemplo de estas posibilidades hemos creado un botn que sirve
para aadir una nueva opcin al men.
Esto lo conseguimos mediante dos sencillos pasos. Primero, al crear el men,
debemos guardarnos una variable con una referencia del objeto "kendoMenu".
var menu = $("#menu").kendoMenu().data("kendoMenu");
Esa referencia est almacenada en la variable "menu", pero adems, fjate que
hacemos una llamada al mtodo jQuery data() dentro del objeto kendoMenu,
pasando como parmetro el valor "kendoMenu". Esto nos ofrece una referencia a
dicho objeto en la que estarn disponibles todas las funcionalidades que define el
widget de las libreras Kendo UI.
Una vez tenemos esa referencia, crear nuevos elementos es tan sencillo como
llamar al mtodo insertAfter(), que inserta elementos en el men. Ese mtodo recibe
dos parmetros. El primero es un JSON con los textos de los elementos a insertar
indicados con la propiedad "text" (en este caso solo hay uno, pero podra ser un
array en notacin JSON). El segundo parmetro es el objeto jQuery del elemento
detrs de donde queremos insertar la opcin al men.
menu.insertAfter({
text: "Redes sociales"
}, $("#li3"))
II.
Recomendacin de un framework
El framework que recomendaria seria el jQuery porque es una librera de

JavaScript que facilita el desarrollo con ste lenguaje como tambin la
sintaxis de jQuery es ms sencilla de recordar y es casi completa con
muchas caractersticas que ayudan y facilitan el desarrollo web.
III.
Conclusiones y recomendaciones
Una vez descrito todo esto se puede pasar a desarrollar sin ningn problema, con
cualquiera de estos framework porque todos son muy tiles y sencillos.
Por ltimo me queda recomendarte que al utilizar jQuery te permitir reducir
tiempos de planeacin y elaboracin, pero para llegar a esos beneficios no debemos
olvidar estos consejos, no todo termina con la descarga e implementacin,como
tambin puedes elegir el que mejor se relacione con tus caractersticas de
desarrollador web.

5 Frameworkweb UIjavascript

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

5 Frameworkweb UIjavascript

Încărcat de

Drepturi de autor:

Formate disponibile

I.

Framework web UI javascript

jQuery UI es un complemento que permite implementar componentes diversos para generar

1.2. Cdigo fuente y Ejemplo

la maner ms bsica es:

<li><a href="#tab1">Tab 1</a></li>

y como resultado se debe tener

Bootstrap es el lder indiscutible entre los marcos disponibles en la actualidad. Dada

Esos componentes exclusivos: Jumbotrn

2.2.cdigo fuente y ejemplo

es un esfuerzo continuo para hacer construccin de sitios web mucho ms

Por supuesto Semantic UI al ser un proyecto Open Source es completamente

Creador: Jack Lukic

3.2. Ejemplos aplicativos

Dispone de ms de 50 componentes prediseados que en otros frameworks no

jQuery EasyUI proporciona fcil de usar componentes para la construccin de

EasyUI es una coleccin de plug-in de interfaz de usuario basado en jQuery.

EasyUI proporciona la funcionalidad esencial para la creacin de

Utilizando EasyUI que no es necesario escribir muchos cdigo Javascript, por

Marco completo para la pgina Web HTML5.

EasyUI ahorra tiempo y escalas, mientras que el desarrollo de sus

EasyUI es muy fcil pero potente.

4.2. Facilidad de uso en jQuery y HTML5

Declarar componentes directamente en HTML

Escribir cdigo JavaScript para crear componentes

Kendo UI es una librera Javascript para el desarrollo de aplicaciones web

5.1. Ejemplo de uso

El framework que recomendaria seria el jQuery porque es una librera de

S-ar putea să vă placă și