Nombre del autor:juan

¿Se puede rentabilizar un blog?

Ganar dinero en internet / 1 comentario / Por

Tengo varios amigos que me preguntan si se puede ganar dinero con un blog, que están pensando escribir un blog para así dejar de trabajar. Lamentablemente siempre les tengo que dar la misma respuesta «si y no».

Por un lado, claro que si se puede pero tiene mucho trabajo. Lo primero me voy a saltar el término «viral», puesto que este es muy relativo y es muy difícil que se de. Cuando empezamos a escribir un blog tenemos que hacerlo porque nos gusta y no porque vamos a ser ricos con el. Solo cuando este punto está claro podemos trabajar en nuestro blog, porque no esperamos nada a cambio, lo hacemos por gusto.

Pero, ¿cómo gano dinero mi blog? Tienes 3 formulas principales: publicidad, artículos de pago o donaciones.

  • Publicidad: es la más clásica. Pones publicidad en tu blog y a escribir. Si tenemos la suerte que alguna empresa nos patrocine para poner su publicidad, podemos cobrar un fijo mensual, pero si no tenemos esa suerte, dependeremos de alguna plataforma tipo AdSense de Google para hacerlo. El problema, necesitamos muchas visitas, clicks y suerte para ganar dinero.
  • Artículos de pago: esta fórmula es difícil de conseguir pero es interesante. Cuando te contactan para este formato, solo tienes que escribir un artículo sobre una temática en concreto y te pagaran por ello. Hay empresas que ya te dan el artículo escrito y otras que permiten que lo escribas tu mismo. El precio varia en función del tamaño de tu blog, visitas, temática, etc. Es más rentable que la publicidad tal cual, pero tiene el problema que estás «vendido» por decirlo de alguna manera.
  • Donaciones: este es otro formato, menos explotado, puesto que o eres de mucha calidad y todo el mundo te conoce o no vas a ver ni un céntimo. Esta es la opción menos atractiva, ya que mucha gente no está dispuesta a pagar para leer algo en internet.

Sea cual sea la fórmula que elijamos para intentar ganar dinero con nuestro blog, debemos tener claro que necesitamos visitas. Sin visitas, da igual cuanta y de que calidad sea nuestra publicidad, no nos rentabilizará. En otro artículo explicaré como conseguir visitas para nuestro blog.

Por otro lado, no se puede ganar dinero con nuestro blog. Cuando la gente habla de ganar dinero con su blog, no se refiere unos centimos o euros al mes, se refiere a conseguir un sueldo con nuestro blog. Tengo un amigo que me dice:

Estoy leyendo un libro de uno que vive de escribir su blog, si el puede yo también

¡Claro que si! Poder se puede y esa es la actitud, si nunca lo intentas nunca lo lograrás, pero como decía al comienzo de la entrada, «tienes que hacerlo porque te gusta, no porque te harás rico». Por hacer un poco números en el aire, si partimos de Adsense y con este venimos ganando entorno 1€ cada mil visitas (estoy tirando por lo alto), deberíamos tener dos millones de visitas (2.000.000) al mes para conseguir un sueldo de 2.000€. Evidentemente esta regla no se aplica porque cuando tienes muchas visitas complementas con publireportajes, publicidad más cara, etc. pero desde luego, vemos lo difícil que es arrancar cuando las visitas iniciales son cero.

Hacer una consulta MongoDB comprobando que un atributo array no esté vacío

SQL / Deja un comentario / Por

En el ejemplo de obtener resultados aleatorios en una consulta de MongoDB y mongoose utilizaba un where un tanto especial. Este where es para comprobar que un atributo de tipo array que está contenido en el modelo tiene datos.

Primero definamos un ejemplo de modelo simple con el que vamos a trabajar. Lo detallo en formato JSON para no anclarnos a un entorno:

{
  name: "Nombre",
  code: "Código",
  screenshots: [],
  description: "Descripción"
}

Ahora con el modelo definido veamos como utilizarlo. Para ello debemos fijarnos en la sentencia where que vamos a utilizar.

[code lang=»json»]{ screenshots: {$exists: true, $not: {$size: 0}} }[/code]

En este where, sobre screenshots realizamos 2 comprobaciones. La primera comprobación es utilizar «$exists: true» donde indicamos que la propiedad necesariamente debe existir. Recordemos en las bases de datos de documentos como MongoDB no necesariamente deben coincidir todos los modelos en una colección (tabla) de la base de datos.

Lo segundo que comprobamos es «$not» negamos que el tamaño del array sea 0 o lo que es lo mismo «$size: 0», de esta forma, le pedimos a MongoDB que nos de solo modelos que tengan la propiedad screenshots y que el tamaño de screenshots sea mayor de 0.

Ahora volvamos a ver el ejemplo que usamos con mongoose.

var where = { screenshots: {$exists: true, $not: {$size: 0}} };

mongooseGameModel.count().where(where).exec(function(err, gameCount) {
  var rand = Math.floor(Math.random() * gameCount);

  mongooseGameModel.findOne().where(where).skip(rand).populate('developer').exec(function(err, game) {
    res.locals.randomGame = game;
    next();
  });
});

En este ejemplo utilizando mongoose contra MongoDB obtenemos un juego aleatorio de un listado que cumpla la condición de que screenshots no esté vacío.

Obtener registros aleatorios con MongoDB

SQL / Deja un comentario / Por

En una base de datos NoSQL como es MongoDB nos asaltan dudas constantemente. En este caso, ¿Cómo obtener un único registro aleatorio? A continuación os detallo como obtener este dato.

Para obtener un registro aleatorio debemos de realizar una consulta de un único elemento pero saltando los x primeros registros. De esta forma obtendremos el resultado. Nada mas fácil que verlo con un ejemplo. Para ello pondré 2 ejemplos uno directamente haciendo la consulta sobre MongoDB y otro utilizando ODM de Mongoose.

En MongoDB se haría de la siguiente forma.

[code lang=»javascript»]db.games.find().limit(-1).skip( _rand() * db.games.count() )[/code]

Si tenemos una tabla games con un listado de juegos y queremos seleccionar un juego aleatorio, lo podríamos hacer así. Seleccionamos todos los juegos, establecemos el limit a -1 y saltamos un aleatorio.

Otro método sería utilizando mongoose, este ya solo como programación.

mongooseModel.count().exec(function(err, resultCount) {
  var rand = Math.floor(Math.random() *resultCount);
  mongooseModel.findOne().skip(rand).exec(function(err, result) {
    console.log(result);
  });
});

Como podemos ver, es un lo mismo que hacerlo directamente sobre MongoDB pero añadiendo algo de complejidad en el proceso por las llamadas asíncronas. En primer lugar deberemos obtener el número de resultados, una vez los tengamos, podemos calcular el aleatorio y obtener con findOne el resultado que queremos.

Ya para terminar un buen ejemplo de como utilizar este código, es utilizando where para filtrar los resultados, que deberemos aplicar tanto a la hora de obtener el contador como cuando buscamos el resultado, ya que si no lo aplicamos en conjunto, puede fallarnos todo el código.

var where = { screenshots: {$exists: true, $not: {$size: 0}} };

mongooseGameModel.count().where(where).exec(function(err, gameCount) {
  var rand = Math.floor(Math.random() * gameCount);

  mongooseGameModel.findOne().where(where).skip(rand).populate('developer').exec(function(err, game) {
    res.locals.randomGame = game;
    next();
  });
});
nodeserver logo

Montar un servidor para node.js usando nodeserver

Sistemas y devops / 1 comentario / Por

Llevo tiempo trabajando con node.js y la verdad es que es el entorno donde mas cómodo me siento. El problema que tiene node.js es que cuando buscas como montar un servidor, no tienes ejemplos reales, solo como escuchar el puerto 80.

Para mis webs uso un servidor de desarrollo propio llamado nodeserver que podemos encontrar tanto en github como en npm. Este servidor tiene varias ventajas fundamentales:

  • Al ser un desarrollo propio, me permite fácilmente ir añadiendo nuevas funcionalidades según las necesito.
  • Tiene soporte para proxy reverso, por ejemplo tener las webs en un servidor interno sin acceso público y traer las conexiones.
  • Soporte de gestión de procesos para node.js, por lo que los .js de node.js que vamos a arrancar como servidores, podemos arrancarlos automáticamente desde el servidor, así como pararlos o reiniciarlos.
  • Tiene soporte para páginas estáticas en html, con un listado de mime types en desarrollo. Esto nos permite por ejemplo, crear un sistema cookieless para un CDN sin un backend, solo configurando el servidor.
  • Soporte para páginas en PHP. Aunque aún no soporta elementos como mod_rewrite, en un futuro lo tendrá, por lo que en el típico VPS para gestionar pequeños proyectos, podemos prescindir de un NGINX o Apache y utilizar nodeserver para gestionar nuestras webs.

Vamos a ver como se instala y configura este servidor. Para esto, primero debemos tener instalado en nuestro sistema node.js, cualquier versión o io.js. Este servidor funciona desde la versión 0.10 de node.js, aunque lo mas recomendable es utilizar las últimas versiones, 4.0 o superiores.

Con nodejs ya instaldo, debemos instalar por npm nodeserver

[code lang=»bash»]$ sudo npm install nodeserver -g[/code]

De momento nodeserver solo cuenta con script de instalación para centos pero se irá ampliando a otros sistemas, esto no quiere decir que no se pueda utilizar, no se instalará como demonio del sistema.

[code lang=»bash»]$ sudo nodeserver install centos[/code]

Una vez instalado el script, que no es obligatorio, deberemos configurar el servidor. Para ello crearemos un json de configuración en /etc/nodeserver/nodeserver.config.

{
 "nodeserver": {
  "admin": {
   "active": [true|false],
   "port": admin-port-number,
   "user": "user-for-admin",
   "password": "hash-password"
  }
 },
 "sites": [{
  "name": "website name",
  "type": "node|cgi",
  "bindings": [
   "example.com:80",
   "www.example.com:80",
   "otherbindings:8080",
  ],
  "port": "internal port number for the project, do not repeat it. Only for node"
  "script": "absolute script for server.js for node or doc_root for php (cgi)",
  "security": {
   "certs": {
    "key": "/absolutepath/keycert.key",
    "cert": "/absolutepath/cert.cert",
    "ca": ["/absolutepath/ca.cert"]
   },
   "bindings": [
    "securehostforhttps.com:443",
    "www.securehostforhttps.com:443"
   ]
  },
 }, {
  "name": "php website",
  "type": "cgi",
  "bindings": [
   "myphpsite.com:80"
  ],
  "script": "/var/www/phpsite"
 }, {
  "name": "standar nodejs site",
  "type": "node",
  "bindings": [
   "standarnodejs.com:80"
  ],
  "port": "10001",
  "script": "/var/www/nodejs1/server.js"
 }, {
  "name": "secure nodejs site",
  "type": "node",
  "bindings": [
   "securenodejs.com:80"
  ],
  "port": "10002",
  "security": {
   "certs": {
    "key": "/absolutepath/keycert.key",
    "cert": "/absolutepath/cert.cert",
    "ca": ["/absolutepath/ca.cert"]
   },
   "bindings": [
    "securenodejs.com:443"
   ]
  },
  "script": "/var/www/nodejs2/server.js"
 }]
}

El json de configuración se divide en 2 keys: una de administración y otra de sitios web. La parte de administración indicamos si queremos activarlo o no, el puerto de escucha via web, usuario y contraseña. La contraseña viene en formato hash y podemos generar una utilizando el comando:

[code lang=»bash»]$ nodeserver password micontraseña[/code]

El resultado deberemos utilizarlo en la configuración de password.

Por otro lado tenemos los sites. Los sites tienen como configuración un nombre, un tipo cgi para estáticos, php o node para webs en node.js. Un array de bindings indicará dominio y puerto que vamos a utilizar de escucha. En los bindings podemos incluir patrones regulares, por ejemplo, para cuando tenemos subdominios que queremos gestionar desde un mismo backend. Un ejemplo sería «.+\.midominio.com:80» para capturar todos los subdominios de midominio.com en el puerto 80. El atributo port solo se utilizar en node.js y es un puerto interno de escucha para servidores node.js. El atributo script utiliza para node.js la ruta del script de arranque del proyecto o el document_root para webs en php o estáticas.

Una vez todo configurado, ya podemos arrancar y probar nuestro servidor.

[code lang=»bash»]$ sudo nodeserver start[/code]

Os animo a probarlo y a comentar vuestras experiencias, mejoras, etc. Esto es un ejemplo, de como prepararlo en un entorno real, pero se puede configurar nodeserver como servidor de desarrollo, tener una escucha con el parametro start-loop en lugar de start.

¿Qué es un protocolo de ObjetiveC y para que se usan los protocolos en ObjetiveC?

ObjetiveC / 1 comentario / Por

Cuando programamos en ObjetiveC para iphone o ipad, utilizando funciones mas avanzadas de la interfaz gráfica nos encontramos con delegados, llamados también delegates. En estos casos, por ejemplo cuando tenemos un UIScrollView que captura el evento – (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView que utilizamos para controlar cuando ese UIScrollView se ha parado. Para controlar esto lo hacemos mediante el uso de los delegados. Pero mejor verlo con un ejemplo que se vea mas claro.

@implementation IndalcasaViewController

– (void)viewDidLoad {
[super viewDidLoad];
self.indalScroll.delegate = self;
}

– (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
int page = scrollView.contentOffset.x / scrollView.frame.size.width;

NSLog(@»Hemos cambiado a la pagina %i», page);
}

@end

Tras este ejemplo vemos como funciona un delegado en una clase normal de ObjetiveC. Pero aún no entendemos lo que significa ser un delegado. Un delegado no es mas que un nombre de convención, que podemos llamar como queramos y que utilizaremos como disparador, donde el objeto que está almacenado implementa una serie de funcionalidades definidas en un protocolo.

Se que ahora ha quedado claro del todo :P, pero mejor verlo en un ejemplo.

@interface IndalcasaViewController : UIViewController
@end

Como vemos en el ejemplo anterior, a la hora de extender la clase UIViewController decimos que implementa el protocolo UIScrollViewDelegate. Para los mas veteranos desarrolladores, un protocolo no es mas que una interfaz. Para los mas novatos, una interfaz es como una clase donde se definen llamadas pero no se implementa código.

Para verlo todo mas sencillo, vamos a poner un último ejemplo. Lo que vamos a hacer es definir otro UIViewController al que instanciaremos en el viewDidLoad y que implementará un metodo vacío llamado «cambioPagina» que recibirá la página por parámetro.

IndalcasaViewController.h
@interface IndalcasaViewController : UIViewController

@property UIViewController delegate;
@property (weak, nonatomic) IBOutlet UIScrollView *indalScroll;

@end

IndalcasaViewController.m
@implementation IndalcasaViewController

– (void)viewDidLoad {
[super viewDidLoad];
self.indalScroll.delegate = self;
}

– (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
int page = scrollView.contentOffset.x / scrollView.frame.size.width;

NSLog(@»Hemos cambiado a la pagina %i», page);

[self.delegate cambioPagina:page];
}

@end

DelegadoViewController.h
@interface DelegadoViewController : UIViewController
@end

@protocol IndalcasaDelegate

-(void)cambioPagina:(int)pagina;

@end

DelegadoViewController.m
@implementation DelegadoViewController

– (void)cambioPagina:(int)pagina {
NSLog(@»Hemos cambiado a la pagina %i con un delegado», pagina);
}

@end

Como vemos en el ejemplo, lo que hacemos es que cuando capturamos el evento scrollViewDidEndDecelerating, que nos indica que se ha parado el scroll, llamamos a un delegado, previamente seteado que implementa el protocolo (intefaz) IndalcasaDelegate. Como sabemos que el delegado, al implementar el protocolo IndalcasaDelegate tiene un método cambioPagina que recibe un entero con la página, podemos llamar al método desde el delegado.

Comentar también que en muchos casos, nos encontraremos delegados de tipo id y no de un tipo concreto. Los tipos id vendrían a ser tipos de objetos genéricos, algo parecido al object de cualquier lenguaje.

Yo soy programador. Gobierno de España

Otras cosas / 2 comentarios / Por

yo-soy-programador

El Gobierno de España, ha querido hacer un video para promover que la gente estudie un módulo de FP o Formación Profesional. He estado viendo varios de los videos que han hecho a raíz de llegar a twitter el de «programador».

He de decir que mi indignación como profesional es enorme tras ver este video. Creo que cualquier persona que se pare a ver el código se dará cuenta que es una tomadura de pelo y de hecho se ha pedido en change.org la eliminación del video por parte del Gobierno de España.

Cada cual que juzgue el video y la impresión que da. Pero desde luego, no creo que ningún joven quiera estudiar un módulo de FP por este tipo de videos.

Por que usar un framework para frontend web como bootstrap

CSS3 / 1 comentario / Por

CSS3Desde hace unos años han ido apareciendo de forma generalizada y bien desarrollada lo que todo el mundo solía hacer en sus desarrollos web y son pequeños frameworks para el frontend. Quien haya maquetado de forma continuada, con el tiempo habrá ido reutilizando técnicas entre proyectos. Por ejemplo, una de ellas es el uso de estilos de reseteo como el ya clásico reset.css o la creación y reutilización de componentes básicos como botones, migas de pan, etc.

Hace unos 3 o 4 años empezó a surgir una tendencia de creación de sistemas de grid, organizando nuestra web en columnas. El uso del grid nos facilita el trabajo, siempre y cuando no vayamos buscando el pixelperfect, ya que nos permite adaptar el ancho de las columnas, dar estilos generales y modificar la apariencia de nuestra web con pocas lineas de css sobre el grid ya creado.

Hace un par de años que empezaron a nacer los frameworks completos para frontend. Estos frameworks no son solo una base de estilos, sino también componentes de uso general que usamos a diario. A veces y según el desconocimiento de la gente, piensa como frameworks frontend cosas que no lo son. Para aclararlo creo que lo mas sencillo es quedarnos en jQuery. jQuery tiene varias ramas, la librería, que no es mas que una librería de manipulación de DOM, jQueryUI que es un framework de componentes frontend y jQuery Mobile que viene a ser no un framework frontend sino ya un fullstack de frontend. La diferencia entre ellos es evidente, ya que jQueryUI no nos da una base de estilos, ni un sistema del que poder extender nuestra página, sino unos componentes como botones, tabs, sliders, etc. con los que podemos crear componentes mucho mas ricos que los nativos de HTML. Por otro lado tenemos el fullstack de jQuery Mobile que no solo nos da un theme con estilos básicos sobre los que desarrollar, sino todo el sistema de navegación, control de menús, formatos, datos, etc.

¿Qué es un framework frontend para web? No es mas que un conjunto de librerías y estilos básicos que nos permiten construir interfaces frontend de forma rápida y personalizable. Comparandolo con jQueryUI, sería como añadir unos estilos de scaffolding para la construcción de la estructura de la página y un grid de maquetación. Si por otro lado lo comparamos con jQuery Mobile, sería lo mismo pero eliminando la parte en la que jQuery Mobile nos construye todo el sistema de navegación entre páginas (es un ejemplo), bajandolo por así decir de fullstack a framework.

bootstrap-logo

Los sistemas de scaffolding nos ayudan a crear prototipos de webs de forma rápida. Podemos generar de forma rápida, paginas, menús, secciones, formularios, todo con estilos genéricos. Una vez desarrollado nuestro scaffolding básico, podemos dedicar esfuerzos a personalizar el estilo de la página. Hay que tener en cuenta que donde se diferencia de la forma clásica que teniamos de trabajar si éramos ordenados es que no nos tenemos que preocupar de la evolución de nuestro framework de base de estilos y que ademas podemos reaprovechar los plugins que desarrolle la comunidad.

Ahora un breve listado con los 4 frameworks mas útiles, aunque hay muchos mas:

Espero que os pueda servir como punto de entrada para investigar y aplicar posteriormente en vuestros proyectos.

Animaciones en CSS3: transiciones en CSS3

CSS3 / 1 comentario / Por

Hace ya tiempo que no escribo y eso no puede ser. Así que hoy os quiero hablar de animaciones, en concreto me voy a centrar en transiciones con CSS3 o como se diría en ingles CSS3 transitions.

Lo primero es sentar unas bases de lo que es una transición. Básicamente cuando hablamos de transitions en CSS3, lo que hacemos referencia es una pequeña animación de css que se ejecutará como mezcla de 2 o mas clases. En concreto una transición de CSS3, lo que indica es que propiedades cambiarán con una animación. Pero es mas fácil con un ejemplo:

.clase-indalcasa {
  -webkit-transition: all 1s ease-in-out 0.2s;
  -moz-transition: all 1s ease-in-out 0.2s;
  -ms-transition: all 1s ease-in-out 0.2s;
  -o-transition: all 1s ease-in-out 0.2s;
  transition: all 1s ease-in-out 0.2s;
}

Si nos damos cuenta del código anterior, que se repite una y otra vez para dar salida a todos los metas de navegador experimental, veremos que la sintaxis básica es:

transition: [propiedades] [duración] [functión de tiempo] [tiempo de espera, retardo]

Como podemos ver, ahora entendemos mejor que hace referencia en la clase, tomando con concepto que todos los elementos son opcionales. A continuación una explicación más detallada:

  • propiedades (properties): son las propiedades que van a ser afectadas por la transición. Es un listado separado por comas «,». Por ejemplo, si queremos aplicar a todas las propiedades de un elemento usariamos «all», mientras que si queremos afectar por ejemplo a la altura y anchura usariamos «width, height» y así ir añadiendo propiedades a las que afectar. Al final dejare una tabla con una relación de los propiedades a afectar.
  • duración (duration): la duración se indica o bien en segundos o en milisegundos. Para ello después del número de cantidad, indicamos 0.5s o 500ms para indicar medio segundo. Si tenemos varias propiedades separadas por comas, podemos indicar los tiempos de manera similar para cada una de las propiedades.
  • función de tiempo (timing function): está es quizas la configuración mas interesante, ya que nos permite indicar que función de tiempo vamos a utilizar en la transición. Por defecto hay definidas varias definidas o utilizar un cubic-bezier para definir nosotros una personalizada.
    • ease: mantiene una aceleración y frenada al principio y al final de la animación.
    • ease-in: tiene una aceleración y el final es constante hasta que termina.
    • ease-out: no tiene aceleración, sino que alcanza su tope desde el principio pero va frenando poco a poco.
    • ease-in-out: similar a ease pero con la aceleración y frenada mas prolongadas.
    • linear: es como su nombre indica, linear y constante en el tiempo
    • cubic-bezier: nos permite definir una función de curva de bezier personalizada. Esto da para todo un tema aparte y para empezar a entender que es: Curva de Bezier en Wikipedia
  • tiempo de espera, retardo (delay): al igual que la duración, se indica en segundos o milisegundos.

Ahora algunos ejemplos:

pasame
por encima

El código de este ejemplo sería:

.indalcasa-transition-hover {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.3);
  -webkit-transition: all 2s ease-in-out;
  margin: 20px auto;
  line-height: 50px;
  text-align: center;			
}

.indalcasa-transition-hover:hover {
  width: 500px;
  height: 500px;
  background: rgba(0, 255, 0, 0.3);
  font-size: 50px;
  line-height: 250px;
  border-radius: 250px
}
<div class="indalcasa-transition-hover">pasame<br/>por encima</div>

Por último y para terminar esta breve explicación, una tabla de propiedades que se pueden o no cambiar con las transiciones.

Nombre de la propiedad Tipo de valor
background-color color: nombre, hexadecimal, rgb, rgba
background-image gradientes de css
background-position porcentaje, tamaño: pixeles, em, etc
border-bottom-color color: nombre, hexadecimal, rgb, rgba
border-bottom-width tamaño: pixeles, em, etc
border-color color: nombre, hexadecimal, rgb, rgba
border-left-color color: nombre, hexadecimal, rgb, rgba
border-left-width tamaño: pixeles, em, etc
border-right-color color: nombre, hexadecimal, rgb, rgba
border-right-width tamaño: pixeles, em, etc
border-spacing tamaño: pixeles, em, etc
border-top-color color: nombre, hexadecimal, rgb, rgba
border-top-width tamaño: pixeles, em, etc
border-width tamaño: pixeles, em, etc
bottom tamaño: pixeles, em, etc, porcentaje
color color: nombre, hexadecimal, rgb, rgba
crop rectangulo
font-size tamaño: pixeles, em, etc, porcentaje
font-weight número, nombre
grid-* varios
height tamaño: pixeles, em, etc, porcentaje
left tamaño: pixeles, em, etc, porcentaje
letter-spacing tamaño: pixeles, em, etc
line-height número, tamaño: pixeles, em, etc, porcentaje
margin-bottom tamaño: pixeles, em, etc
margin-left tamaño: pixeles, em, etc
margin-right tamaño: pixeles, em, etc
margin-top tamaño: pixeles, em, etc
max-height tamaño: pixeles, em, etc, porcentaje
max-width tamaño: pixeles, em, etc, porcentaje
min-height tamaño: pixeles, em, etc, porcentaje
min-width tamaño: pixeles, em, etc, porcentaje
opacity número de opacidad, de 0.0 a X
outline-color color: nombre, hexadecimal, rgb, rgba
outline-offset número
outline-width tamaño: pixeles, em, etc
padding-bottom tamaño: pixeles, em, etc
padding-left tamaño: pixeles, em, etc
padding-right tamaño: pixeles, em, etc
padding-top tamaño: pixeles, em, etc
right tamaño: pixeles, em, etc, porcentaje
text-indent tamaño: pixeles, em, etc, porcentaje
text-shadow valores
top tamaño: pixeles, em, etc, porcentaje
vertical-align nombres, tamaño: pixeles, em, etc, porcentaje
visibility valores de css
width tamaño: pixeles, em, etc, porcentaje
word-spacing tamaño: pixeles, em, etc, porcentaje
z-index posición de entero
zoom número

Publicada la versión 0.8.53 de w2s cloud ide

w2s / 3 comentarios / Por

w2sOs traigo buenas nuevas y es que hace poco se ha liberado la versión 0.8.53 de nuestro proyecto w2s cloud ide. En esta versión hemos trabajado para solucionar problemas, automatizar tareas, aunque aún no es suficiente y ofrecer algunas mejoras que suponen un importante avance en el desarrollo  de la herramienta. Cabe destacar en esta versión de w2s los avances que se han realizado sobre la configuración y compilación de proyectos de .Net, así como poder dar soporte a python, con django a la cabeza. También es importante el cambio de la forma de visualizar los errores, de una linea roja completa, para indicar el error, a un ligero subrayado al lugar del error, así como la posibilidad de cambiar el template de colores no solo del código, sino del ide completo, que ahora se puede oscurecer o clarecer y sigue todo una consonancia. Os dejo la lista completa de con todos los cambios: Correcciones * Ahora el visor de imagenes siempre muestra las dimensiones de la imagen y no 0x0 cuando la imagen no estaba cacheada. Mejoras

  • Ahora se pueden crear nuevos proyectos con templates
  • Se añade un validador de css, que nos corrige y hace sugerencias acerca de nuestro código css
  • Se actualiza el editor con multiples mejoras, entre algunas, cabe destacar que ahora los errores no resaltan la linea completa, sino que muestra un subrayado rojo para los errores y amarillo para las advertencias.
  • Añadido soporte de django al ide en general
  • Al crear un nuevo template de proyecto, ya disponemos de uno para django
  • Se añaden al menu contextual una nueva sección django con las subopciones: runserver, stopserver, syncdb y collectstatics
  • Se recoloca la opción de compilar un proyecto de c# para que este dentro de csharp > compile
  • Se añade soporte de jpeg al visor de imagenes
  • En c#, las referencias a otros proyectos ahora son copiadas directamente a nuestro proyecto cuando compilamos
  • Se añade soporte multicultural (multiidioma) a los proyectos de c#, permitiendo así crear librerias localizadas.
  • Se añade un generador de archivos de recursos para .Net, que compilan un xml de resx y lo convierten en recursos embebidos para los archivos neutrales y librerias compiladas satelite para las externas.
  • Añadido autocompletado de código en c# y python. Ahora el código se autocompleta en c#, python, javascript y html5.
  • Añadidos puntos de interrupción a c# aunque aún no se puede depurar.

  • Añadidos templates para el ide, al oscurecer el editor de codigo, nuestro ide (menu, navegación, consola, etc) también cambia de color. Planificadas

  • Permitir la opción de manterner la sesión abierta permanentemente.

  • Añadir un contralador al ide para mostrar un login si nuestra sesión ha expirado.

  • Permitir borrar proyectos de forma segura.
  • Depurar proyectos de c#
  • Permitir mover carpetas y ficheros entre si
  • Permitir renombrar ficheros y directorios
  • Permitir autoocultar tanto la consola como el menú de navegación
  • Integración con GIT.
  • Publicación por FTP
  • Compartir proyectos entre usuarios
  • Añadir tareas a los proyectos Recordad que estamos abiertos a sugerencias y si las tenéis, podeis dejarnoslas en los comentarios y las estudiaremos para implementarlas.
Scroll al inicio