Etiqueta: Programación

Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas , la opción era usar algún lenguaje en el Backbend como PHP, Ruby,Python, etc. Actualmente el uso de templates es posible del lado del Frontend usando JavaScript. Para manejar dichos los templates tenemos algunos engines como:Jade, Swig, Mustache, Handlebars, etc. Gracias a la popularidad de estos motores de templates la WhatWG creó una etiqueta nueva en HTML5 poco conocida, que gracias a los Web Componentsse está volviendo cada vez más popular, la etiqueta <template>. Soporte No todos los navegadores soportan la etiqueta <template>. Actualmente es soportado por Firefox +22, Chrome +26,…

Leer más

Gracias al blog, recientemente, he podido ir conociendo a fondo el software que hace posible esta plataforma web. WordPress, es cual para los que no lo conocen, es uno de los administradores de contenidos (como blogs, tiendas online, foros etc) más populares en internet.  Es por esto que me ha surgido la idea de compartir con ustedes todos aquellos trucos y Tips que yo mismo he ido practicando con el tiempo para ir mejorando mi propio blog. En esta presente ocasión quiero hacer un pequeño tutorial donde explico cómo conectar…

Leer más

JavaScript no tiene (por ahora) un sistema de módulos propio, aunque eso si, la comunidad fue creando varios para suplir esa necesidad. Actualmente hay dos importantes propuestas (incompatibles entre sí): CommonJS: Esta es la implementación usada en Node.js y Browserify, se caracteriza por una sintaxis sencilla, carga los módulos de forma síncrona y se usa principalmente en el servidor. Definición de Módulos Asíncronos (AMD): La implementación más popular de este estándar es RequireJS, se caracteriza por una sintaxis un poco más complicada, estar diseñado para cargar módulos de forma asíncrona y se…

Leer más

Para completar este tutorial es recomendable leer antes el Tutorial Básico de CSS ¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la transición hacia el uso de XHTML estándar y el maquetado con CSS. Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En ese sentido,…

Leer más

Cuando trabajamos una web y aparecen problemas con la ubicación de los items, varias veces se debe a que los contenidos quedan mal apilados. Por ejemplo hacemos un menu en css y un swf con noticias pero el menu se despliega hacia abajo y los items son tapados por el swf. Otra ocasión es cuando queremos superponer cosas: Ya sean imágenes, textos o incluso películas flash. ¿Como ordena CSS el orden de apilación? Por medio de la propiedad z-index y de la propiedad position de CSS podemos ordenar los elementos de nuestra página a…

Leer más

Las cadenas de texto de JavaScript han sido desde siempre muy limitadas, sobre todo comparadas con las cadenas de lenguajes como PHP, Python o Ruby. Las Template Strings del estándar EcmaScript 6 (que están disponibles a partir de Google Chrome 41) eliminan todas estas limitaciones y permiten incluso definir DSLs (domain-specific languages) en tus aplicaciones JavaScript. Las principales funcionalidades que aportan las Template Strings son: Interpolación de cadenas. Posibilidad de incluir (y evaluar) expresiones dentro de cadenas. Definición de cadenas de texto en varias líneas sin tener que usar hacks. Formatear cadenas de manera avanzada.…

Leer más

Las imágenes son una de las partes más importantes del diseño web. Normalmente dejamos que sean los navegadores los que redimensionen y escalen las imágenes para que encajen bien en el diseño y se vean lo mejor posible. No obstante, en ocasiones es mejor controlar explícitamente cómo se escalan las imágenes. Por ese motivo, la versión 41 de Google Chrome añadió soporte para el nuevo valor pixelated de la propiedad image-rendering de CSS 3. Gracias a esta propiedad, podrás definir el algoritmo utilizado para ampliar las imágenes. En concreto, el valor pixelated permite desactivar el suavizado de…

Leer más

El navegador Internet Explorer 10 fue el primero que añadió soporte para «copiar y pegar» contenidos mediante el método Document.execCommand() de JavaScript. El resto de navegadores también han añadido soporte para esta funcionalidad, como por ejemplo Google Chrome, que lo soporta desde la versión 43. Gracias a esta funcionalidad, cualquier texto seleccionado en el navegador se puede cortar o copiar en el portapapeles. Combinándola con otras técnicas, como la API Selection de JavaScript, puedes crear un botón llamado Copiar para copiar al portapapeles cualquier contenido de una página. Un ejemplo sencillo Para empezar con un ejemplo…

Leer más

Éste tutorial tiene como objetivo, explicar cómo centrar todo el diseño de una web horizontalmente. Nota: Para éste tutorial necesitas tener previos conocimientos sobre XHTML y CSS. <div id=»wrap»> Crearemos un div con el id wrap alrededor de todo el contenido de la página. Recuerde que puede cambiar el id por cualquier otro nombre que ústed desee, o le parezca conveniente. Tendriamos algo como ésto. CSS Para que el #wrap centre el contenido utilizaremos CSS. Utilizaremos margenes automáticos para centrar el div, y recuerde que éste debe tener un tamaño, ya sea en pixeles, em o porcentajes. #wrap { margin:0 auto 0 auto;…

Leer más

El eterno problema de no ver los caracteres de nuestra aplicación web de la manera correcta (tildes, acentos, eñes) desde diferentes plataformas es algo que suele irritar a más de uno cuando se inicia en este desgraciado medio. Sin embargo, no os preocupéis, que desde hace un tiempo elaboramos una lista (salu2 charly!) explicando qué hacer y en dónde para que tanto en la aplicación como en la base de datos se usara UTF-8 para los juegos de caracteres. He aquí los pasos a tener en cuenta: 1. Cabeceras En…

Leer más