Diferencia entre revisiones de «Usuario:Juanda/bootstrap/Themes»

De WikiEducator
Saltar a: navegación, buscar
(→‎Instalaciones mediante npm)
 
(12 revisiones intermedias por el mismo usuario no mostrado)
Línea 15: Línea 15:
 
*[http://gruntjs.com/ Grunt], gestor de tareas de javascript]
 
*[http://gruntjs.com/ Grunt], gestor de tareas de javascript]
 
*Conocimiento básico de [http://lesscss.org/ less]
 
*Conocimiento básico de [http://lesscss.org/ less]
−
npm install -g bower
 
−
grunt-cli
 
−
npm install -g grunt-cli
 
−
a very light understanding of LESSs
 
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
=== ¿Qué es Twitter Bootstrap? ===
+
=== Instalación de nodejs ===
−
*Es el framework de Twitter que permite crear interfaces web con CSS y Javascript
+
*La versión de nodejs que viene en la distribución de Ubuntu 12.04 es un poco antigua y de problemas.
−
*The most popular front-end framework for developing responsive, mobile first projects on the web.
+
*Descargamos la última versión [www.nodejs.org desde la web de nodejs].
 +
*Se descomprime y lo compilamos:
 +
<source lang="bash">
 +
./configure
 +
make
 +
sudo make install
 +
</source>
 +
 
 +
*Comprobamos que la instalación ha ido bien:
 +
<source lang="bash">
 +
root@juandapc:/home/juanda/Descargas# which node
 +
/usr/local/bin/node
 +
root@juandapc:/home/juanda/Descargas# node --version
 +
v0.10.26
 +
</source>
 +
 
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Versiones de Bootstrap===
+
 
−
*La versión 3 salió el 19 de Agosto de 2013, [http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ ver blog].
+
===Bower===
−
*Ojo con documentación, consultas en stackoverflow, etc. hay mucha más información de Bootstrap 2. ¡Debemos mirar con cuidado!
+
*npm es el gestor de paquetes que utiliza nodejs.
 +
*Bower es otro gestor de paquetes para el frontend (los llaman componentes).
 +
*¿Por qué utilizar dos gestores de paquetes?
 +
- El primero se utilizará solo para paquetes javascript (se guardarán como módulos y se configurarán en el fichero package.js)
 +
- Bower se utiliza también para html o css. Hablamos en este caso de componentes en vez de paquetes. El fichero de configuración es bower.json.
 +
 
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Descargas de Bootstrap===
+
===Instalaciones mediante npm===
−
*Compilada y comprimida. Sin documentos ni fuentes originales.
+
*Mediante npm instalaremos paquetes que necesitamos
−
*Sin compilar ni comprimir. Los fuentes de CSS están en Less.
+
*Los instalaremos con la opción -g (globales para todo nuestro sistema Linux):
−
*Sin compilar ni comprimir. Los fuentes de CSS están en Sass.
+
<source lang="bash">
 +
root@juandapc:/home/juanda# npm install -g bower
 +
root@juandapc:/home/juanda# npm install -g grunt-cli
 +
root@juandapc:/home/juanda# npm install -g less
 +
</source>
 +
 
 +
*En cada instalación vemos como se consulta el registro de npm para la descarga de los ficheros.
 +
*Los ficheros se instalan en los directorios genéricos, ver trazas de ejemplo:
 +
<source lang="bash">
 +
npm http 200 https://registry.npmjs.org/punycode
 +
npm http GET https://registry.npmjs.org/punycode/-/punycode-1.2.4.tgz
 +
npm http 304 https://registry.npmjs.org/delayed-stream/0.0.5
 +
npm http 304 https://registry.npmjs.org/sntp
 +
npm http 200 https://registry.npmjs.org/punycode/-/punycode-1.2.4.tgz
 +
/usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
 +
less@1.6.3 /usr/local/lib/node_modules/less
 +
├── mime@1.2.11
 +
├── mkdirp@0.3.5
 +
├── source-map@0.1.32 (amdefine@0.1.0)
 +
├── clean-css@2.0.8 (commander@2.0.0)
 +
└── request@2.34.0 (json-stringify-safe@5.0.0, forever-agent@0.5.2, qs@0.6.6, aw
 +
s-sign2@0.5.0, tunnel-agent@0.3.0, oauth-sign@0.3.0, node-uuid@1.4.1, http-signa
 +
ture@0.10.0, form-data@0.1.2, hawk@1.0.0, tough-cookie@0.12.1)
 +
</source>
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Documentación de Bootstrap===
 
−
*[http://getbootstrap.com/ Página web del proyecto]
 
−
*[http://librosweb.es/bootstrap_3/ Documentación traducida al español]
 
  
 +
===ThemeStrap===
 +
*Vamos a utilizar [https://github.com/divshot/themestrap ThemeStrap] para hacer nuestro theme de Bootstrap
 +
*Es muy poco intrusivo: si Bootstrap cambia, nuestro theme debería actualizarse de forma sencilla.
 +
*Themestrap nos da dos únicos ficheros para modificar: variables.less y theme.less (en el directorio less). El fichero variables.less original no se toca.
 +
 +
*Vamos a clonar una copia de Themestrap para hacer nuestro tema. Yo la voy a llamar bootstrap-theme-daw
 +
<source lang="bash">
 +
root@juandapc:/home/juanda/bootstrap# git clone https://github.com/divshot/themestrap.git bootstrap-theme-daw
 +
Cloning into 'bootstrap-theme-daw'...
 +
remote: Reusing existing pack: 343, done.
 +
remote: Total 343 (delta 0), reused 0 (delta 0)
 +
Receiving objects: 100% (343/343), 196.51 KiB | 206 KiB/s, done.
 +
Resolving deltas: 100% (153/153), done.
 +
root@juandapc:/home/juanda/bootstrap#
 +
</source>
 +
 +
*Actualizaremos el fichero bower.json:
 +
<source lang="bash">
 +
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json
 +
{
 +
  "name": "bootstrap-theme-themestrap-sample",
 +
  "version": "0.0.1",
 +
  "private": true,
 +
  "author": "Your Name",
 +
  "main": "dist/bootstrap.css",
 +
  "themestrap": {
 +
    "name": "Themestrap Sample",
 +
    "repo": "https://github.com/divshot/themestrap"
 +
  },
 +
  "ignore": [
 +
    "**/.*",
 +
    "node_modules",
 +
    "bower_components",
 +
    "test",
 +
    "tests"
 +
  ],
 +
  "dependencies": {
 +
    "bootstrap":"3.0.0"
 +
  }
 +
}
 +
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw#
 +
 +
</source>
 +
 +
*Los campos nombre y autor son los más importantes.
 +
*themestrap/name y themstrap/repo solo son útiles si publicamos nuestro tema en GitHub y lo compartimos con Bower (lo veremos más adelante).
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Utilidad de Bootstrap===
+
===Instalación de módulos===
−
*Tenemos dos opciones para utilizar Bootstrap:
+
*Ejecutamos el comando npm install.
−
*Utilizar exclusivamente su sistema de rejilla (grid) para colocar elementos y responsividad.
+
*Se instalaran todas las librerías javascript que están en el fichero package.json.
−
*Utilizar su diseño: botones, labels, etc así como su librería de javascript (basada en jQuery).
+
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Diseño con Bootstrap===
+
===Configuración de bower===
−
*Modificaremos a partir de los ficheros less existentes.
+
*El fichero bower.json debe quedar similar a lo siguiente:
−
*Crearemos themes.
+
<source lang="bash">
−
*También podremos optar por descargar themes existentes (muchos de pago).
+
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json
 +
{
 +
  "name": "bootstrap-theme-themestrap-sample",
 +
  "version": "0.0.1",
 +
  "private": true,
 +
  "author": "Your Name",
 +
  "main": "dist/bootstrap.css",
 +
  "themestrap": {
 +
    "name": "Themestrap Sample",
 +
    "repo": "https://github.com/divshot/themestrap"
 +
  },
 +
  "ignore": [
 +
    "**/.*",
 +
    "node_modules",
 +
    "bower_components",
 +
    "test",
 +
    "tests"
 +
  ],
 +
  "dependencies": {
 +
    "bootstrap":"3.0.0"
 +
  }
 +
}
 +
 
 +
</source>
 +
*Main es el punto donde se va a instalar nuestro paquete
 +
<source lang="bash">
 +
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ bower install
 +
</source>
 +
 
 +
*Una vez instalado bower, tendremos un directorio bower_components con los componentes que nuestro proyecto necesita (en principio boostrap 3.0.0).
 +
*Comprobaremos que también está jQuery. ¿Por qué? Echa un ojo al bower.json del componente Bootstrap:
 +
<source lang="bash">
 +
{
 +
  "name": "bootstrap",
 +
  "version": "3.0.0",
 +
  "main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css"],
 +
  "ignore": [
 +
      "**/.*"
 +
  ],
 +
  "dependencies": {
 +
    "jquery": ">= 1.9.0"
 +
  }
 +
}
 +
</source>
 +
*¿Se entiende la dinámica? Espero que sí :-)
  
−
</div>
 
 
</div>
 
</div>
  
 +
<div class="slide">
  
 +
===Grunt===
 +
*Ya viene configurado para ejecutar ciertas tareas
 +
*Ejecuta grunt para comprobarlo:
 +
<source lang="bash">
 +
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt
 +
Running "copy:bootstrap" (copy) task
 +
Copied 5 files
  
 +
Running "less:compile" (less) task
 +
File dist/css/bootstrap.css created.
  
−
===Bower===
+
Running "recess:dist" (recess) task
−
*Es un gestor de paquetes de Front End.
+
File "dist/css/bootstrap.css" created.
−
*Depende de nodejs y de npm (node package manager).
+
  
−
sudo apt-get install npm
+
Running "cssmin:minify" (cssmin) task
 +
File dist/css/bootstrap.min.css created.
 +
 
 +
Running "assemble:pages" (assemble) task
 +
Assembling index.html OK
 +
Assembling examples/kitchen-sink.html OK
 +
>> 2 pages assembled.
 +
 
 +
Running "clean:0" (clean) task
 +
Cleaning tmp...OK
 +
 
 +
Done, without errors.
 +
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$
 +
 
 +
</source>
 +
*grunt serve es un comando que nos permitirá ver nuestro proyecto en la url: http://localhost:8000.
 +
*Como puedes ver, ejecuta internamente también un grunt watch (vamos, que está controlando posibles cambios para trabajar).
 +
 
 +
<source lang="bash">
 +
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt serve
 +
Running "connect:serve" (connect) task
 +
Started connect web server on localhost:8000.
 +
 
 +
Running "watch" task
 +
Waiting...
 +
 
 +
</source>
 +
 
 +
*Modifica algún dato de los ficheros less para ver el resultado.
 +
 
 +
{{DGA tarea|
 +
Title=Ejercicio|
 +
Actualiza la versión de Boostrap a la actual para tu proyecto (3.1.1).
 +
}}
 +
</div>
 +
 
 +
 
 +
</div>

Última revisión de 09:16 26 feb 2014


Crear un theme

Requerimientos previos

  • node.js
  • npm (Viene con node desde la v0.6.3)
  • git (prerequisito for bower)
  • Bower, gestor de paquetes para web
  • Grunt, gestor de tareas de javascript]
  • Conocimiento básico de less

Instalación de nodejs

  • La versión de nodejs que viene en la distribución de Ubuntu 12.04 es un poco antigua y de problemas.
  • Descargamos la última versión [www.nodejs.org desde la web de nodejs].
  • Se descomprime y lo compilamos: 
./configure
make
sudo make install
  • Comprobamos que la instalación ha ido bien: 
root@juandapc:/home/juanda/Descargas# which node
/usr/local/bin/node
root@juandapc:/home/juanda/Descargas# node --version
v0.10.26

Bower

  • npm es el gestor de paquetes que utiliza nodejs.
  • Bower es otro gestor de paquetes para el frontend (los llaman componentes).
  • ¿Por qué utilizar dos gestores de paquetes?

- El primero se utilizará solo para paquetes javascript (se guardarán como módulos y se configurarán en el fichero package.js) - Bower se utiliza también para html o css. Hablamos en este caso de componentes en vez de paquetes. El fichero de configuración es bower.json.

Instalaciones mediante npm

  • Mediante npm instalaremos paquetes que necesitamos
  • Los instalaremos con la opción -g (globales para todo nuestro sistema Linux): 
root@juandapc:/home/juanda# npm install -g bower
root@juandapc:/home/juanda# npm install -g grunt-cli
root@juandapc:/home/juanda# npm install -g less
  • En cada instalación vemos como se consulta el registro de npm para la descarga de los ficheros.
  • Los ficheros se instalan en los directorios genéricos, ver trazas de ejemplo: 
npm http 200 https://registry.npmjs.org/punycode
npm http GET https://registry.npmjs.org/punycode/-/punycode-1.2.4.tgz
npm http 304 https://registry.npmjs.org/delayed-stream/0.0.5
npm http 304 https://registry.npmjs.org/sntp
npm http 200 https://registry.npmjs.org/punycode/-/punycode-1.2.4.tgz
/usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
less@1.6.3 /usr/local/lib/node_modules/less
├── mime@1.2.11
├── mkdirp@0.3.5
├── source-map@0.1.32 (amdefine@0.1.0)
├── clean-css@2.0.8 (commander@2.0.0)
└── request@2.34.0 (json-stringify-safe@5.0.0, forever-agent@0.5.2, qs@0.6.6, aw
s-sign2@0.5.0, tunnel-agent@0.3.0, oauth-sign@0.3.0, node-uuid@1.4.1, http-signa
ture@0.10.0, form-data@0.1.2, hawk@1.0.0, tough-cookie@0.12.1)

ThemeStrap

  • Vamos a utilizar ThemeStrap para hacer nuestro theme de Bootstrap
  • Es muy poco intrusivo: si Bootstrap cambia, nuestro theme debería actualizarse de forma sencilla.
  • Themestrap nos da dos únicos ficheros para modificar: variables.less y theme.less (en el directorio less). El fichero variables.less original no se toca.
  • Vamos a clonar una copia de Themestrap para hacer nuestro tema. Yo la voy a llamar bootstrap-theme-daw 
root@juandapc:/home/juanda/bootstrap# git clone https://github.com/divshot/themestrap.git bootstrap-theme-daw
Cloning into 'bootstrap-theme-daw'...
remote: Reusing existing pack: 343, done.
remote: Total 343 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (343/343), 196.51 KiB | 206 KiB/s, done.
Resolving deltas: 100% (153/153), done.
root@juandapc:/home/juanda/bootstrap#
  • Actualizaremos el fichero bower.json: 
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json 
{
  "name": "bootstrap-theme-themestrap-sample",
  "version": "0.0.1",
  "private": true,
  "author": "Your Name",
  "main": "dist/bootstrap.css",
  "themestrap": {
    "name": "Themestrap Sample",
    "repo": "https://github.com/divshot/themestrap"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap":"3.0.0"
  }
}
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw#
  • Los campos nombre y autor son los más importantes.
  • themestrap/name y themstrap/repo solo son útiles si publicamos nuestro tema en GitHub y lo compartimos con Bower (lo veremos más adelante).

Instalación de módulos

  • Ejecutamos el comando npm install.
  • Se instalaran todas las librerías javascript que están en el fichero package.json.

Configuración de bower

  • El fichero bower.json debe quedar similar a lo siguiente: 
root@juandapc:/home/juanda/bootstrap/bootstrap-theme-daw# cat bower.json 
{
  "name": "bootstrap-theme-themestrap-sample",
  "version": "0.0.1",
  "private": true,
  "author": "Your Name",
  "main": "dist/bootstrap.css",
  "themestrap": {
    "name": "Themestrap Sample",
    "repo": "https://github.com/divshot/themestrap"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap":"3.0.0"
  }
}
  • Main es el punto donde se va a instalar nuestro paquete 
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ bower install
  • Una vez instalado bower, tendremos un directorio bower_components con los componentes que nuestro proyecto necesita (en principio boostrap 3.0.0).
  • Comprobaremos que también está jQuery. ¿Por qué? Echa un ojo al bower.json del componente Bootstrap: 
{
  "name": "bootstrap",
  "version": "3.0.0",
  "main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css"],
  "ignore": [
      "**/.*"
  ],
  "dependencies": {
    "jquery": ">= 1.9.0"
  }
}
  • ¿Se entiende la dinámica? Espero que sí :-)

Grunt

  • Ya viene configurado para ejecutar ciertas tareas
  • Ejecuta grunt para comprobarlo: 
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt
Running "copy:bootstrap" (copy) task
Copied 5 files
 
Running "less:compile" (less) task
File dist/css/bootstrap.css created.
 
Running "recess:dist" (recess) task
File "dist/css/bootstrap.css" created.
 
Running "cssmin:minify" (cssmin) task
File dist/css/bootstrap.min.css created.
 
Running "assemble:pages" (assemble) task
Assembling index.html OK
Assembling examples/kitchen-sink.html OK
>> 2 pages assembled.
 
Running "clean:0" (clean) task
Cleaning tmp...OK
 
Done, without errors.
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$
  • grunt serve es un comando que nos permitirá ver nuestro proyecto en la url: http://localhost:8000.
  • Como puedes ver, ejecuta internamente también un grunt watch (vamos, que está controlando posibles cambios para trabajar). 
juanda@juandapc:~/bootstrap/bootstrap-theme-daw$ grunt serve
Running "connect:serve" (connect) task
Started connect web server on localhost:8000.
 
Running "watch" task
Waiting...
  • Modifica algún dato de los ficheros less para ver el resultado.



Crystal Clear app vcalendar.png

Ejercicio

Actualiza la versión de Boostrap a la actual para tu proyecto (3.1.1).



Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/bootstrap/Themes&oldid=14429»