Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.
La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.
Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.
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
Algo que parece de lo más sencillo a veces nos puede llevar más tiempo del que pensamos, el desarrollo de formularios, si queremos que sea bueno, puede ser muy variado, por eso os pasamos una recopilación de distintas implementaciones de formularios que hemos encontrado.
En ellos podrás encontrar desde el uso de fieldset y legend, maquetación sin el uso de tablas, división en grupos de datos, formularios dinámicos dependientes de selección de opciones previas y muchos otros más. CSS-Based Forms: Modern Solutions
VÃa / dzone
La gente de Automattic (WordPress) ha sacado su proyecto After the Deadline como open source. Se trata de un corrector ortográfico, de gramática y estilos que podemos incluir en nuestras aplicaciones web. Además ofrece una API para jQuery por si queremos interactuar con él.
El proyecto tiene muy buena pinta y funciona bastante bien, salvo que por lo que he leído está únicamente para inglés. Claro, que también me entra una duda: ¿realmente es necesario un corrector ortográfico en una aplicación web?
Como pega le pondrÃa que para páginas con ancho variable no irÃa bien, pero vamos, según cuentas es algo chapucero asà que está más que de sobra jeje!
Gracias!
PAZ!!
Existe una extension para firefox y firebug que se llama pixelperfect que hace esto mismo de manera más simple…
¡Viva firebug!
fmvilas, sÃ, incluso me han dicho que le añadiera un grid 🙂
Se agradece! 🙂
Como pega le pondrÃa que para páginas con ancho variable no irÃa bien, pero vamos, según cuentas es algo chapucero asà que está más que de sobra jeje!
Gracias!
PAZ!!
Existe una extension para firefox y firebug que se llama pixelperfect que hace esto mismo de manera más simple…
¡Viva firebug!
fmvilas, sÃ, incluso me han dicho que le añadiera un grid 🙂
Jaime, no la conocÃa y si hice esto es porque busqué y no encontré 🙁 Muchas gracias, instalo ya mismo… ¡viva firebug! 🙂