HTML más simple y reusable con MWML: Minimal Web Meta Language

MWML(Minimal Web Meta Language) es una herramienta de empaquetado de módulos HTML, con el fin de reutilizar HTML y JS que muy poco se tiene en cuenta a nivel de etapas de desarrollo.

Ciertamente hablamos de POO (Programación Orientada a Objetos) y reutilización para el desarrollo WEB como para escritorio.

A nivel web, herramientas como PHP, RUBY, etc., nos permiten reutilizar nuestros códigos empaquetando DBA, MVC, etc. todo a nivel de BackEnd, pero que sucede a nivel de FrontEND?, es posible reutilizar en un 99% ò 100% las funciones esenciales de un diseño WEB? existen muchas herramientas para facilitar la vida a nivel de JS como Prototype, JQuery, pero aunque logres tener códigos establecidos para agilizar, siempre debes cambiar aquí y allá para acomodarlo a las necesidades requeridas.

Por eso nace este proyecto, con el ánimo de crear un repositorio de plugins reutilizables a nivel HTML, que permitirá avanzar rápidamente en el desarrollo de una solución web.

Con MWML reutiliza código

Por ejemplo:

Incluir un mapa de Google requiere:

Implementar en el header la librería de google para mapas.
Agregar un div en el body para incluir el mapa
Incluir un encabezado JS para generar las opciones para aplicar al mapa, ZOOM, Layers, etc.
Hacer la implementación de mapa con JS

Código:

Código :

<html>
   <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false&amp;quot;&amp;gt;&amp;lt;/script>
   <script type="text/javascript">
     function initialize() {
       var latlng = new google.maps.LatLng(-34.397, 150.644);
       var myOptions = {
         zoom: 8,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     }

   </script>
   </head>
   <body onload="initialize()">
     <div id="map_canvas" style="width:100%; height:100%"></div>
   </body>
   </html>

Si usamos MWML:

incluir plugin gmap en los import
etiqueta mapa

Código:

Código :

<html>
   <head>
      <script src="lib/prototype.js" type="text/javascript" charset="utf-8"></script>
      <script src="src/inc.js?plugins=gmap" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
      <mwml:gmap></mwml:gmap>
   </body>
   </html>

El formato para usar plugins sería:

Código :

<mwml:nombre_de_el_plugin parametro="valor"></mwml:nombre_de_el_plugin>

Entre los plugins desarrollados, he logrado realizar un 60% de un plugin para manejar formularios, envíos ajax, validaciones, etc. que pueden encontrar el código fuente.

Si desean apoyar esta iniciativa creando más plugins, estaré atento, pues tengo pensado realizar un webinar para aquellos interesados.

MWML Proyecto en Github

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

HTML más simple y reusable con MWML: Minimal Web Meta Language

Con MWML reutiliza código

Publica tu comentario

o puedes...