viernes, 5 de febrero de 2016

Instalar Oracle Java 8 (JDK) en Ubuntu y derivados, desde repositorio PPA


Para instalar el Oracle JDK de Java 8 en Ubuntu y distros derivadas, esta disponible el repositorio WebUpd8 Oracle Java PPA. Para agregar este repositorio, ejecutamos los siguientes comandos en la consola de linux:

$ sudo add-apt-repository ppa:webupd8team/java
$ sudo apt-get update

Luego, para instalar el JDK de Java 8, ejecutamos el siguiente comando:

$ sudo apt-get install oracle-java8-installer

Finalmente, para verificar la version instalada de Java, podemos ejecutar los siguientes comandos:

$ java -version
$ javac -version

El primer comando es para consultar la version del JRE, y el segundo es para consultar la version del compilador de JAVA. En ambos casos puede observarse que el numero de version es 1.8.0.


De acuerdo al articulo original publicado en el sitio web de WebUpd8, el repositorio PPA es soportado por Ubuntu 15.04, 14.10, 14.04 y 12.04, o superiores, asi como Linux Mint 17.1, 17 y 13, o superiores. Tambien es soportado por otras distros derivadas de estas versiones (en mi caso, por ejemplo, Elementary OS Freya).

domingo, 17 de enero de 2016

Configurar trabajo para ejecutar tareas programadas de Magento 1.9 en Ubuntu


Para que se puedan ejecutar todas las tareas programadas de Magento 1.9.1 Community Edition (entre ellas el envío de correos usando la cola), es necesario programar la ejecución del script Cron.php, ubicado en el directorio de instalación de Magento. Pero antes de programarlo, y para tratar de asegurar y verificar su correcta ejecución, es recomendable hacer los siguientes preparativos:

1. Instalar la extensión AOE Scheduler a través de Magento Connect. Esta extensión nos permitirá programar las tareas dentro de Magento, y observar su historial de ejecución. Aunque en la página web de la extensión dice que es compatible hasta la versión 1.7 de Magento Community Edition, funciona correctamente en Magento 1.9.1.

2. Luego, en el sitio web de administración (backend) de Magento, ingresamos a la opción del menú System > Scheduler > Timeline View.



En esta página podemos observar una línea de tiempo de las tareas programadas de Magento, en un formato de línea de tiempo. Es posible que esté vacía, si no hay ninguna tarea programada por el momento. Para generar un nuevo conjunto de tareas programadas a ejecutar, presionamos el botón Generate Schedule.




3. Después probamos la ejecución del script por sí solo. Para ello, podemos ejecutar el script cron.sh en la terminal de la máquina virtual. Considerando una instalación por defecto de una máquina virtual de Bitnami, este archivo se ubica en /opt/bitnami/apps/magento/htdocs, y podemos ejecutarlo con el usuario bitnami.

$ cd /opt/bitnami/apps/magento/htdocs
$ sh cron.sh

Luego, en el sitio web de administración de Magento, ingresamos nuevamente a la opción Timeline View. Si el script se ejecutó correctamente, se observará que algunas de las tareas programadas aparecen en verde, indicando que fueron ejecutadas correctamente. Nótese que la línea roja indica la hora en la que se cargó la página, por lo que cabe mencionar que si todas las marcas de tareas están después de la línea roja, estas no se habrán ejecutado, y habrá que esperar a que la línea roja alcance alguna de ellas, antes de ejecutar el script cron.sh.


Si no hay ninguna tarea en verde, es posible que el script no se haya podido ejecutar correctamente. En ese caso podemos probar ejecutar directamente el script de PHP, así:

$ php –f cron.php

Si a pesar de ello no se ejecutan las tareas programadas, habrá que revisar si el script no devolvió ningún error durante la ejecución, y si el usuario con el que lo estamos ejecutando es el propietario del archivo. En mi caso, por defecto el propietario del archivo es bitnami, y los permisos del archivo son -rw-r--r--.

4. Como paso intermedio, averiguamos donde se ubica el ejecutable de php que se usa por defecto. Para ello en la terminal ejecutamos el comando:

$ which php

Por defecto en la máquina virtual de Bitnami el ejecutable se ubica en /opt/bitnami/php/bin/php

5. Suponiendo que el script se ejecutó correctamente, procedemos a programar la ejecución del script usando crontab. Para ello, en la terminal de la máquina virtual ejecutamos el comando:

$ crontab –e

Esto nos abrirá (en algún editor de texto) el archivo de tareas programadas de Linux para el usuario actual. En este debemos ingresar la siguiente línea:

*/5 * * * * /opt/bitnami/php/bin/php –f /opt/bitnami/apps/magento/htdocs/cron.php

Con ello se estaría programando la ejecución del script cron.php cada 5 minutos, que es lo que recomiendan usualmente para esta tarea de Magento. Recomiendo dejar una línea en blanco al final del archivo, por si acaso.

En teoría debería ser posible ejecutar el archivo de bash cron.sh en lugar de cron.php, utilizando el ejecutable /bin/sh, así:

*/5 * * * * /bin/sh /opt/bitnami/apps/magento/htdocs/cron.sh

Pero en mi caso generaba un error de Permission Denied, al intentar ejecutar la tarea.

6. Luego, esperamos alrededor de 5 minutos (en realidad la tarea no se ejecuta cada 5 minutos desde que la creamos, sino en los minutos múltiplos de 5, como 4:00 PM, 4:05 PM, 4:10 PM, y así sucesivamente). Finalmente revisamos la ejecución de las tareas, nuevamente revisando la página System > Scheduler > Timeline View desde el sitio web de administrador de Magento. Si la tarea programada se ejecutó correctamente, deberíamos observar más barritas en verde a la derecha de las que se ejecutaron cuando el script se corrió manualmente, según el tiempo establecido.


Si la tarea programada no se está ejecutando, podemos hacer algunos ajustes al comando de crontab, para que nos imprima las salidas estándar y error de la ejecución de la tarea, a archivos de texto, así:

*/5 * * * * /opt/bitnami/php/bin/php –f /opt/bitnami/apps/magento/htdocs/cron.php 1>/tmp/magecronstd.txt 2>/tmp/magecronerr.txt

En este caso, cada vez que se intente ejecutar la tarea, se crearán o sobreescribirán los archivos magecronstd.txt y magecronerr.txt. El segundo es de particular interés, ya que es el que almacena los errores al intentar ejecutar la tarea.

jueves, 7 de mayo de 2015

Generar archivo compilado HTML de ayuda (CHM) a partir de documento de MS Word


¿Alguna vez has necesitado generar un archivo compilado HTML de ayuda (CHM) para tu programa? ¿Tienes el manual de usuario en un documento de MS Word? ¡No hay problema! Para generar archivos compilados HTML de ayuda desde archivos de MS Word, existe un programa llamado chmProcessor. Este programa es gratuito y de código abierto, publicado bajo la licencia GPL.

El programa chmProcessor puede descargarse en: http://chmprocessor.sourceforge.net/#Downloads

Los requerimientos para utilizar este programa son:

A continuación se describen los pasos básicos para generar un archivo HTML compilado y un sitio web de ayuda utilizando chmProcessor:

1.  Crea tu manual de uso en un documento de MS Word (chmProcessor 1.7.x soporta archivos de MS Word del 2000 al 2013, pero no de versiones Starter). Es importante mencionar que el índice de contenido de la ayuda se generará en base a los estilos de título utilizados en el documento de MS Word. El nivel del título indicará el nivel de anidamiento del tema en el índice.



Para los que no son “del Imperio”, chmProcessor también permite utilizar archivos HTML, en cuyo caso el índice se genera en base a las etiquetas (h1, h2, h3…).

2.   Instala el programa chmProcessor (si aún no lo tienes instalado) e inícialo. Luego de instalarse, en Windows 7 puede encontrarse en Inicio > Todos los programas > chmProcessor.

3.  En la parte superior de la ventana se debe agregar uno o más archivos fuente, que son los documentos de MS Word a partir de los cuales se generará la ayuda. Para ello, se debe presionar el botón Add, y luego seleccionar el documento de Word respectivo.



4.  Una vez seleccionado el archivo, este aparece en el listado ubicado en la parte superior de la ventana. Puede notarse además que en la parte de abajo, en el campo Dst. File aparece automáticamente la ruta y nombre del archivo CHM que se va a generar. Puede observarse que dicho archivo por defecto será generado en el mismo directorio donde se encuentra el archivo de Word fuente. La ruta y el nombre del archivo destino pueden modificarse editando directamente en la caja de texto, o presionando el botón de puntos suspensivos ubicado al lado de la caja de texto, lo cual abrirá una ventana de diálogo en la que se permitirá especificar el archivo destino.


5.   De forma opcional, es posible también generar un sitio web de ayuda. Para ello se selecciona la ficha Web Help, y se marca la casilla Generate Web, ubicada en la parte media izquierda de la ventana. Con ello se habilitan los campos a la derecha, que permiten especificar diversas opciones del sitio web a generar. La principal opción es Dst. Web directory, que es el directorio destino donde se generarán los archivos del sitio web. Este se asigna por defecto en la misma ruta donde se ubica el archivo Word fuente, pero puede ser modificado.


6.  Una vez establecidos todos los parámetros, se presiona el botón Generate. El programa procede a generar los archivos de ayuda, mostrando una ventana emergente en la que muestra las acciones que va realizando.



7.  El programa indica la finalización del proceso en la ventana emergente. En este momento solo queda presionar el botón Accept.



Al abrir los directorios destino, pueden observarse los archivos generados. En este caso, puede observarse que se ha generado el archivo Manual de usuario.chm, que es el archivo de ayuda HTML compilado, así como la carpeta Manual de usuario-web, que contiene el sitio web.


Al abrir el archivo CHM, se obtiene un resultado similar a este:


Para ver el sitio web, se ingresa a la carpeta que lo contiene (Manual de usuario-web), y se abre el archivo index.html.


Este es el resultado (visto en el navegador web Firefox).


Adicionalmente, si se quiere guardar la configuración actual de chmProcessor para generar los archivos de ayuda, basta con seleccionar el menú File > Save as… e indicar el nombre y ubicación del archivo de proyecto.



Este fue un ejemplo básico sobre el uso de chmProcessor, pero este programa incluye muchas más opciones y beneficios. Para obtener mayor información puedes visitar su sitio web: http://chmprocessor.sourceforge.net/

lunes, 13 de abril de 2015

Preparar Eclipse Luna para Scala y Play Framework 2


Para desarrollar una aplicación en estos días, es recomendable usar un IDE que facilite el trabajo y brinde las herramientas necesarias para realizarlo. Si vas a desarrollar una aplicación con Play Framework 2.x y Scala, mi recomendación personal es usar Scala IDE. El IDE completo consiste en una versión de Eclipse, pre-configurada de manera especial con el plugin de Scala y Play Framework, entre otros componentes, para el desarrollo de aplicaciones con el lenguaje Scala, y en particular con Play Framework 2. Es posible descargar el IDE completo, pero si ya cuentas con Eclipse, entonces puedes instalar los plugins, siguiendo los pasos que se describen a continuación:

Visita la pagina de descargas estables de Scala IDE, y obtén la URL de los sitios de actualización disponibles para tu version de Eclipse. Para el caso de este post, se utilizara la versión 4.0 de Scala IDE (que es la última disponible al momento de escribirlo), sobre Eclipse Luna, por lo que la URL de actualizacion es: http://download.scala-ide.org/sdk/lithium/e44/scala211/stable/site




Añade el plugin de Scala IDE a Eclipse. Para ello se selecciona la opción Help > Install New Software en el menú de Eclipse.


En la ventana que aparecerá en pantalla, deberá colocarse la URL para descargar la actualización en la parte superior (campo Work with), y presionar el botón Add.


Aparecerá una ventana en la que habrá que asignar un nombre a la fuente (puede ser cualquier nombre). En el caso de este ejemplo, se le llamó Scala IDE (Scala 2.11.6), para indicar que de esta web se descargan los plugins relacionados a Scala IDE, especializados para la vesión 2.11.6 de Scala.



En la tabla del medio aparecerá el listado de plugins que pueden descargarse desde la web proporcionada. De ellos, se deberá seleccionar la opción completa Scala IDE, y la opción Scala IDE plugins (incubation) > Play2 support in Scala IDE. El primero de ellos sirve para trabajar con Scala en general, usando Eclipse. El segundo de ellos es especializado para Play Framework 2, pues incluye soporte particular para este, incluyendo auto-completar código fuente, manejo de plantillas de Scala, embellecimiento de código fuente y auto-completación, para el archivo de rutas.



Luego de elegidos los plugins, se presiona el botón Next. Se presentará una pantalla en la que Eclipse presenta el listado de todos los componentes a instalar. Puede notarse que además de los seleccionados, se incluye el SDK de Scala (Scala 2.11.6, en este caso), y el Scala Build Tool (SBT). Una vez verificado el listado, se presiona el botón Next.


Como último paso previo a realizar la instalación, se solicita que leas la licencia de los componentes a instalar. Si estás conforme con todas ellas, basta con seleccionar el botón de radio que dice I accept the terms of the license agreements, y presionar el botón Finish, para que Eclipse comience la descarga e instalación de los plugins.


Habrá que esperar algunos minutos para que se complete el proceso. Cuando se haya finalizado la instalación, aparecerá una ventana de diálogo indicando que es necesario reiniciar Eclipse, para que los cambios tengan efecto, y que si lo deseas reiniciar en este momento. Si no tienes trabajo pendiente de guardar, puedes presionar el botón Yes, para que el programa se reinicie. Si aún no deseas cerrar Eclipse, puedes hacerlo más tarde, pero los plugins no serán activados hasta que vuelvas a iniciar Eclipse.


Al iniciar Eclipse, posiblemente se muestre una advertencia, indicando que algunas de las configuraciones no son adecuadas para Scala IDE. Para ejecutar un diagnóstico de estas configuraciones, presiona el botón Yes.


En este caso se mostrará una ventana indicando algunas configuraciones particulares para Scala IDE. Si no tienes una configuración especializada de Eclipse, te sugiero usar las configuraciones recomendadas por defecto (Use recommended default settings). También presta atención a la sección de Heap settings, que se refiere a las configuraciones de memoria de Pila de la Java Virtual Machine: para Scala se recomienda un valor máximo de al menos 1024Mb. En este caso el valor que se tiene es de 455Mb. Para ajustar este valor, habrá que hacerlo editando el archivo eclipse.ini, lo cual haremos en el siguiente paso. Por el momento, solo presionamos el botón Ok, para establecer las configuraciones por defecto, y una vez iniciado Eclipse, lo cerramos.


Para modificar el tamaño de la memoria de la JVM usada en Eclipse, hay que abrir el archivo eclipse.ini, con un editor de texto, y posiblemente en modo administrador (dependiendo de donde se haya instalado Eclipse, y el sistema operativo). Este archivo está ubicado en el directorio donde se instaló Eclipse (ver la ruta que apareció en la ventana de configuraciones). En este archivo hay que buscar la línea que inicia con -Xmx, y modificar el valor que le sigue por el requerido. La línea quedaría así: -Xmx1024m


Guardamos los cambios, y volvemos a abrir Eclipse. Ahora notarán que el programa abre sin mostrar ninguna advertencia. Finalmente, antes de trabajar con Play Framework, se recomienda ajustar el IDE para refrescar cambios externos, para detectar los cambios realizados por los comandos de la consola de Play (o bien del Activador de Typesafe, o el SBT, según la herramienta que se esté usando). Para ello, se selecciona el menú Window > Preferences.


Se abrirá una nueva ventana. En el árbol de opciones de la izquierda, se selecciona el ítem General > Workspace. En el lado derecho seleccionamos la opción Refresh using native hooks or pooling, y presionamos el botón Ok.


Y esto es todo, el IDE ya está listo para trabajar con proyectos de Scala, y en particular de Play Framework 2.

martes, 31 de marzo de 2015

Ejemplo de CRUD con Java Servlets e Hibernate

En esta ocasión quería compartiles una de las tareas que hicimos en un curso de Java que recibí hace algunas semanas, cuyo código fuente pueden ver en Github: https://github.com/guillegr123/ejm-java-servlet-hibernate-1

El proyecto fue elaborado en NetBeans 8.0.x, y consiste en un ejemplo básico de aplicación web, el cual implementa la funcionalidad CRUD para una tabla (libros), a través de servlets (Java servlets 3) y JSPs, utilizando el patrón MVC. Para el acceso a la base de datos se utiliza Hibernate 4.3. Para el diseño de la vista se incluye el framework Bootstrap 3.3.2.

Esta aplicación de ejemplo no incluye la validación de datos de formulario del lado del servidor, ni otras prácticas de seguridad que deben tenerse en consideración para un producto final. Aunque a estas alturas del partido, no recomendaría crear una aplicación solo a base de servlets, sino usar algún framework como Spring.

Para poder ejecutar el ejemplo, debe hacerse lo siguiente:
  • Descargar el conector JDBC para MySQL, versión 5.1.5. Debe crearse la carpeta "libs" en el directorio del proyecto, y colocar allí el JAR del conector. Esta es la versión de conector a la que hace referencia el proyecto, pero podría sustituirse por otra, según la necesidad.
  • Crear una base de datos llamada "biblioteca" en el servidor de MySQL, e importar el script "biblioteca.sql", incluido en la carpeta "sql". Este proyecto se ha probado con versiones 5.6.x de MySQL.
  • Revisar y hacer las modificaciones necesarias en los parámetros de configuración de Hibernate (archivo src/java/hibernate.cfg.xml).
Es posible utilizar otros gestores de bases de datos, pero debe crearse la base de datos y tabla respectiva, incluir el conector JDBC apropiado como librería del proyecto, y hacer los ajustes respectivos en el archivo de configuración de Hibernate.

miércoles, 31 de diciembre de 2014

Recomendaciones para el desarrollo de aplicaciones móviles híbridas

Existe la concepción de que las aplicaciones híbridas elaboradas con HTML son notablemente más lentas que las aplicaciones nativas. Es cierto que debido a las capas extra de abstracción, y al soporte limitado a HTML 5, existe cierto costo de desempeño en las aplicaciones híbridas. Sin embargo, muchas veces este costo se hace notable debido a debilidades en el diseño de la aplicación, aspectos sin afinar o depurar en su estructura, y carencia de optimizaciones que en conjunto podrían mejorar notablemente la experiencia del usuario, y hacer que la brecha con una aplicación nativa se vuelva casi invisible.

A continuación listo algunas recomendaciones que ayudarán a optimizar el desempeño de una app híbrida:

  • Uso de imágenes PNG y JPG. Cuando se usan imágenes e la web, surge la pregunta: ¿qué formato de imagen debo usar? En términos generales, es recomendable utilizar imágenes PNG para logos e íconos, cuando estos sean de múltiples colores y compuestos principalmente de figuras geométricas y texto, ya que este tipo de imagen permite mostrar estos detalles con una excelente calidad, y además permite el uso de transparencias. Por otra parte, se recomienda el uso de imágenes JPG para fotografias, dibujos u otro tipo de imágenes que muestren una amplia gama de tonos y colores, ya que esta clase de gráficos no requieren bordes lisos ni definidos, y además este formato permite mostrar las tonalidades con un tamaño de archivo pequeño. Pueden utilizarse otros formatos, pero estos dos son los que presentan la mejor combinación de calidad y tamaño de archivo, y además son soportados por HTML desde versiones previas.
  • Optimización de imágenes. Antes de utilizar imágenes, es necesario comprimirlas, y además reducirlas al tamaño (ancho X alto) mínimo posible, pero sin sacrificar demasiado la calidad. Si la aplicación está destinada a dispoitivos de múltiples tamaños, puede ser conveniente tener las imágenes en múltiples tamaños, y mostrarlas dependiendo de la pantalla del dispositivo. Está de más decir que usualmente los dispositivos más grandes (tablets) poseen mejor hardware que los de tamaño menor (smartphones), y pueden mostrar imágenes de mayor tamaño con un menor costo en el desempeño. Adicional a esto, cuando son íconos pequeños, se recomienda el uso de sprites, que básicamente son archivos de imágenes que contienen múltiples imágenes dentro de sí, y que son "recortadas" y mostradas mediante CSS.
  • Usar fuentes en lugar de imágenes para los íconos, si el diseño de estos se basa principalmente en figuras geométricas, y son de un solo color. Ello debido a que las fuentes son básicamente imágenes vectoriales, y los visores web pueden dibujarlos sin mayor inconveniente. Además, al ser vectoriales, pueden ajustarse a cualquier tamaño, y verse siempre de la misma forma, a diferencia de las imágenes que se pueden ver demasiado afiladas o borrosas si se reducen o aumentan de tamaño. En este sentido incluso son preferibles a los sprites. Existen varias fuentes que porporcionan una generosa cantidad de íconos cuyas figuras se basan en acciones comunes, como Font Awesome y Ionicons. Pero si estas colecciones no contienen todos los íconos que usted desea, o usted posee íconos propios para añadir a su aplicación, existen técnicas para convertirlos a imágenes vectoriales, y posteriormente a fuentes que pueden ser añadidas a la aplicación híbrida o incluso su propio sitio web. Adicionalmente, son ua alternativa al uso de imágenes vectoriales SVG, las cuales noe son soportadas en las plataformas más antiguas.
  • Efectos CSS. Para animaciones, efectos y ajustes en el despliegue de elementos en la aplicación, se recomienda el uso de transiciones, transformaciones y otras propiedades CSS, ya que son más rápidas y fáciles de implementar que mediante Javascript, y usualmente presentan un mejor desempeño. Sin embargo el soporte de las distintas transiciones está supeditado a la versión del sistema operativo del dispositivo móvil, por lo que es necesario verificar esto.
  • Reducir elementos DOM. Al maquetar una aplicación HTML, se recomienda utilizar la menor cantidad de elementos posible, y eliminar los nodos del DOM que ya no se usen. Cada elemento dentro del DOM ocupa memoria, y requiere recursos para su dibujado, incluso aunque no sea visible, por lo que al disminuir la cantidad de estos, ahorramos recursos.
  • Seleccionar cuidadosamente el framework a utilizar. Existen distintos frameworks para el desarrollo de aplicaciones híbridas HTML, que proporcionan funcionalidades por defecto, lo cual permite agilizar el desarrollo, tales como JQuery Mobile, Sencha Touch, App Framework, PhoneJS, Onsen UI, Ionic Framework, etc. Sin embargo, es necesario tener en cuenta el costo que estos pueden causar en el desempeño, así como el soporte que poseen para los distintos sistemas operativos. Además es necesario sopesar la curva de aprendizaje, ya que un framework mal usado puede llevar a fugas de memoria, uso excesivo de recursos y reducción en general del desempeño de las aplicaciones.
  • Verificar el soporte de tecnologías HTML, CSS y Javascript, para las plataformas objetivo. Esto es necesario para no minar la experiencia del usuario, al poseer funcionalidades que solamente son visibles en ciertas plataformas, pero que presentan fallas o incluso no existen en otras. Unas excelentes herramienta en línea para verificar esto es caniuse.com y W3 Schools, ya que poseen un listado bastante completo de elementos HTML, CSS y Javascript, así como los navegadores/plataformas que los soportan.
Al prestar un poco de atención en estos distintos puntos de optimización, se pueden crear aplicaciones híbridas con una experiencia para el usuario igual o incluso mejor al de aplicaciones nativas.

¿Qué otros aspectos cree usted que pueden tomarse en cuenta para mejorar el desempeño de las aplicaciones híbridas? Compártalos en la sección de comentarios.

lunes, 22 de diciembre de 2014

Contenido de DevExpress Round Panel en Razor

Si ya han usado el Round Panel de Developer Express para MVC, habrán notado lo tedioso que es poner el contenido de este, ya que según el ejemplo que brindan en la documentación oficial, debe establecerse mediante una cadena de caracteres:

@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";

       settings.SetContent(@"<h4>Lorem Ipsum</h4>
<p><span class="inicio">Lorem ipsum</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>");
    }).GetHtml()

Esto deja de lado las facilidades que brinda Razor como motor de vista, que permite integrar el código HTML con C# de forma fácil y legible. Además, se vuelve más complicado a medida necesitamos añadir más componentes, o controles más complejos dentro de él. Sin embargo, existe una solución práctica para esta situación: el uso de helpers.

La sintaxis @helper permite crear métodos de ayuda re-usables dentro de las vistas, los cuales permiten encapsular código fuente y HTML utilizando la sintaxis de Razor.

Mediante la sintaxis @helper, podemos colocar el contenido del panel dentro de una función helper separada;
@helper ContenidoPanel() {
    <h4>Lorem Ipsum</h4>
    <p><span class="inicio">Lorem ipsum</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
}
Y luego renderizarlo dentro del panel, siempre en la misma vista, así:
@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";
       settings.SetContent(ContenidoPanel().ToHtmlString());
    }).GetHtml()
O así:
@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";
       settings.SetContent(() => ContenidoPanel().WriteTo(ViewContext.Writer));
    }).GetHtml()

Esto facilita la legibilidad del código, y además permite definir un contenido mucho más complejo, utilizando todas las facilidades que Razor puede brindar.
Con la tecnología de Blogger.