Diferencia entre revisiones de «Sekizai»

(Página creada con '{{Ficha Software |nombre=Sekizai |descripción=Es un framework de red para la programacion dirigida a eventos escrito en Python |licencia=MIT License |web=https://github.com/oji...')
 
Línea 18: Línea 18:
 
Asumamos que usted ha definido una plantilla base para su sitio llamada ''base.html'', con la estructura básica de su documento [[HTML]]. Su código ''base.html'' debería ser:
 
Asumamos que usted ha definido una plantilla base para su sitio llamada ''base.html'', con la estructura básica de su documento [[HTML]]. Su código ''base.html'' debería ser:
  
−
[code:html]
+
   {% load sekizai_tags %}{% load static from staticfiles %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
−
   {% load sekizai_tags %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
 
 
   <html xmls="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
 
   <html xmls="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
 
   <head>
 
   <head>
−
     <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/base.css" media="all"/>
+
     <link rel="stylesheet" type="text/css" href="{% static "css/base.css} %}" media="all"/>
 
     {% render_block "css"%}
 
     {% render_block "css"%}
 
   </head>
 
   </head>
Línea 28: Línea 27:
 
   {% block "content" %}
 
   {% block "content" %}
 
   {% endblock %}
 
   {% endblock %}
−
   <script type="text/javascript" src="{{ MEDIA_URL}}jss/libs/jquery-1.4.2.min.js"></script>
+
   <script type="text/javascript" src="{% static "jss/libs/jquery-1.4.2.min.js"% }"></script>
 
   {% render_block "js" %}
 
   {% render_block "js" %}
 
   </body>
 
   </body>
 
   </html>
 
   </html>
−
[code]
 
  
−
En este ejemplo se puede notar que se especifica usa las [[template_tags]] de sekizai cargandolas al inicio de la pagina '''{% load sekizai_tags %}'''
+
En este ejemplo se puede notar que se especifica usa las [[template_tags]] de sekizai cargandolas al inicio de la pagina '''{% load sekizai_tags %}'''. También se definieron dos espacio de nombre de sekizai: "css" y "js". "css" esta despues de la inclusion del archivo [[css]] y "js" al final despues de la inclusion del archivo [[javascript]]. Se define un archivo '''inc.html'' que será capaz de imprimir la información relacionada con una lista numerica de usuarios almacenada en la variable de contexto '''userid'''.
  
 +
{% load sekizai_tags %}
 +
<div class="my-div">
 +
  <ul id="dynamic-content-{{ userid }}"></ul>
 +
</div>
 +
 +
{% addtoblock "js" %}
 +
  <script type="text/javascript" src="{% static "js/libs/lib.js" %}"></scritp>
 +
{% endaddtoblock %}
 +
 +
{% addtoblock "js" %}
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
    $('#dynamic-content-{{ userid }}').do_something();
 +
  });
 +
</script> 
 +
{% endaddtoblock %}
 +
 +
Para imprimir la tercera plantilla que sería la pagina final a presentar al usuario, se definio que '''my_userids'' estaria compuesto por ''[1, 2, 3]'', la plantilla luciría así:
 +
 +
{% extend "base.html" %}
 +
 +
{% block content %}
 +
{% for userid in my_userids %}
 +
  {% include "inc.html" %}
 +
{% endfor %}
 +
{% endblock %}
 +
 +
El resultado mostrado al usuario final sería:
 +
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"  dir="ltr">
 +
<html xmlns="http://www.w3.org" xml:lang="es" lang="es" dir="ltr"> 
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="/media/css/base.css" media="all"/>
 +
</head>
 +
<body>
 +
<div class="my-div">
 +
  <div id="dynamic-content-1"></div>
 +
</div>
 +
<div class="my-div">
 +
  <div id="dynamic-class-2"></div>
 +
</div>
 +
<div class="my-div">
 +
  <div id="dynamic-class-3"></div>
 +
</div>
 +
<script type="text/javsacript" src="/media/js/libs/jquery-1.4.2.min.js"></script>
 +
<script type="text/javsacript" src="/media/js/libs/lib.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function(){
 +
        $('#dynamic-content-1').do_something();
 +
    }
 +
</script>
 +
<script type="text/javascript">
 +
    $(document).ready(function(){
 +
        $('#dynamic-conent-2').do_something();
 +
    }
 +
</script>
 +
<script type="text/javascript">
 +
    $(document).ready(function(){
 +
        $('#dynamic-conent-3').do_something();
 +
    }
 +
</script>
 +
</body>
 +
</html>
 +
 +
 
  
 
== Fuentes ==
 
== Fuentes ==

Revisión del 11:14 31 ene 2014

Sekizai
Información sobre la plantilla
LicenciaMIT License
Sitio web
https://github.com/ojii/django-sekizai‎

Sekizai es una aplicación para del framework Django que provee una funcionalidad adicional para el sistema de plantillas del framework. El diseño de la aplicación permite establecer reglas mas definidas para la interacción entre los programadores y diseñadores en un mismo proyecto, a travéz de de un sistema de aislamiento modular de los templates y codigos fuente del proyecto o aplicación final. La palabra Sekizai significa en japonés bloque y eso es lo que esta aplicación provee al desarrollador y diseñador.

Origen y aspectos conceptuales

Origen

Sekizai fue creado para suplir la necesidad de un sistema dinamico para el manejo de los archivos de media en las aplicaciones de Django y Django-cms. Dado que Django se basa en un modelo MVC Modelo Vista Controlador el nivel de interacción entre las plantillas html y módulos en Python estara aislado de forma que los diseñadores podrán mantener sus desarrollos separados de los programadores.

Aspectos conceptuales

Sekizai provee una serie de bloques que permiten definir marcadores de posición en los bloques de contenidos definidos y adicionar en ciertos momentos información a estos. Esta función es especialmente útil para el uso de archivos css y javascript. Una de las características más importantes es que sekizai es capaz de ignorar contenidos duplicados en mismo bloque.

Forma de Uso

Asumamos que usted ha definido una plantilla base para su sitio llamada base.html, con la estructura básica de su documento HTML. Su código base.html debería ser: 

 {% load sekizai_tags %}{% load static from staticfiles %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
 <html xmls="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
 <head>
   <link rel="stylesheet" type="text/css" href="{% static "css/base.css} %}" media="all"/>
   {% render_block "css"%}
 </head>
 <body>
 {% block "content" %}
 {% endblock %}
 <script type="text/javascript" src="{% static "jss/libs/jquery-1.4.2.min.js"% }"></script>
 {% render_block "js" %}
 </body>
 </html>

En este ejemplo se puede notar que se especifica usa las template_tags de sekizai cargandolas al inicio de la pagina {% load sekizai_tags %}'. También se definieron dos espacio de nombre de sekizai: "css" y "js". "css" esta despues de la inclusion del archivo css y "js" al final despues de la inclusion del archivo javascript. Se define un archivo inc.html que será capaz de imprimir la información relacionada con una lista numerica de usuarios almacenada en la variable de contexto userid.

{% load sekizai_tags %}

    {% addtoblock "js" %} 

     <script type="text/javascript" src="{% static "js/libs/lib.js" %}"></scritp>

    {% endaddtoblock %}

    {% addtoblock "js" %} <script type="text/javascript"> 

     $(document).ready(function(){
   $('#dynamic-content-Plantilla:Userid').do_something();
 });

    </script> {% endaddtoblock %}

    Para imprimir la tercera plantilla que sería la pagina final a presentar al usuario, se definio que 'my_userids estaria compuesto por [1, 2, 3], la plantilla luciría así:

    {% extend "base.html" %}

    {% block content %} {% for userid in my_userids %} 

     {% include "inc.html" %}

    {% endfor %} {% endblock %}

    El resultado mostrado al usuario final sería:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <html xmlns="http://www.w3.org" xml:lang="es" lang="es" dir="ltr"> <head> <link rel="stylesheet" type="text/css" href="/media/css/base.css" media="all"/> </head> <body>

    <script type="text/javsacript" src="/media/js/libs/jquery-1.4.2.min.js"></script> <script type="text/javsacript" src="/media/js/libs/lib.js"></script> <script type="text/javascript"> 

       $(document).ready(function(){
       $('#dynamic-content-1').do_something();
   }

    </script> <script type="text/javascript"> 

       $(document).ready(function(){
       $('#dynamic-conent-2').do_something();
   }

    </script> <script type="text/javascript"> 

       $(document).ready(function(){
       $('#dynamic-conent-3').do_something();
   }

    </script> </body> </html>


    Fuentes

    Obtenido de «https://www.ecured.cu/index.php?title=Sekizai&oldid=2152632»