2013

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

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

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

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

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

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.

Modas y versiones o como pasar no actualizar a sacar verisones como churros

enter-key-appleHacia tiempo que no escribia un post incendiario y creo que hoy es un buen día para ello. Últimamente estoy viendo una moda en las versiones de las aplicaciones que yo clasificaría en la de «estamos todos locos» o como diría vayavoragine «vamos a morir todos» y es que últimamente aparecen versiones como churros. Pero voy a hacer un poco de abuelo cebolleta y os voy a contar como ha evolucionado la moda con el paso de los últimos 15 o 20 años en la industria del software para que os hagais un poco a la idea de este brutal cambio.

Cuando Adan y Eva andaban por el paraiso y cogiendo la manzana prohibida acabaron por NextStep, alla por los años 80 y 90, las versiones del software era como un buen artículo de la Wikipedia expondría y es que son numeradas con {version}.{subversion}.{revision}.{commit,fecha,codigoquequeramos}.

La idea es que nuestra versión solo se actualiza cuando sufre cambios importantes y que afectan tanto que podría significar que se trata de una version completamente nueva, aquí podemos poner como ejemplos: una reescritura del código, cambio de lenguajes o librerías, o un cojunto de tantos cambios de golpe que podamos considerar que es un nuevo programa y de ahi su salto de version. Muchas veces tambien se asocia a un cambio de diseño, sobre todo en versiones web.

La subversión (con confundir con SVN), hace referencia a cambios, que aunque también grandes, no varian brutalmente el diseño de la web, por ejemplo añadir una o varias nuevas funcionalides. Imaginemos que tenemos wordpress y de repente hay una nueva funcionalidad que añade un nuevo módulo de galeria de fotos, esto sería una subversión, pero si por el contrario, la funcionalidad fuera permitir (de forma nativa y sin plugins) un sistema de multidioma para los artículos que conlleva la reescritura de medio core de wordpress, entonces, se podría considerar una versión nueva.

De revisión hasta el final, es algo opcional y solo informativo, normalmente la revision suelen ser las releases oficiales, aunque no se hayan hecho públicas, por ejemplo, cada vez que compilamos para sacar una versión en producción o en entornos de desarrollo, podríamos considerarlo como revisión y puede tener pocos o ningún cambio. Igual pasa con los siguientes parámetros, que suelen hacer referencia, si es que se usan, a número de commit en el control de código, la fecha del día, un número aleatorio o algún código que haga referencia a la fecha y número de veces que hemos compilado.

Hasta aquí la explicación, ahora vamos con la historia. Hace años se respetaba esta teoría en mayor o menor medida, cada versión nueva era un software nuevo, cientos de funcionalidades nuevas, mejoras importantes, rediseños completos, algo grande y por tanto, las versiones de los software eran pequeñas y una buena muestra es el propio Microsoft Windows que en 30 años y 14 versiones oficiales, realmente la version de Windows 8 es la 6.2.9200. A veces se daba el caso en que algún software, para competir un poco, se saltaba alguna versión para dar mas apariencia de software maduro, como por ejemplo y sin salir del ejemplo de Microsoft, nos encontramos con SQL Server, que salto de la versión 1.1 a la 4.21 haciendo un chasquido de dedos… y ¿Dónde quedaban la versión 2 y 3? Pues cuando le preguntaron esto, como si de guionistas de Lost se trataran, con otro chasquido de dedos, estabamos ante la versión 6 ¿Y la 5? y lo que sería la llegada a la normalidad en las versiones de SQL Server.

Algunos pensaran, que Microsoft, que malo es, vade retro, pero en realidad era una práctica común cuando un software se quedaba atras y es que por aquella época, Oracle con 15 años mas de desarrollo a sus espaldas, contaba con su versión 7 de base de datos, mientras que SQL Server solo la 1.1, por lo que se vieron obligados a saltar hasta una versión 6, indicando que eran inferiores a Oracle pero no estaban tan lejos. Caso así encontramos a Firefox, que el pobre, tuvo que optar por la moda del rapid release para poder competir con Chrome que saca versiones como churros.

¿Qué es eso del rapid release? Es cambiar la forma de obtener versiones, en lugar de tener varios branchs de desarrollo en versiones diferentes, las  versiones nacen y mueren rápidamente para centrar todo el esfuerzo en una funcionalidad, sacarla con una versión y pasar a la siguiente. Esto tiene cierta lógica en desarrollos en producción y que no necesite de excesivo testeo, por ejemplo, implementar en el caso de Firefox, ciertas funcionalidades experimentales de HTML5 que pueden fallar pero que de entrada funcionan mas o menos.

De todos es conocido que Google Chrome, utiliza rapid release, que se puede ver como en cuestión de 3 años han sacado 25 versiones y para no quedar descolgado, Firefox se ha subido al carro del rapid release. Ya con esto nos podemos echar en cierta medida las manos a la cabeza, ya que cada mes o dos meses tenemos una nueva versión, pero el colmo ha sido Linux. Hace como un año, leia la noticia que la versión del Kernel de Linux iba a ser actualizada hasta la versión 3, no por los cambios que conllevaba, sino por pasar de la version 2.6 en la que llevaba anclada prácticamente 6 años. Cual es mi sorpresa que ayer leia que se había publicado la versión 3.8 del Kernel de Linux y es que habían publicado 8 subversiones.

Cada día hay mas proyecto/empresas que adoptan el rapid release y aunque cada uno pone las versiones que les da la gana, digo yo, si seguimos sacando versiones como churros, apareceran doodle por versión en Chrome, tal como desactivar el modo incognito en la version 69, o haciendo referencia al hombre el la luna. Lo curioso del caso es que, hace unos años, habia otra moda, la moda del «beta» y como recordar a tantos proyectos marcados como «beta», sin ir mas lejos GMail o el «peta» de meneame.

¿Pasamos 5 años en modo beta y luego adoptamos un rapid release y sacamos 14 versiones en 2 años? Así que publico esto en mi WordPress 33, con mi OSX 21.37 y luego veo el post con mi iphone 11. Y como colofón, mencionar como Apple con la tontería, hace tiempo que su iPad3 es solamente iPad y el resto de versiones, son solo iPad, sin versión. Y es que el mundo se ha vuelto loco.

Tabla de codificaciones de caracteres entre ANSI, UTF-8, Javascript, HTML

ene-virguilillaCuando hacemos una página web en utf8, al escribir una cadena de texto en javascript que contenga acentos, tildes, eñes, signos de interrogación y demás caracteres considerados especiales, se pintara de una forma extraña en el html. Esto es porque javascript tiene su propio sistema de codificación, al igual que el html. A continuación os dejo una tabla con los principales caracteres que se utilizan, ya que es útil tenerlos a mano para poder escribirlos:

ANSI UTF-8 JAVASCRIPT HTML
Á Á u00c1 &#193;
á á u00e1 &#225;
É Ã‰ u00c9 &#201;
é é u00e9 &#233;
Í Ã u00cd &#205;
í í u00ed &#237;
Ó Ã“ u00d3 &#211;
ó ó u00f3 &#243;
Ú Ãš u00da &#218;
ú ú u00fa &#250;
Ñ Ã‘ u00d1 &#209;
ñ ñ u00f1 &#241;
¿ ¿ u00bf &#191;

Y después de esta tabla a modo de apunte, os dejo la tabla completa de codificación de caracteres como eñes, acentos, tildes y demás caracteres entre ANSI, UTF8, Javascript y HTML:

ANSI UTF-8 JAVASCRIPT HTML
 u00a0 &#160;
¡ ¡ u00a1 &#161;
¢ ¢ u00a2 &#162;
£ £ u00a3 &#163;
¤ ¤ u00a4 &#164;
¥ Â¥ u00a5 &#165;
¦ ¦ u00a6 &#166;
§ § u00a7 &#167;
¨ ¨ u00a8 &#168;
© © u00a9 &#169;
ª ª u00aa &#170;
« « u00ab &#171;
¬ ¬ u00ac &#172;
­ ­ u00ad &#173;
® ® u00ae &#174;
¯ ¯ u00af &#175;
° ° u00b0 &#176;
± ± u00b1 &#177;
² ² u00b2 &#178;
³ ³ u00b3 &#179;
´ ´ u00b4 &#180;
µ µ u00b5 &#181;
¶ u00b6 &#182;
· · u00b7 &#183;
¸ ¸ u00b8 &#184;
¹ ¹ u00b9 &#185;
º º u00ba &#186;
» » u00bb &#187;
¼ ¼ u00bc &#188;
½ ½ u00bd &#189;
¾ ¾ u00be &#190;
¿ ¿ u00bf &#191;
À À u00c0 &#192;
Á Á u00c1 &#193;
 Â u00c2 &#194;
à Ã u00c3 &#195;
Ä Ã„ u00c4 &#196;
Å Ã… u00c5 &#197;
Æ Ã† u00c6 &#198;
Ç Ã‡ u00c7 &#199;
È Ãˆ u00c8 &#200;
É Ã‰ u00c9 &#201;
Ê ÃŠ u00ca &#202;
Ë Ã‹ u00cb &#203;
Ì ÃŒ u00cc &#204;
Í Ã u00cd &#205;
Î ÃŽ u00ce &#206;
Ï Ã u00cf &#207;
РÐ u00d0 &#208;
Ñ Ã‘ u00d1 &#209;
Ò Ã’ u00d2 &#210;
Ó Ã“ u00d3 &#211;
Ô Ã” u00d4 &#212;
Õ Ã• u00d5 &#213;
Ö Ã– u00d6 &#214;
× Ã— u00d7 &#215;
Ø Ã˜ u00d8 &#216;
٠Ù u00d9 &#217;
Ú Ãš u00da &#218;
Û Ã› u00db &#219;
Ü Ãœ u00dc &#220;
Ý Ã u00dd &#221;
Þ Ãž u00de &#222;
ß ÃŸ u00df &#223;
à Ã u00e0 &#224;
á á u00e1 &#225;
â â u00e2 &#226;
ã ã u00e3 &#227;
ä ä u00e4 &#228;
å Ã¥ u00e5 &#229;
æ æ u00e6 &#230;
ç ç u00e7 &#231;
è è u00e8 &#232;
é é u00e9 &#233;
ê ê u00ea &#234;
ë ë u00eb &#235;
ì ì u00ec &#236;
í í u00ed &#237;
î î u00ee &#238;
ï ï u00ef &#239;
ð ð u00f0 &#240;
ñ ñ u00f1 &#241;
ò ò u00f2 &#242;
ó ó u00f3 &#243;
ô ô u00f4 &#244;
õ õ u00f5 &#245;
ö ö u00f6 &#246;
÷ ÷ u00f7 &#247;
ø ø u00f8 &#248;
ù ù u00f9 &#249;
ú ú u00fa &#250;
û û u00fb &#251;
ü ü u00fc &#252;
ý ý u00fd &#253;
þ þ u00fe &#254;
ÿ ÿ u00ff &#255;

Espero que os sirva de ayuda tanto como a mi.

ASP.Net MVC Razor, la evolución desde apsx webforms hacia MVC y fundamentos básicos de ASP.Net MVC

aspnetQuienes hayan trabajado alguna vez con .Net, conocerán el sistema de plantillas de ASP.Net llamado webforms. Los webforms fueron un sistema de vistas con extensión aspx que podían ir o no acompañadas de un codebehind y controles. El objetivo de Microsoft cuando diseño esta parte del framework de .Net fue mover a los desarrolladores a crear aplicaciones en nube, que aunque ahora este tan de moda el termino nube, estamos en un contexto del año 2000. Los webforms permitían desarrollar una web, tal y como los desarrolladores del viejo Visual Basic hacían sus aplicaciones de escritorio, donde las páginas eran llamadas formularios (de ahí el término webform) y los elementos tales como inputs, botones, etc, se arrastraban con un editor wysiwyg. Los antiguos webforms, aunque simulaban un entorno de escritorio, en cuanto a formularios, no eran otra cosa que webs y como tales podías tocar el html desde el editor y no solo tener la opción de editor wysiwyg, encontrando bajo el capo una web de código espagueti tal y como siempre se habló de php por ejemplo, salvo que parte de la lógica estaba en el codebehind. Esta última parte era lo peor de todo, puesto que si el desarrollador era experto, el código espagueti era minúsculo, pero a medida que descendía la pericia del programador, aumentaba el tamaño tanto del codebehind como del propio espagueti html que era ese aspx webform.

Microsoft publico todo esto en las primeras versiones del .Net framework y fue un bombazo, cualquiera podía hacer una web con muchos formularios en un tris, pero claro, ahí esta está el cliente para recordarnos que era muy feo y que lo querían mas bonito como habían visto por internet otras páginas. Es entonces cuando empiezan a verse los primeros problemas a la hora de realizar webs y es que aspnet 1 no tenia soporte para páginas maestras, por lo que los desarrolladores acababan en practicas comunes en otros lenguajes y que eran tan criticadas como copiar y pegar la misma estructura de página (controles, cabecera, menu, pie, etc) por todas y cada una de las páginas que tuviéramos en nuestro proyecto. Así que como novedad, Microsoft pensó que aparte de cambiar la forma de incluir los controles en una web, automatizando todo el proceso, penso que era hora de crear un concepto mas que necesario, una masterpage. Una masterpage, no es mas que como su nombre indica, una página maestra, digamos que todo ese contexto de cabeceras, menu, pie, etc que ibamos copiando de página a página pero que ahora se centraliza en un sitio, marcando en esa página maestra, donde queremos que se renderice el contenido de la página. Esto supuso un gran avance, ya que las páginas desarrolladas con ASP.Net, fueron mejorando en el punto que eran mas limpias. Aun y con todo, seguian los problemas, el auge de librerías de javascript dinámicas, con efectos y llamadas de ajax, dejaba en ridículo a controles muy cerrados tipo updatepanels y los desarrolladores pedían a gritos mas flexibilidad.

Cuando uno ha vivido toda la vida amamantado por la teta de Microsoft, no se percata de cierta rigidez a la hora de desarrollar una web con ASP.Net, pero quien tocara cualquier otro entorno, veia como en php y python, aparecian framework MVC, que permitian utilizar todas esas librerias de ajax pero sin montar un pipote (caos) de código para que funcionen bien. Es entonces cuando aparece MVC. El concepto de MVC es un concepto creado en 1979, no trae ninguna novedad como tal, pero si que introduce ese concepto en ASP.Net teniendo una serie de caracteristicas fundamentales (en un sistema normal sin mucha floritura):

  • Los controladores son siempre los que reciben las peticiones, ya no hay controladores genéricos ashx, servicios asmx, paginas aspx, controles ascx, ni masterpages master. Los controles son clases donde por defecto, sus métodos serán aciones del controlador.
  • Las vistas son solo eso, vistas, con sintaxis webform en MVC 1 y 2 y con Razor en MVC 3 y 4.
  • Los modelos son clases con propiedades multifunción, validar automáticamente datos, enviar y recibir formularios, sincronizar datos con la base de datos (Entity Framework Code First).
  • El proyecto es un binario cerrado, como ocurría en la primera versión de ASP.Net y en el resto si lo cambiabas a proposito, ya no hay mas código abierto con el que dejar a IIS que compile el código, como si fuera php.

Hasta aquí, una breve explicación de como surge MVC, pero ¿Y Razor? Razor es el nuevo sistema de templates de ASP.Net MVC. Quien haya programado con webforms, se habrá dado cuenta que en una página con un poco de lógica, acaba creciendo mucho y complicando la sintaxis con abre código <%, mete código, cierra código %>, haciendo que no solo crezca una página, sino que además, el código se vuelve mas y mas feo por momentos. Razor soluciona esto con 2 procedimientos, el primero es su cierre automático inteligente, es decir, la etiqueta de apertura será una arroba @, pero no tendrá cierre como tal. La segunda peculiaridad es que el código es mucho mas fluido puesto que se aprovecha del propio html para formar ciertas partes de la sintaxis. Ademas, Razor tiene algunas ventajas como son poder indicar un modelo que utiliza la página para hacer validaciones, formularios y pintar datos de una forma mas sencilla.

Veamos un par de ejemplos de código hecho con Razor frente al hecho con webform:

@model Indacalsa.Models.LoginModel

@using (Html.BeginForm("Login", "Account", FormMethod.Post)) {
  @Html.AntiForgeryToken()
  <fieldset id="login">
    <legend>Datos de acceso @ViewBag.Title</legend>
    <p>
      <label>
        <span class="title">Usuario:</span>
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
      </label>
    </p>
    <p class="center">
        <input type="submit" value="Acceder" class="btn" />
    </p>
  </fieldset>
}
<form method="post" action="/Login/Account.aspx" runat="server">
  <fieldset id="login">
    <legend>Datos de acceso <%=this.Title%></legend>
    <p>
      <label>
        <span class="title">Usuario:</span>
        <asp:TextBox name="UserName" id="UserName" runat="server" />
        <asp:RegularExpressionValidator ID="validatorUserName" runat="server" ControlToValidate="UserName" ErrorMessage="La longitud mínima es de 5 caracteres" ValidationExpression=".{5}.*" />
      </label>
    </p>
    <p class="center">
        <asp:Button value="Acceder" class="btn" runat="server" />
    </p>
  </fieldset>
</form>

Lo he simplificado, primero en Razor y luego en ASP.Net webforms. La parte de webforms la he simplificado sin utilizar el tipico form que ocupa toda la página y sin mucha historia, para dar un acercamiento de como va el tema. Aparte de este ejemplo hay que sacar la mala experiencia de utilizar controles de webform y sus ids mágicos, si es que luego queremos dinamizar la página con ajax o javascript.

Y para los que vengan de atras, aquí van algunas similitudes entre webform y Razor:

  • Las masterpage de webform ahora son llamadas Layouts
  • Los controles de webform ahora son vistas parciales, pero con la salvedad de que no tendrán codebehind.
  • Para especificar código espagueti o en linea en webforms se hace con <% codigo %> y <%=codigo%>. Con Razor se hace con @micodigo o @(micodigo_muy_complejo).
  • Para ir renderizando texto dentro del código de Razor ya no es necesario abrir y cerrar las etiquetas de codigo <% y %>, sino que podemos usar <text>texto a renderizar</text>
  • Los asp:content de las masterpages ahora son sections.

Espero que os guste y os sirva un poco a aquellos rehacios a migrar a MVC o desde otros lenguajes.

W2S web ide

w2sLlevo una temporada sin escribir en el blog. El motivo es porque he estado trabajando en un proyecto, que aún no está terminado. El proyecto en concreto se llama w2s y se trata de un ide de desarrollo web que esta ahora mismo en una fase alfa pero completamente funcional. w2s es un entorno de trabajo, con el que poder desarrollar en multitud de lenguajes de programación. Actualmente aunque falta mucho por desarrollar, ya permite programar en c#, php, html, javascript y css.

¿Por qué crear un ide completo de desarrollo? Muy sencillo, porque no hay nada similar. En mi caso, programo en C#, pero utilizo OSX, a veces programo en PHP y otras veces en HTML y Javascript con Phonegap. El problema está en que para programar en C# para OSX solo se puede con Mono, que está muy retrasado con las nuevas versiones de .Net. En Windows ocurre lo mismo, para C# tienes el Visual Studio, que es muy bueno para C# pero no soporta PHP ni webs unicamente en HTML y Javascript. Luego existe el problema de trabajar en distintos sitios, el trabajo, en casa, el ordenador de mi mujer, incluso en el ipad. Es por estas cosas por las que un día decidí crear w2s, para tener un repositorio centralizado donde poder trabajar, con un ide de desarrollo online que me permitiese en una misma aplicación desarrollar en C#, PHP, Javascript, HTML5, CSS y poco a poco mas y mas lenguajes.

Cada día uso w2s en mas y mas desarrollos, entre los cuales cabe destacar el propio w2s. Entre las funcionalidades mas destacadas se encuentran:

  • Editor de código en C#, PHP, Javascript, HTML5, CSS3.
  • Intellisense o autocompletado de código para HTML5, Javascript y estoy trabajando en CSS3 y C#.
  • Avisador de errores en el código de Javascript.
  • Compilador de C#.
  • Poder subir archivos arrastrandolos desde el escritorio
  • Poder descargar el proyecto completo en un zip.
  • Cuenta de ftp
  • Un giga de espacio ampliable para almacenar proyectos
  • Tester web para probar la web como un pc, ipad, iphone4, iphone5

Ire publicando nuevas actualizaciones con cambios que vaya realizando. Y como siempre, quien quiera participar en la fase alfa o en posteriores versiones beta privada y beta publica, solo tiene que dejar un mensaje.

Scroll al inicio