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";
}
}
}
}
En la Web 2.0 está más de moda usar transparencias en nuestras páginas web, realmente se puede realizar con estilos, pero con Internet Explorer se hace de una forma y con Firefox de otra, y no estoy muy seguro, con Opera no se puede (actualización:Federico nos comenta que en la versión 9 ya está implementada). Por ello, una forma de simular la transparencia en una capa es usar dos imágenes, una de fondo con la imagen original y la otra con una imagen que hemos creado nosotros que tendrá el efecto de transparencia.
Yo en el ejemplo me he creado una capa blanca, encima he puesto la imagen con cierto grado de transparencia y encima he puesto la misma imagen con efecto de luminosidad suave, para que no sea sÃmplemente una transparencia.
Tenemos una capa div y dentro de ella un párrafo:
Si te fijas, verás que en el estilo de párrafo, se desplaza del background hacia arriba y hacia la izquierda tanto como está desplazado el párrafo hacia abajo y hacia la derecha sobre la capa contenedora.
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
MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.
En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas. jsMSX
Via / @lardissone
Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.
Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.
Los triggers son algo muy útil sobre todo si queremos actualizar datos de forma automática. Imaginemos una tabla con los datos de un usuario, que pueden ser modificados desde distintas partes de nuestra aplicación, y es necesario que cuando se actualiza algún dato del usuario, se tenga que actualizar los datos de otra tabla. PodrÃamos actualizar los datos de la segunda tabla mediante código en cada uno de los casos en los que se actualiza la tabla del usuario en la aplicación, o bien podrÃamos crearnos un trigger que cuando se actualice la tabla de usuario (aunque sea “a mano”) se actualice directamente los datos de la otra tabla.
Un ejemplo para la creación de un trigger serÃa el siguiente:
CREATE TRIGGER disparador
AFTER INSERT ON usuarios
FOR EACH ROW
UPDATE tabla2
SET campo = valor;
La verdad es que tenÃa pendiente hacer un pequeño manual de triggers (disparadores) en MySQL después de haber hablado de