Diferencia entre revisiones de «Kinetic Style Sheets»

(→‎replaceInnerHTML)
(Etiqueta: nuestro-nuestra)
m (Texto reemplazado: «<div align="justify">» por «»)
 
(No se muestran 10 ediciones intermedias de 5 usuarios)
Línea 1: Línea 1:
 
{{Ficha Software
 
{{Ficha Software
−
|nombre=Kinetic Style Sheets
+
|nombre=Kinetic Style Sheets  
 
|familia=
 
|familia=
−
|imagen=
+
|imagen=KSS.jpeg
 
|tamaño=
 
|tamaño=
−
|descripción=
+
|descripción= [[Framework]] [[AJAX|Ajax]] que permite el desarrollo de [[interfaz de usuario]] sin necesidad de escribir [[JavaScript]]
 
|imagen2=
 
|imagen2=
 
|tamaño2=
 
|tamaño2=
 
|descripción2=
 
|descripción2=
 
|creador=
 
|creador=
−
|desarrollador=
+
|desarrollador= [[KSS Project]]
 
|diseñador=
 
|diseñador=
 
|modelo de desarrollo=
 
|modelo de desarrollo=
 
|lanzamiento inicial=
 
|lanzamiento inicial=
 
|versiones=
 
|versiones=
−
|última versión estable=
+
|última versión estable= KSS.core 1.6.3
 
|género=
 
|género=
 
|sistemas operativos=
 
|sistemas operativos=
 
|idioma=
 
|idioma=
−
|licencia=
+
|licencia= GPL
 
|premios=
 
|premios=
 
|web=
 
|web=
 
}}
 
}}
−
==Kinetic Style Sheet==
 
−
KSS es un [[framework]] para el trabajo con [[AJAX]]. Sin embargo, a diferencia de otros frameworks (prototype.js, rico, por ejemplo) no es totalmente necesario saber javascript para obtener los beneficios de AJAX en nuestra aplicación.
 
−
KSS es a [[AJAX]] como [[CSS]] a los estilos. De hecho, para describir el dinamismo de nuestra página usamos una sintaxis totalmente compatible con [[CSS]], aunque su semántica es diferente (por ejemplo, no hay modelos de cajas, ni visual).
 
−
Al igual que CSS se usan selectores para saber a qué elementos del DOM se aplicará el dinamismo definido.
 
−
==Hello world con KSS==
 
−
Una página XHTML como la que sigue:
 
−
<div style="text-align: left;" class="mw-geshi"
 
−
dir="ltr"><div class="php source-php"><pre
 
−
class="de1">&lt;html&gt;
 
−
&lt;head&gt;
 
−
&lt;title&gt;Hello world con KSS
 
−
/title&gt;
 
−
&lt;/head&gt;
 
−
&lt;body&gt;
 
−
&lt;form action="submit">
 
−
&lt;label for="name" value="Nombre"/>
 
−
&lt;input name="name" type="text" value="Hello world!"/>
 
−
&lt;input type="submit"/>
 
−
&lt;/form>
 
−
&lt;/body>
 
−
&lt;/html></pre></div></div>
 
−
Los puntos suspensivos es para incluir los javascripts de KSS. Además note el link en negritas como incluye un fichero como si fuera un CSS, pero cuyo parámetro rel es "kukit".
 
−
Ahora, con un lenguaje similar a CSS, vamos a hacer cuando apretemos el botón de Submit, salga un alert con el contenido de la caja de edición. Este sería el contenido de hworld.kss:
 
−
<div style="text-align: left;" class="mw-geshi"
 
−
dir="ltr"><div class="php source-php"><pre
 
−
class="de1">
 
−
input[type="submit"]:click {
 
−
      evt-click-preventdefault: True;
 
−
action-client: alert;
 
−
      alert-message: formVar("form", "name");
 
−
}
 
−
</pre></div></div>
 
−
Es simple, el selector input[type="submit"] selecciona a todos los input con u atributo type="submit". En este caso hay uno solo. El :click se refiere al evento de KSS para el cual se aplican las propiedades.
 
−
La propiedad evt-click-preventdefault es aplicable al evento click, y significa que no se ejecutará la acción por defecto (submit) de ese elemento (el botón) cuando le das click.
 
−
La propiedad action-client define una acción que se ejecutará en el cliente (navegador) cuando suceda el evento. En este caso es un mensaje en la pantalla (alert).
 
−
La propiedad alert-message le pasa un parámetro a la acción alert. En este caso tomamos el valor del elemento cuyo atributo name es "name" dentro del formulario cuyo name es "form".
 
−
==Acciones en el servidor = AJAX==
 
−
Al igual que la propiedad action-client, existe la propiedad action-server que define una acción que será ejecutada en el servidor. La acción será enviada al servidor con AJAX.
 
−
En general el valor de action-server puede ser una URL que se ejecuta por AJAX. La URL puede ser relativa.
 
−
Esa URL debe devolver un XML el cual establece una serie de comandos a ejecutar en el cliente. Entre los comandos que trae KSS por defecto, se incluyen:
 
−
===replaceInnerHTML===
 
−
Reemplaza el contenido del elemento en el cual se ejecutó el evento por otro contenido.
 
−
===replaceHTML===
 
−
Reemplaza todo el elemento en el cual se ejecutó el evento por el contenido devuelto por el servidor.
 
  
−
===appendHTML===
+
'''Kinetic Style Sheet (KSS):''' Es un [[framework]] [[AJAX|Ajax]] que permite el desarrollo de interfaz de usuario sin necesidad de escribir [[JavaScript]]. Utiliza hojas de estilo [[CSS]] compatible con la sintaxis para declarar y se unen comportamientos dinámicos en el [[navegador]]. El procesador es compatible con un conjunto de comandos genéricos como [[DOM]].
−
Añade contenido (como un hijo más) al final del elemento en el cual se ejecuto el evento.  
+
 
−
==Implementaciones de KS==  
+
==Características y capturas de pantalla==
−
Hasta la fecha, la única implementación sólida de KSS es AZAX: Un implementación para [[Zope]] de este mecanismo.
+
KSS es a [[AJAX]] como [[CSS]] a los estilos. Para describir el dinamismo de las página se utiliza una sintaxis totalmente compatible con [[CSS]], aunque la semántica es diferente (por ejemplo, no hay modelos de cajas, ni visual). Al igual que [[CSS]] se usan selectores para saber a qué elementos del [[DOM]] se aplicará el dinamismo definido.
−
PloneAzax es un producto que expone AZAX hacia [[Plone]].
+
 
−
AZAX incluye varias clases para facilitar la construcción de nuevas acciones del servidor.  
+
La captura de pantalla permite:
 +
* 8 Variaciones de estilo(3 Niveles de Detalle)
 +
* 5 Variaciones Showcase
 +
* Soporte [[RTL]]
 +
* Extensiones [[RT]] Styling
 +
* Tipografía Custom
 +
* Javascript Forma Styling
 +
* Menú Fusión & SplitMenu
 +
* 20 Variaciones Módulo
 +
* Más de 60 Module Positions
 +
* Compatible con [[Firefox]] 3.5, [[Opera]], [[Safari]] 4, [[Internet Explorer]] 7, 8
 +
* Apoyo limitado para [[Internet Explorer]] 6
 +
* W3C XHTML 1.0 Transitional. Valid W3C CSS 3
 +
 
 +
==Desarrolladores ==
 +
 
 +
Desarrolladores principales de KSS:
 +
* [[Godefroid Chapelle]]
 +
* [[Florian Schulze]]
 +
* [[Balázs Reé]]
 +
* [[Martin Heidegger ]]
 +
 
 +
==Acciones en el servidor AJAX==  
 +
Al igual que la propiedad action-client, existe la propiedad action-server que define una acción que será ejecutada en el servidor. La acción será enviada al servidor con [[AJAX]].
 +
En general el valor de action-server puede ser una [[URL]] que se ejecuta por [[AJAX]]. La [[URL]] puede ser relativa. Esa [[URL]] debe devolver un [[XML]] el cual establece una serie de comandos a ejecutar en el cliente. Entre los comandos que trae KSS por defecto, se incluyen:
 +
 
 +
* '''replaceInnerHTML:''' Reemplaza el contenido del elemento en el cual se ejecutó el evento por otro contenido.
 +
* '''replaceHTML:''' Reemplaza todo el elemento en el cual se ejecutó el evento por el contenido devuelto por el servidor.
 +
* '''appendHTML:''' Añade contenido (como un hijo más) al final del elemento en el cual se ejecuto el evento.  
 +
 
 +
==Roles del desarrollador ==
 +
Se distinguen las funciones de desarrollador siguientes:
 +
* '''Diseñador KSS :''' es una persona que diseña el comportamiento que se requiere de la página al escribir el archivo de recursos KSS. No sabe [[Javascript]] y sólo utiliza los componentes instalados.
 +
* '''Servidor KSS programador de acción''': es una persona que escribe [[Python]], sólo el código en el servidor,  y  describe que hay que hacer en una página, como una respuesta a algún evento KSS.
 +
* '''Desarrollador plugin KSS:''' es una persona que desarrolla componentes plug-in para su uso con KSS, requiere un profundo conocimiento tanto KSS como [[javascript]].
 +
 
 +
==Elementos arquitectónicos ==
 +
* '''Evento de KSS :''' Es algo  que se desencadena en el navegador, debido a la interacción del usuario.
 +
* '''Acción de KSS:''' Es lo que se ejecuta cuando se activa un evento, se distinguen las acciones del cliente y el servidor.
 +
* '''Servidor de comandos de acción KSS:'''  Volviendo al cliente, ejecuta los efectos deseados en la página.
 +
 
 +
==Implementaciones de KSS==  
 +
Hasta la fecha, la única implementación sólida de KSS es [[AZAX]], una implementación para [[Zope]] de este mecanismo. [[AZAX]] incluye varias clases para facilitar la construcción de nuevas acciones del servidor.
 +
 
 +
==Requisitos==
 +
* [[Python]]
 +
 
 
==Fuente==
 
==Fuente==
−
*http://ucipedia.uci.cu/ 17 de octubre del 2011
+
* Artículo  [http://ucipedia.uci.cu/index.php/KSS  Kinetic Style Sheets]. Disponible en:” ucipedia.uci.cu”. Consultado el 6 de diciembre del 2011
−
*Elaborado por la Ing. Dunia Pineda Medina
+
*Artículo [http://directsoftware.blogspot.com/2010/02/kinetic-v151-theme.html Kinetic v1.5.1].Disponible en:” directsoftware.blogspot.com”. Consultado el 6 de diciembre del 2011
−
[[Category:Programación]] [[Category:Desarrollo_web]] [[Category:Lenguajes_de_programación_orientada_a_objetos]]
+
* Artículo (inglés) [http://kssproject.org/ KSS. Ajax con estilo]. Disponible en:” kssproject.org”. Consultado el 5 de diciembre del 2011
 +
 +
* Artículo (inglés) [http://linux.software.hispavista.com/n82064-kss-core-1-6-2/ KSS.core 1.6.2]. Disponible en:” linux.software.hispavista.com”. Consultado el 5 de diciembre del 2011
 +
 +
* Artículo (inglés) [http://dist.enfoldsystems.com/catalog/kss.core KSS.core.Descripción]. Disponible en:” dist.enfoldsystems.com”. Consultado el 6 de diciembre del 2011
 +
 +
* Artículo (inglés) [http://linux.softpedia.com/get/Programming/Libraries/kss-core-64152.shtml KSS.core.1.6.3]. Disponible en:” linux.softpedia.com”. Consultado el 6 de diciembre del 2011
 +
 +
* Artículo (inglés) [http://plone.org/products/plone/roadmap/171  Plone incluye KSS]. Disponible en:” plone.org”. Consultado el 6 de diciembre del 2011
 +
* Artículo (inglés) [http://pypi.python.org/pypi/kss.core KSS.core 1.6.3].Disponible en:” pypi.python.org”. Consultado el 6 de diciembre del 2011
 +
</div>
 +
[[Category:Ciencias_informáticas]] [[Category:Informática]] [[Category:Programación]] [[Category:Software]]

última versión al 13:50 23 jun 2019

Kinetic Style Sheets
Información sobre la plantilla
KSS.jpeg
Framework Ajax que permite el desarrollo de interfaz de usuario sin necesidad de escribir JavaScript
DesarrolladorKSS Project
Última versión estableKSS.core 1.6.3
LicenciaGPL

Kinetic Style Sheet (KSS): Es un framework Ajax que permite el desarrollo de interfaz de usuario sin necesidad de escribir JavaScript. Utiliza hojas de estilo CSS compatible con la sintaxis para declarar y se unen comportamientos dinámicos en el navegador. El procesador es compatible con un conjunto de comandos genéricos como DOM.

Características y capturas de pantalla

KSS es a AJAX como CSS a los estilos. Para describir el dinamismo de las página se utiliza una sintaxis totalmente compatible con CSS, aunque la semántica es diferente (por ejemplo, no hay modelos de cajas, ni visual). Al igual que CSS se usan selectores para saber a qué elementos del DOM se aplicará el dinamismo definido.

La captura de pantalla permite:

  • 8 Variaciones de estilo(3 Niveles de Detalle)
  • 5 Variaciones Showcase
  • Soporte RTL
  • Extensiones RT Styling
  • Tipografía Custom
  • Javascript Forma Styling
  • Menú Fusión & SplitMenu
  • 20 Variaciones Módulo
  • Más de 60 Module Positions
  • Compatible con Firefox 3.5, Opera, Safari 4, Internet Explorer 7, 8
  • Apoyo limitado para Internet Explorer 6
  • W3C XHTML 1.0 Transitional. Valid W3C CSS 3

Desarrolladores

Desarrolladores principales de KSS:

Acciones en el servidor AJAX

Al igual que la propiedad action-client, existe la propiedad action-server que define una acción que será ejecutada en el servidor. La acción será enviada al servidor con AJAX. En general el valor de action-server puede ser una URL que se ejecuta por AJAX. La URL puede ser relativa. Esa URL debe devolver un XML el cual establece una serie de comandos a ejecutar en el cliente. Entre los comandos que trae KSS por defecto, se incluyen:

  • replaceInnerHTML: Reemplaza el contenido del elemento en el cual se ejecutó el evento por otro contenido.
  • replaceHTML: Reemplaza todo el elemento en el cual se ejecutó el evento por el contenido devuelto por el servidor.
  • appendHTML: Añade contenido (como un hijo más) al final del elemento en el cual se ejecuto el evento.

Roles del desarrollador

Se distinguen las funciones de desarrollador siguientes:

  • Diseñador KSS : es una persona que diseña el comportamiento que se requiere de la página al escribir el archivo de recursos KSS. No sabe Javascript y sólo utiliza los componentes instalados.
  • Servidor KSS programador de acción: es una persona que escribe Python, sólo el código en el servidor, y describe que hay que hacer en una página, como una respuesta a algún evento KSS.
  • Desarrollador plugin KSS: es una persona que desarrolla componentes plug-in para su uso con KSS, requiere un profundo conocimiento tanto KSS como javascript.

Elementos arquitectónicos

  • Evento de KSS : Es algo que se desencadena en el navegador, debido a la interacción del usuario.
  • Acción de KSS: Es lo que se ejecuta cuando se activa un evento, se distinguen las acciones del cliente y el servidor.
  • Servidor de comandos de acción KSS: Volviendo al cliente, ejecuta los efectos deseados en la página.

Implementaciones de KSS

Hasta la fecha, la única implementación sólida de KSS es AZAX, una implementación para Zope de este mecanismo. AZAX incluye varias clases para facilitar la construcción de nuevas acciones del servidor.

Requisitos

Fuente

  • Artículo Kinetic Style Sheets. Disponible en:” ucipedia.uci.cu”. Consultado el 6 de diciembre del 2011
  • Artículo Kinetic v1.5.1.Disponible en:” directsoftware.blogspot.com”. Consultado el 6 de diciembre del 2011
  • Artículo (inglés) KSS. Ajax con estilo. Disponible en:” kssproject.org”. Consultado el 5 de diciembre del 2011
  • Artículo (inglés) KSS.core 1.6.2. Disponible en:” linux.software.hispavista.com”. Consultado el 5 de diciembre del 2011
  • Artículo (inglés) KSS.core.Descripción. Disponible en:” dist.enfoldsystems.com”. Consultado el 6 de diciembre del 2011
  • Artículo (inglés) KSS.core.1.6.3. Disponible en:” linux.softpedia.com”. Consultado el 6 de diciembre del 2011
  • Artículo (inglés) Plone incluye KSS. Disponible en:” plone.org”. Consultado el 6 de diciembre del 2011
  • Artículo (inglés) KSS.core 1.6.3.Disponible en:” pypi.python.org”. Consultado el 6 de diciembre del 2011
Obtenido de «https://www.ecured.cu/index.php?title=Kinetic_Style_Sheets&oldid=3424824»