A la hora de mostrar tablas, un modo de presentación muy recomendable es resaltar las filas alternas como por ejemplo hace la lista de actualizaciones de Bitacoras.com consiguiendo así una mayor facilidad a la hora de leer los datos. Para ello, se suelen usar un estilo para las filas pares.
tr.par {
background: [color];
}
...
<tr class="par">
...
</tr>
...
Si la tabla se genera de forma dinámica, ya sea mediante Javascript o con PHP, JSP, … esto puede ser una acción bastante sencilla, tan solo tendremos que mirar en el bucle si el contador es par y colocar el class=”par”. Pero si la tabla es estática, puede suponer un trabajo un poco pesado, ir buscando todos los <tr> y escribir la clase. Siguiendo la Ley del Mínimo Esfuerzo, escribiremos la tabla sin modificar y luego ejecutaremos un script que modifique las filas pares automáticamente.
function transformar() {
var tablas = document.getElementsByTagName("TABLE");
for (var i=0; i<tablas.length; i++) {
for (var j=0; j<tablas[i].rows.length; j++) {
if (j%2 == 0) {
tablas[i].rows[j].className = "par";
}
}
}
}
Curioso script en jQuery que permite transformar una caja de texto en un seleccionador de tiempo. Pinchando sobre ella nos saldrán las horas que podemos elegir, y al movernos sobre las horas, aparecerán los minutos y así con el resto de los datos.
Su utilización es muy fácil, tan solo habrá que ejecutar lo siguiente:
$(function(){
$('#test-1').timepickr();
});
A parte se puede configurar indicando que horas, minutos, segundos y etiquetas (am/pm) se pueden elegir, los formatos o incluso que datos mostrar o no.
Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.
Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).
Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):
const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vueconst VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelintconst StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los aliasfunctionresolve( dir ) {
return path.join( __dirname, '.', dir );
}
module.exports = {
mode: 'production',
// Fichero inicial del proyecto
entry: './js/main.js',
// Fichero final para incluir
output: {
filename: 'js/main.js',
publicPath: '/dist/',
},
module: {
// Reglas para los ficheros
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new StyleLintPlugin( {
files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
} ),
],
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': resolve( '' ),
},
},
};
El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:
import Vue from 'vue';
import Buefy from 'buefy';
import'buefy/dist/buefy.css';
import App from './components/App.vue';
import'@/assets/scss/main.scss';
Vue.use( Buefy );
new Vue( {
el: '#app',
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
// accept replacement modulesif ( module.hot ) {
module.hot.accept();
}
Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control “filtrar”, no he podido resistirme a llevar a cabo tan buena idea.
En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.
Algo común en muchas de las páginas que visitamos, por ejemplo en foros, es la necesidad de registrarnos para poder acceder a los contenidos. El tutorial que ponemos a continuación explica muy bien como hacerlo paso a paso:
Validar la dirección de email antes de que se puede loguear: usando el email anterior, el cual contiene el id de usuario y la contraseña encriptada para poder modificar el usuario y señalarlo como activado. La verdad es que mandar la contraseña encriptada no es algo que me parezca buena idea, porque, que yo sepa, el algoritmo md5 se puede romper por fuerza bruta de forma más o menos sencilla (con un poco de paciencia), y es posible que la url para activar la contraseña quede guardada en el historial y otra persona que use el mismo ordenador acceda a tu contraseña.
Utilidad para recuperar la contraseña: realmente tiene que crear una contraseña nueva, porque como la anterior está encriptada, no se puede saber cual es.
