Frameworks CSS

Vamos a comparar varios frameworks CSS orientados ha realizar diseños webs “adaptables” (Responsive Web Design). El objetivo seria encontrar uno que se adapte a mi manera de trabajar pero como estoy casi seguro que no lo voy a encontrar, intentare sintetizar de todos ellos lo mas útil para mi forma de trabajar y usarlo como framework para mis hojas de estilo.
No empiezo desde cero ya que he modificado dos, que suelo usar en las paginas que hago.

Lo primero: ¿Que entiendo por un framework?

Un framework, que podria traducirse como “marco trabajo”, seria un conjunto de practicas y conceptos que nos ayudan a estructurar y organizar nuestro código por medio de patrones y módulos reutilizables para que podamos crear el esqueleto de una aplicación.

Lo segundo: ¿Que voy a tener en cuenta?

Principalmente voy a tener en cuenta

  • La flexibilidad del grid
  • La cantidad de HTML necesario para su uso
  • Modelo de caja
  • Si disponen de una versión de preprocesador, SASS o LESS principalmente
  • La hoja de estilos final, en numero de lineas y el peso una vez minificada
  • Otros, elementos que no sean parte del grid

Y por ultimo : ¿Que framework voy a probar?

Voy a comparar los mas famosos o los mas usados mas un par que tengo curiosidad de ver como funcionan. El que quiera que compare alguno mas que me lo podeis pedir por twitter @m_minguezz.

Foundation

Segun su pagina “The most advanced responsive front-end framework in the world.”, nos lo vamos a creer de momento.
Pagina oficial
Mis comentarios (Proximamente)

Bootstrap

Segun su pagina “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” Voy a analizar la version 2.3.2
Pagina oficial
Mis comentarios (Proximamente)

Unsemantic

Segun su pagina “Unsemantic is a fluid grid system that is the successor to the 960 Grid System.”
Pagina oficial
Mis comentarios (Proximamente)

inuitcss

Segun su pagina “Coming soon…”
Pagina oficial
Mis comentarios (Proximamente)

Frameless

Segun su pagina “Adapt column by column, not pixel by pixel.” Es el sucesor de Less Framework
Pagina oficial
Mis comentarios (Proximamente)

Skeleton

Segun su pagina “A Beautiful Boilerplate for Responsive, Mobile-Friendly Development”
Pagina oficial
Mis comentarios (Proximamente)

Gumby

Segun su pagina “Now more flexible than ever”
Pagina oficial
Mis comentarios (Proximamente)

PROFOUNDGRID

Segun su pagina “A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.”
Pagina oficial
Mis comentarios (Proximamente)

Toast

Segun su pagina “Insane, no-nonsense CSS grid”
Pagina oficial
Mis comentarios (Proximamente)

Sassaparilla

Segun su pagina “Sassaparilla is a fast way to start your responsive web design projects that harnesses the power of Sass and Compass. It comes with just enough to get you on your way, and no unnecessary extras, so you can spend less time deleting what you don’t need and more time building.”
Pagina oficial
Mis comentarios (Proximamente)

Otros que me gustaria probar

  • https://github.com/malarkey/320andup/
  • https://github.com/Wakkos/Wakkos-CSS-Framework
  • http://thatcoolguy.github.io/gridless-boilerplate/
  • http://newaeonweb.com.br/responsiveaeon/
  • https://github.com/kanthvallampati/IVORY
  • http://purecss.io/
  • http://www.yaml.de/
  • http://fluidable.com/
Framework HTML Grid Box Preprocesador Lineas CSS Peso CSS Otros
Foundation No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Unsemantic No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Bootstrap No valorado No valorado No valorado No valorado No valorado No valorado No valorado
inuitcss No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Frameless No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Skeleton No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Gumby No valorado No valorado No valorado No valorado No valorado No valorado No valorado
PROFOUNDGRID No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Toast No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Sassaparilla No valorado No valorado No valorado No valorado No valorado No valorado No valorado
Otro… No valorado No valorado No valorado No valorado No valorado No valorado No valorado

Que mas podemos buscar… media print, js, esta actualizado/mantenido

M101JS – Semana 6

Aplication Engineering

Replicación, conceptos basicos.
La replicacion se hace de manera asincrona en varios servidores de MongoDB llamados nodos, uno de ellos es el primario y el resto es el secundario, el driver de la aplicacion se conecta el primario y solo al primario, si la conectividad se pierde el driver de la aplicación elige uno de los secundarios para que funcione como primario, el numero minimo de nodos es tres.

Un nodo puede ser regular (primarios o secundarios), arbitro (sin datos), de retraso (por ejemplo de 2h. para evitar desastres) y oculto (para test).

En los archivos del curso hay un script para crear una replicación, con el comando ‘rs.slaveOk()’ podemos leer en nodos secundarios

M101JS – Semana 5

Aggregation

De una colección fuente, se ejecuta una serie de procesos encadenados (pipeline) y construye una serie de documentos.

db.products.aggregate([
   {$group:
      {
          _id:"$manufacturer",
          num_products:{$sum:1}
      }
   }
])

Pipeline

$proyect -> Selecciona las claves en las que estas interesado.
$match -> hace un filtro.
$group -> agrupa por claves
$sort -> Ordena los documentos
$skip -> Salta ciertos documentos
$limit -> limita el numero de elementos
unwind -> Quita la relación entre los documentos anidados (arrays)

Expresiones que se pueden usar en $group

$sum -> Añades uno cada vez que encuentra clave o añades el valor de la clave
$avg -> calcula el promedio de una clave entodos los documentos
$min -> encuentra el valor minimo
$max -> encuentra el valor maximo
$push y $addToSet -> construyen arrays (addToSet, solo añade cuando el valor es diferente)
$first y $last -> añadiran el primer o ultimo valor, puede no tener sentido si no los ordenamos primero.

Tambien podemos hacer lo que se llama agrupación doble, ej:

db.fun.aggregate([{$group:{_id:{a:"$a", b:"$b"}, c:{$max:"$c"}}}, {$group:{_id:"$_id.a", c:{$min:"$c"}}}])

M101JS – Semana 4

Indices

Usamos los indices para encontrar los datos y notener que recorrer toda la base de datos, en MongoDB son listas de claves.
Por ejemplo, creamos un indice en la colección “students” de “student_id” en orden ascentente.

db.students.ensureIndex({student_id:1})

Podemos crear un indice como el anterior añadiendo la clase en orden descendente.

db.students.ensureIndex({student_id:1, class:-1})

Para saber que indices hay en nuestro sistema usamos

db.system.indexes.find()

Para saber que indices hay en una colección

db.students.getIndexes()

Para eliminar un indice hay en una colección

db.students.dropIndexes({student_id:1})

En MongoDB se puede tener una clave que contenga un array lo que llamareos un indice multiclave, en cada indice solo se puede tener una multiclave.

Tambien podemos crear indices de un elemento anidado.

db.students.ensureIndex({class.name:1})

Un indice unico fuerza a que el contenido de la clave sea unico

db.students.ensureIndex({student_id:1},{unique:true})

Si hay duplicados podemos forzarle a que elimine los duplicados con:

db.students.ensureIndex({student_id:1},{unique:true, dropDups:true})

pero es peligroso por que no hay manera de controlar cual va a eliminar

Si queremos crear un indice que sea unico sobre una clave que no esta en todos los documentos de la colección debemos decirle a mongoDB que es una clave dispersa, los docuementos que no tengan la clave no seran tomados en cuenta a la hora de hacer las consultas, seran filtrados.

db.students.ensureIndex({student_id:1},{unique:true, sparse:true})

Al añadir explain a nuestra consulta nos da una explicacion de lo que hace para realizar la consulta

db.students.find({student_id:1}).explain()

Para tener las estadisticas de la colección

db.students.stats()

Para saber el tamaño de los indices

db.students.totlaIndexSize()

Podemos indicarle que indice queremos usar con hint, si le pasamos $natural usara el indice basico

db.students.find({student_id:1}).hint({$natural:1})

Los indices geoespaciales permiten encontrar algo dependiendo de su lugar, funciona creando un indice en una clave con dos elementos numericos.

db.locales.ensureIndex({coordenadas:'2d'})

Para hacer una busqued en usando este indice

db.locales.find({coordenadas:{$near:[20,50]}})

Para depurar podemos usar los comandos de “Profiling”, por ejemplo:

db.system.profile.find({millis:{$gt:1000}}).sort({ts:-1})

mongotop y mongostat

M101JS – Semana 3

Schema Design

Es muy importante mantener los datos de tal manera que sea favorable para que la aplicación los use.
MongoDB soporta documentos enriquecidos, documentos dentro de documentos, no soporta relaciones (las relaciones han de hacerse en la aplicación), no hay restricciones, operaciones atomicas, no hay esquemas declarados.
Lo mas importante es diseñar una estructura pensando en los patrones de nuestra aplicación.

Las relaciones uno a uno son aquellas en que cada elemento se corresponde exactamente con otro. En MongoDB los anidariamos, a noser que esto haga que el documento pese mas de 16MB o por reducir el trabajo de la aplicación ya que no usariamos todos los datos.

Las relaciones uno a muchos son aquellas en las que un elemento se relaciona con muchos otros. En MongoDB usariamos dos colecciones, en el caso de que sean uno a pocos podemos hacer un anidamiento de documentos.

Las Relaciones muchos a muchos no es consistente anidar documentos.

Multikeys: si tenemos array en los documentos de una coleccion la podemos indexar.

db.students.ensureIndex({teachers:1})

El beneficio de anidar documentos es el rendimiento de lectura

M101JS – Semana 2

CRUD

En mongo es, Insertar(Crear), encontrar(Leer), actualizar(actualizar) y remover(eliminar).

Shell de MongoDB

Con “mongod” arrancamos el servidor y desde otra terminal podemos entrar con mongo, en ella podemos insertar fragmentos de JavaScript y que sean evaluados y ejecutados inmediatamente.

Si escribimos “help” veremos una lista de opciones y ayudas.
Para poder continuar necesitamos entender como funciona en JavaScript el siguiente fragmento, por que un objeto JavaScript puede ser usado en MongoDB como un documento y salvarlo en la base de datos ya que es muy parecida a JSON, MongoDB usa los binarios (bson).

x = { "a" : 1 };
y = "a";
x[y]++;
print(x.a);

Usando los Documentos

La shell tienen la variable “db” que es el identificador de la base de datos. Los documentos en la base de datos estan en las colecciones, por lo que las colecciones son conjuntos de documentos dentro de una base de datos.

Creamos una variable JavaScript

doc = {"nombre" : "Miguel", "twitter" : "@m_minugezz", "conocimientos": ["html5", "CSS3", "JS"]}

Si escibimos “db.persona.insert(doc)” interpreta que “persona” es el nombre de la coleccion de la base de datos actual, “insert” es un metodo que toma como argumento un objeto JavaScript y pone un documento en la base de datos. Con “find” sobre una colección nos retorna todos los documentos.

db.persona.find()

Con “findOne” recupera un documento al azar, es util para examinar el esquema.

db.persona.findOne()

podemos pasarle argumentos

db.persona.findOne({"nombre":"Miguel"})
db.persona.findOne({nombre:"Miguel"}, {"_id":false,"twitter":true})

El metodo “find” se puede usar como “findOne” para recibir todos los datos que coincidan con la consulta.
Si quisieramos buscar todas las personas con “edad” mayor a 25 y menor e igual a 30 usariamos

db.persona.find({edad:{$gt:25, $lte:30}})

Si lo usamos con cadenas de texto, usara la codificacion base para ordenar.

db.persona.find({nombre:{$gt:"M"}})
db.persona.find({nombre:{$lt:"M"}})

En estas busquedas si incluimos otros tipos de datos seran discriminados, por ejemplo que alguna persona tenga como nombre 56.
Podemos buscar los documentos que tengan la edad

db.persona.find({edad:{$exists:true}})

Podemos buscar los documentos que tengan la nombre del tipo “string”

db.persona.find({nombre:{$type:2}})

Podemos buscar usando expresiones regulares, de la libreria “libpcre“, como por ejemplo que acabe en “l” usando “l$” o que empieza con “M” ‘usando $regex:”^M”‘

db.persona.find({nombre:{$regex:"l$"}})

Podemos usar operadores logicos para unir consultas.

db.persona.find({$or : [{nombre : {$regex : "l$"}}, {edad : {$exists : true}}]})
db.persona.find({$and : [{nombre : {$regex : "l$"}}, {edad : {$exists : true}}]})

el operador logico “$and” es raro que lo necesitemos usar ya que como decir

db.persona.find({{nombre : {$regex : "l$"}}, {edad : {$exists : true}})

Si queremos buscar coincidencias en un array dentro de los documentos usaremos, tendra que tener los dos:

db.persona.find({conocimientos : {$all :["html5", "css3"]}})

Si queremos buscar coincidencias en un array pero que tenga alguno de los siguientes:

db.persona.find({conocimientos : {$in :["html5", "css3"]}})

Si dentro del documento hay objetos anidados y queremos hacer una busqueda o buscamos una coincidencia exacta o usamos la dotación de punto.

{
   name: "Juan",
   telf : {
      home : "555 66 77"
      work : "555 77 66"
   } 
}
> db.users.find({"telf.work" : "555 77 66"  })

Podemos modificar el cursor con “sort”, “skip” y “limit” en el servidor de MongoDB.

db.scores.find({type:"exam"}).sort({score:-1}).skip(50).limit(20);

Para contar los elementos usamos “count” que puede recibir los mismos parametros de consulta que “find”

db.persona.count({nombre:"Miguel"})

Para actualizar un documento, usamos “update” que recibe dos parametros, el primero es similar a los que hemos visto sobre “find” y sirve para encontrar el elemento a actualizar y el segundo todos los datos que queremos es este elemento, el resto de los datos que tenia desapareceran.

db.persona.update({nombre : "Miguel"}, {nombre : "M. Minguez", edad : 31 });

Si queremos modificar un campo, si el campo no existe lo crea:

db.persona.update({nombre : "Miguel"}, {$set : {telf : "555 667 777 "} });

Para incrementar un campo usaremos

db.persona.update({nombre : "Miguel"}, {$inc : {age : 1} });

Para eliminar un campo

db.persona.update({nombre : "Miguel"}, {$unset : {telf : 1} });

Trabajando con arrays

Cambiar un valor

db.persona.update({nombre : "Miguel"}, {$set : {"a.2": 5} });

Añadir un valor al final

db.persona.update({nombre : "Miguel"}, {$push : {"a": 4} });

Eliminia el ultimo valor

db.persona.update({nombre : "Miguel"}, {$pop : {a : 1} });

Eliminia el primer valor

db.persona.update({nombre : "Miguel"}, {$pop : {a : -1} });

Añade varios valores

db.persona.update({nombre : "Miguel"}, {$pushAll : {a : [7,8,9]} });

Eliminia un valor sin importar su lugar

db.persona.update({nombre : "Miguel"}, {$pull : {a : 7} });

Eliminia varios valores sin importar su lugar

db.persona.update({nombre : "Miguel"}, {$pullAll : {a : [8,9]} });

Si el valor no existe lo añade

db.persona.update({nombre : "Miguel"}, {$addToSet : {a : 8} });

Para actualizar un documento y si no existe lo añadimos

db.persona.update({nombre : "Pedro"}, {$set : {edad : 40} }, {upset:true});

Para actualizar todos los documentos añadiendo un campo

db.persona.update({}, {$set : {titulo: 'Señor'} }, {multi:true});
db.scores.update( { score : { $lt: 70 } } , { $inc : { score : 20 } } , { multi : true } );

Para eliminar documentos (sin argumentos elimina todo):

db.people.remove({nombre: "Juan"})

Usando “drop” eliminias todos los documentos

db.people.drop()

Para ver los errores

db.runCommand({getLastError:1});

si devuelve “null” es que la ultima operación tubo exito por lo que sirve para comprobar.

Plugins de Firefox, mis imprescindibles

Acabo de hacer una nueva instalación de Xubuntu para seguir el curso “M101JS: MongoDB for Node.js Developers” para segur todos los pasos del curso, instalando todo desde cero y lo primero que he echado en falta son los plugins de Firefox a los que tan acostumbrado estoy. Asi que voy a ir instalando

Mis imprescindibles: