Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con header, section, aside y footer

En este post te mostraré una plantilla HTML que tiene los elementos o etiquetas header, section, aside y footer. Es un simple ejemplo con HTML y CSS para una página web.

Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con aside, footer, section y header – Barra a la derecha

El aside y el section tienen la misma altura, y el aside es mostrado a la derecha con un borde. Obviamente tú podrás cambiar los colores o el estilo, aquí solo te dejo una plantilla HTML muy simple con CSS puro.

(más…)

Reutilizar plantillas en Flask con Jinja - Plantilla base

Reutilizar plantillas en Flask con Jinja

En este post sobre Flask te mostraré cómo definir una plantilla base o plantilla maestra y después solo sobrescribir  el contenido y ciertos bloques, de modo que puedas definir y reutilizar una plantilla, evitando repetir código.

Para ello vamos a usar el template engine que Flask usa por defecto y que nos viene de maravilla: Jinja.

(más…)

Plantilla para mostrar temperatura y humedad – Diseño web

En este artículo te mostraré una plantilla de ejemplo para mostrar la temperatura y humedad. Será una plantilla simple y minimalista que solo tendrá el propósito de mostrar los datos de un termómetro.

Como lo dije anteriormente, será una plantilla de ejemplo para mostrar los datos de un termómetro como lo son la temperatura y humedad. Puedes basarte en ella para mostrar los datos de un sensor físico o de una API.

(más…)

Plantilla inicial de Bulma

En este post te mostraré una plantilla simple de Bulma para comenzar a usar este framework CSS. Es decir, una plantilla de ejemplo para que puedas basarte en ella y comenzar a trabajar modificarla según tus preferencias.

Esto que te mostraré también es conocido como starter template de Bulma.

(más…)

Vue JS: inyectar HTML en vista

Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.

Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.

(más…)

Angular - Formulario basado en plantilla (ejemplo)

Ejemplo de formulario con Angular

Resumen: en este post te mostraré un ejemplo simple de un formulario con Angular, en donde ligamos a un valor del componente con la vista del formulario.

En Angular existen dos tipos de formularios, los que son formularios reactivos (Reactive form) y los que son basados en plantillas (Template driven forms).

Hoy veremos un ejemplo de un Template driven form en Angular, que si vienes de AngularJS (o apenas estás comenzando) vas a entenderlo muy bien.

Si quieres puedes probar el resultado final aquí, y ver el código de todo el proyecto aquí.

(más…)

Node.Js + Express: ejemplo de creación de proyecto

Express es un framework muy popular en el ecosistema de Node y JavaScript del lado del servidor.

Casi todo programador lo conoce y muchísimas pilas o paradigmas de programación lo integran, pues es un framework para la web.

Express y Node – Comenzar proyecto

En este post vamos a ver cómo:

  1. Iniciar un proyecto de Node.Js
  2. Instalar Express, el framework web
  3. Configura rutas en Express y servir:
    1. Archivo HTML
    2. JSON
    3. Una cadena simple

Con esto tendremos una plantilla base para un servidor ligero que responda peticiones HTTP.

(más…)

Plantilla inicial de Bootstrap 4 (starter template)

Bootstrap 4 (y su versión anterior, la 3) es el framework CSS más usado en el desarrollo web (por ejemplo, el sistema de cotizaciones lo usa).

Como desarrolladores, necesitamos una plantilla de donde partir. Una plantilla básica o una starter template de Bootstrap para cargarla y tomarla como base para nuestros proyectos.

Plantilla inicial de Boostrap 4 (starter template)

Me di a la tarea de crear una y traducirla, para tomarla como base al desarrollar con Bootstrap 4.

(más…)

Página web de parzibyte.me renovada

He renovado mi página principal y ahora es open source

Justo hoy he publicado mi página principal totalmente renovada y hecha por mí, además de que es totalmente open source (he puesto el repositorio en línea).

Ya era hora, pues no estaba mostrando mi portafolio y la última actualización fue en diciembre del 2017.

Página web de parzibyte.me renovada

Página web de parzibyte.me renovada

Voy a explicar en este post cómo fue la creación y las cosas que usé para crearla; además de exponer cómo hice para que cargara rápido y otras cosas.

(más…)