Ingeniería de Software, JAVA, Android, Flash, HTML, CSS y más

Introducción al HTML 5

2012-10-02T15:48:00.002-07:00

Escuchamos hablar de HTML 5 por doquier, como la tecnología que reemplazará Flash, o como el lenguaje por excelencia para la creación de aplicaciones y sitios web compatibles con cualquier tipo de dispositivo. Si bien, muchas de estas conjeturas comienzan a convertirse hoy en día en realidad, quienes andamos en el mundo web nos preguntamos que hay realmente detrás de esta tecnología. Por esta razón me motivo a publicar un reseña del potencial de HTML 5 que iré extendiendo junto con mi conocimiento en el tema.

En primera instancia decimos que HTML 5 esta basado en varios principios de diseño tales como:

Compatibilidad
Utilidad
Interoperabilidad
Acceso Universal.

Para lograr esto se incluyen nuevas características al lenguaje, así como la exclusión de otras mas. Dentro de las nuevas características encontramos:

Multimedia

Audio
Video

Gráficos de Vector Escalable

Canvas
SVG

Guardar en disco

Local Storage
Web SQL (Web Storage)

Acceso a dispositivos

Geolocation (http://html5demos.com/geo)
Eventos Touch
Acelerómetro

Rendimiento e integración

Web Workers (Multitarea - Multiples Threads)
V8, Nitro, JagerMonkey (Motores)
PhoneGap, Adobe AIR

Conectividad

Protocolo y API de WebSockets
Node.js
Socket.io
JSON

Formularios
MathML
Concepto de origen web
Base de datos indexada
Cache de Aplicación
Drag and Drop
XMLHttpRequest Nivel 2

De igual forma, se agrega un marcado semántico que describe el contenido de un elemento. Este marcado semántico no proporciona un beneficio inmediato, pero simplifica el diseño de tu página HTML, y en un futuro cercano, permite definitivamente a los motores de búsquedas tomar ventaja de esos elementos para indexar páginas. Entre los nuevos elementos de marcado encontramos:

header: Contenido de cabecera (para una página o una "section" de página)
footer: Pie de página del contenido (para una página o una "section" de página)
section: Una sección en una página web
article: Contenido de artículo independiente.
aside: Contenido relacionado o para colocar citas.
nav: Para barras de navegación

Todos esos elementos puede ser estilizados con CSS.

2012-09-12T06:29:00.004-07:00

Mapa mental de las conferencias de Seguridad Informática

Conceptos Básicos JAVA

2012-09-06T10:44:00.000-07:00

Un programa Java es una colección de objetos que llaman a otros objetos cuando se invocan método en cada uno de ellos. Cada objeto es de un cierto tipo, y ese tipo es definido por una clase o una interfaz. La mayoría de los programas Java usan una colección de objetos de diferentes tipos.

Es importante entender algunos conceptos antes de profundizar en el lenguaje. Veamos 4 de ellos:

Clase: Una plantilla que describe los estados y el comportamiento que los objetos de su tipo soportan.
Objetos: Instancia de una clase. Cuando la Máquina Virtual de Java (JVM por sus siglas en inglés) encuentran la palabra clave new, usará la clase apropiada para hacer un objeto como la instancia de esa clase.Cada objeto tiene sus propios estados y acceso a todo el comportamiento definido por su clase.
Estado (Variables de instancia): Cada objeto (esto es, una instancia de clase), tiene su propio conjunto único de variables de instancia definidas en la clase. Es así como los valores asignados a las variables de instancia conforman el estado del objeto.
Comportamiento (Métodos): Cuando se crea una clase, por lo general se crean métodos para esa clase. En los métodos es donde se almacenan la lógica de la clase, donde el trabajo real es hecho. Donde los algoritmos se ejecutan y los datos se manipulan.

IDENTIFICADORES Y PALABRAS CLAVES

En Java, todos los componentes a los que hagamos referencia necesitan ser llamados por un nombre. Esos nombres se denominan identificadores, y existen reglas que los constituyen. Para ellos se han creado convenciones de código.

Existen 3 aspectos importante en los identificadores de Java:

Identificadores legales: Reglas que el compilador usa para determinar si un nombre es legal.
Convenciones: Recomendaciones de la comunidad de Java para nombrar clases, variables y métodos.
Estandarización de nombres para componentes JavaBeans: Requerimientos en nombres para especificar JavaBeans.

Técnicamente, los identificadores legales deben estar compuestos solamente por caracteres Unicode, número, símbolos de moneda y caracteres de conexión (por ejemplo underline)

Arquitectura Empresarial

2012-05-23T06:38:00.002-07:00

Es la transformación del negocio, innovación, más que tecnología, alianzas significativas, sostenibilidad. Está alineada a partir de diferentes enfoques:

Arquitectura de Negocio

Procesos de negocio
Organización
Personas

Arquitectura de Aplicaciones

Servicios

Arquitectura de Datos

Datos
Información

Arquitectura de Tecnología

Herramientas
Software
Hardware de apoyo

Características del Nuevo Samsung Galaxy Nexus

2011-10-18T19:11:00.000-07:00

La prensa en Hong Kong fue recibida al entrar al evento con los detalles oficiales del Samsung Galaxy Nexus. Hay mucho más que ver sobre Ice Cream Sandwich, pero los rumores sobre las especificaciones técnicas del Nexus finalmente acabarán.

A continuación los detalles del nuevo teléfono de Google: el Samsung Galaxy Nexus:

Android 4.0 Ice Cream Sandwich
Pantalla de 4.65-pulgadas HD Super AMOLED a 720p de resolución
Procesador dual-core a 1.2GHz
Interfaz gráfica rediseñada de Android 4.0
Mejoras en multi-tasking, notificaciones, Wi-Fi hotspot, soporte NFC, full web browsing
Android 4.0 y la nueva navegación por botones de software
Aplicación People con integración a Google+ entre otras características
Cámara rediseñada con modo panorama, 1080p video, sin retraso para captura
Reconocimiento facial para desbloquear tu teléfono
Android Beam usa NFC para compartir contenido entre usuarios Android
PURA EXPERIENCIA DE GOOGLE
Todas las aplicaciones que te gustan de Google
Grosor de 8.94mm
Conectividad LTE y HSPA+
Disponible en USA, Europa, y Asia a partir de Noviembre y luego en el resto del mundo

Más detalles en poco...

Mejorando el rendimiento del Emulador de Android

2011-08-26T15:29:00.000-07:00

Mi experiencia con el emulador de Android no ha sido muy agradable. Esto se debe al bajo rendimiento que tiene el emulador a la hora de probar las aplicaciones. Toma un par de minutos para ser lanzado, y cuando esta listo, la interacción con el mismo es bastante lenta, demasiado lag a la hora de trabajar.

Buscando la forma de como mejorar el rendimiento me encontré con un par de tips que permiten aumentar el rendimiento del emulador, sobre todo a la hora de trabajar con él una vez lanzado. En este post describo los tips que permiten mejorar el rendimiento.

El emulador es demasiado lento porque emula una CPU ARM, la cual requiere un traducción a códigos de operación (opcodes) de Intel. Esta virtualización consume demasiada CPU.

Para hacer el emulador mas rápido debes darle al emulador mas capacidad de procesamiento, esto es, mas CPU, para ello puedes hacer:

Deshabilitar el Multihilo: El Emulador no utiliza mas que un núcleo. El multihilo reduce la cantidad de tiempo total de CPU que el emulador conseguirá. Deshabilitar el multihilo ralentiza aplicaciones que aprovechan los múltiples núcleos. El multihilo debe ser deshabilitado desde la BIOS.
Hacer que el emulador corra desde una CPU diferente a la CPU 0: Esto tiene un menor impacto que deshabilitar el multihilo, pero ayuda en algo. Sobre Windows, puedes especificar que CPU correrá un proceso. Muchas aplicaciones utilizan siempre la CPU 0, y por defecto, el emulador corre sobre ésta. Por mi parte, cambio el emulador a correr con el último núcleo.

Con estos dos cambios se puede observar un 50% de mejora en el rendimiento del emulador.

Añado unos screenshot de como realizar el cambio de CPU:

Una última sugerencia. Si nos vamos a dedicar a trabajar solamente en el emulador, podemos subirle la prioridad al proceso.

Saludos.

Como conectarse a una URL desde Android

2011-08-26T08:48:00.000-07:00

Una de las preguntas mas comunes a la hora de desarrollar sobre Android es ¿Cómo conectarnos a una URL?, o lo que es lo mismo ¿Cómo descargamos información desde una URL?. Pues bien, a continuación les mostraré 2 maneras diferentes de hacerlo (Esto fue desarrollado para Android 2.3.3).

Antes de nada, y para que todo salga bien debemos de habilitar los permisos de acceso a Internet a nuestra aplicación. Para ello, abrimos el archivo AndroidManifest.xml, damos clic sobre Permission -> Add -> Uses Permission -> Ok, el permiso será insertado al archivo, sin embargo debemos de especificar que tipo de permiso es, para ello desplegamos el combobox que tenemos a la derecha y seleccionamos android.permission.INTERNET. Podemos abreviar estos pasos tan solo insertando la siguiente línea de código a nuestro archivo AndroidManifets.xml:

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Y listo, con esto ya tenemos los permisos para poder conectarnos a una URL, Ahora procedamos a realizarlo.

Conectarse a una URL a través de `HttpUrlConnection`

El siguiente código, ilustra la manera de como utilizar el objeto HttpUrlConnection para hacer una conexión a una URL.

HttpURLConnection conn = null;
URL url;
String source;

try {

	String sUrl = "http://www.example.com";
	url = new URL(sUrl);
	conn = (HttpURLConnection) url.openConnection(); // Abriendo conexión
	conn.setReadTimeout(10000); // Tiempo de espera en lectura
	conn.setConnectTimeout(15000); // Tiempo de conexión
	conn.setRequestMethod("GET"); // Método de conexión
	conn.setDoInput(true); // Indica que la conexión es de entrada (Lectura).
	conn.addRequestProperty("Referer", "www.gmail.com"); // Añade una propiedad
	conn.connect();

	html = readFromBuffer(new BufferedReader(new InputStreamReader(
			conn.getInputStream())));

	return html;

} catch (IOException e) {
	e.printStackTrace();
}

Se crea una conexión HTTP a partir de una instancia de la clase HttpUrlConnection donde se le pasa por parámetro la URL de la página a conectarnos. A esta clase se le proporciona la información que se requiera para buscar la petición.

Aunque sencillo, se hace necesario conoces bien el protocolo HTTP para utilizar correctamente la clase, ya que es necesario indicar manualmente toda la información que hay que enviar al servidor. El próximo método permite abstraernos de estos inconvenientes.

Conectarse a una URL a través de `HttpClient`

A continuación se muestra el código para conectarnos a una URL a través de HttpClient.

HttpURLConnection conn = null;
URL url;
String html;
        
try {
 
	HttpGet httpGet = new HttpGet("http://www.example.com/");
	HttpClient httpclient = new DefaultHttpClient();
	HttpResponse response = httpclient.execute(httpGet);
 
	html = readFromBuffer(
		new BufferedReader(
			new InputStreamReader(response.getEntity().getContent())));
	
	return html;
 
} catch (IOException e) {
	e.printStackTrace();
}

Como puede verse el código es más sencillo que el anterior, ya que es la propia clase la que se encarga de meter todos los parámetros necesarios para la conexión de forma automática, aunque también es posible configurarlos manualmente.

Lectura desde un Buffer

En los ejemplos anteriores se hace uso de un método que dado un buffer de lectura devuelve su contenido como un string. A continuación se indica el código de este método.

private String readFromBuffer(BufferedReader br){
	StringBuilder text = new StringBuilder();
	try{
		String line;
		while ((line = br.readLine()) != null) {
			text.append(line);
			text.append("\n");
		} 
	} catch (IOException e) { 
		e.printStackTrace();
		// tratar excepción!!!
	}
	return text.toString();
}

Saludos.

Workshop de medios convergentes y dispositivos móviles

2011-08-23T20:59:00.000-07:00

El Workshop de medios convergentes y dispositivos móviles se realizó en la ciudad de Medellín - Colombia en Agosto del 2011. Busca fortalecer y desarrollar iniciativas en la creación de aplicaciones convergentes con dispositivos móviles. Está dirigido a ingenieros, animadores, diseñadores, comunicadores y demás interesados en el tema en tres jornadas distribuidas en sesiones magistrales y encuentros con expertos en diferentes áreas del conocimiento aplicado a la convergencia para el desarrollo de ideas puntuales.

El mapa mental muestra los principales conceptos presentados por 4 expositores del evento, entre los que se destaca el co-fundador de Twitter Evan Henshaw-Plath.

(Clic sobre la imagen para interactuar con el mapa completo en formato .swf)

Pensamiento Sistemico

2011-08-23T20:45:00.000-07:00

Un sistema es una entidad cuya existencia y funciones se mantienen como un todo por la interacción de sus partes. El pensamiento sistémico contempla el todo y las partes, así como las conexiones de las partes, y estudia el todo para poder comprender las partes.

El siguiente mapa mental contempla las partes mas elementales que componen al pensamiento sistémico.

(Clic sobre la imagen para interactuar con el mapa completo en formato .swf)

Proceso de Desarrollo de Software

2011-08-23T20:39:00.000-07:00

Este mapa mental describe las etapas del proceso de desarrollo de software. Es una especificación adaptada a una institución en particular, pero se logra diferencias claramente los elementos claves que contiene cada etapa del proceso.

(Clic sobre la imagen para interactuar con el mapa completo en formato .swf)

SEMAT - Software Engineering Method And Theroy

2011-08-23T20:20:00.000-07:00

Un mapa mental que abarca los conceptos principales de la iniciativa SEMAT.

(Clic sobre la imagen para interactuar con el mapa completo en formato .swf)

SEMAT - Preguntas y Respuestas

2011-08-23T09:54:00.000-07:00

En las 2 publicaciones anteriores he hablado acerca del SEMAT como iniciativa para el remodelamiento de la Ingeniería de Software. Sin embargo muchas preguntas surgen al rededor del tema. En esta publicación presento un conjunto de preguntas y respuestas que han surgido de la necesidad de entender lo que el SEMAT intenta hacer por nosotros.

- ¿Los objetivos son elevados, pero son solamente objetivos, Antes de hacerlo público, no debieron esperar hasta tener una solución actual para mostrar?

R/. Muchas personas tienen excelentes ideas, pero ninguna tiene toda la verdad. La única manera de resolver un problema de esta magnitud es a través del esfuerzo de la comunidad al identificar precisamente el problema y conduciendo a soluciones ampliamente aceptadas. Es por esto que se comienza con una declaración de objetivos y esperamos comentarios desde un amplio rango de expertos.

- ¿Por qué el énfasis sobre los signatarios?

R/. Las personas que han aceptado para firmar el llamado a la acción han, cada uno en su manera, hecho un esfuerzo en el mundo del desarrollo de software. Su participación es esencial en la visibilidad del proyecto, en particular, en las grandes compañías, y para su éxito.

- ¿Ahora que hay un llamado a la acción firmado por un grupo impresionante de personas, el trabajo real comienza?

R/. Si, la parte mas difícil está por venir. La parte más difícil será conseguir que todo el mundo siga adelante sin poner en peligro de muerte a nosotros mismos, y sin que nadie renuncie porque su idea favorita no es un factor clave. Pensamos que con perseverancia, creatividad y diplomacia seremos exitosos.

- ¿Por qué SEMAT es diferente a otros esfuerzos, tales como el SWEBOK de la IEEE, o varios estándares en la Ingeniería de Software?

R/. Una crucial diferencia entre la iniciativa SEMAT y esfuerzos previos tal como el SWEBOK es el foco central en la teoría subyacente. Mientras que el SWEBOK y varios planes de estudio de la IEEE reflejan el estado del arte , los cuales constituyen puramente una mezcla pragmática de ideas, constructores, técnicas y disciplinas con la práctica actual y la opinión pública. El SEMAT está enfocado sobre un núcleo con fuertes fundamentos teóricos. Esto no indica que el SWEBOK y similares no tengan valor. En realidad, ellos son entradas valiosas para la iniciativa SEMAT, ya que la única cosa que necesitan es una teoría.

Fuente: Libro Software Engineering Methods, Modeling and Teaching, Universidad de Medellín,

LASES 2011 - Ivar Jacobson hablando acerca del SEMAT Parte I y II

2011-08-23T08:57:00.000-07:00

En el Simposio de Ingeniería de Software de América Latina realizado el 11 y 12 de Agosto en la ciudad de Medellín - Colombia, se tuvo en escena al doctor Ivar Jacobson quien nos habló del SEMAT como una iniciativa para calificar la Ingeniería de Software en un disciplina rigurosa. A continuación publico la primera y segunda parte de la presentación.

PARTE I

PARTE II

SEMAT - Software Engineering Method And Theroy

2011-08-23T08:34:00.000-07:00

Durante el Simposio de Ingeniería de Software de América Latina LASES 2011, tuve la grata sorpresa de conocer a unos de los personajes mas influyentes en la Ingeniería de Software, conocido como el mayor contribuyente en el Lenguaje de Modelado Unificado UML, padre de los diagramas de secuencia, de colaboración y los casos de uso entre otros, al doctor Ivar Jacobson.

En esta oportunidad nos presenta el SEMAT como una iniciativa para remodelar la Ingeniería de Software, la cual fue lanzada en el 2006 junto con Bertrand Meyer y Richard Soley.

SEMAT es una iniciativa para re-modelar la Ingeniería de Software y procurar que sea calificada como una disciplina rigurosa. Se basa en el hecho de que la Ingeniería de Software contiene un número significante de prácticas inmaduras en las que se destacan:

La ausencia de bases teóricas ampliamente aceptadas.
Un gran número de métodos y variantes de métodos con pocas diferencias comprendidas y ampliamente artificiales.
La falta de validación y evaluación experimental creíble.
La brecha que hay entre las prácticas de la industria y la investigación académica.

Por lo tanto propone una teoría sólida mediante principios probados y mejores prácticas que:

Incluye un Kernel de elementos ampliamente aceptados y extensibles para usos específicos.
Aborda tanto temas de tecnologías como de personas.
Soportado por la industria, la academia, los investigadores y los usuarios.
Soporta extensión en cara a las tecnologías y los requerimiento cambiantes.

El objetivo es crear una plataforma (el kernel) que le permita a las personas (programadores, administradores de proyectos, consultores, científicos de la computación entre otros) describir sus actuales y futuras prácticas, patrones y métodos de manera que puedan estar compuestos, simulados, aplicados, comparados, evaluados, medidos, enseñados e investigados.

Esta iniciativa esta acompañada de un llamado a la acción para todos aquellos interesados que quieran formar parte de esta comunidad creciente. Para ello, el SEMAT habilitó un formulario de inscripción para convertirse en un "supporter" de la iniciativa SEMAT, que pueden encontrar AQUI.

Dentro de éste llamado se encuentran en general 5 grupos de trabajos clasificados como sigue:

Definición: Definición de la Ingeniería de Software e ideas relacionadas.
Teoría: Identificando teorías de apoyo, especialmente teorías matemáticas.
Universales: Búsqueda de elementos comunes en la Ingeniería de Software.
Lenguaje del Kernel: Lenguajes para expresar otros elementos.
Evaluacion: Maneras de evaluar las prácticas y teorías.

El SEMAT ha llegado a nuevas regiones del mundo. En Abril del 2010 un nuevo capítulo del SEMAT fue fundado en China el cual ya se encuentra en funcionamiento. Otro capítulo del SEMAT fue fundado en Colombia que incluye a Sur-América y Centro-América. Puedes ampliar la información en en este blog oficial.

Por lo pronto, la iniciativa del SEMAT con ya cuenta con mas de 30 signatarios que corresponden a expertos de clase mundial en torno a la Ingeniería de Software; cuenta con mas de 1500 partidarios de la iniciativa, y mas de 15 empresas que la apoyan entre las que se destacan IBM, Ericsson, Microsoft España.

Realmente parece una iniciativa prometedora, de la cual todos los que nos encontramos en el campo de la Ingeniería de Software podemos hacer parte de ella, permitiendo fundamentarla, extenderla y mejorar nuestra experiencia en este campo.

Creación de un Chat sencillo con Ruby

2011-08-13T22:32:00.000-07:00

Uno de los ejemplos mas interesantes a la hora de hacer programación por medio de sockets en el lenguaje Ruby, es la creación de un chat sencillo. A continuación miremos una manera rápida de como podemos construirlo.

En primer lugar nos encargamos de programar el servidor. Este servidor se encargará de abrir un puerto por el que escuchará peticiones de clientes que desean conectarse a él. Espero que el código esté lo suficientemente claro y comentado para su entendimiento.

# Importamos la clase socket ya que vamos a trabajar con ella
require "socket"

# Construyendo clase ChatServer con los métodos necesarios
# Métodos públicos : initialize, run
# Métodos privados (no visibles fuera de nuestra clase) : broadcast_string, conexion_nueva
class ChatServer

  # Éste método es invocado cuando un nuevo ChatServer es instanciado
  # (via ChatServer::new(port))
  def initialize( port )
    @descriptores = Array::new
    @serverSocket = TCPServer.new( "", port ) # Servidor de tipo TCPServer

    # Allow reuse the address (para un rápido reinicio del servidor)
    @serverSocket.setsockopt( Socket::SOL_SOCKET, Socket::SO_REUSEADDR, 1 )

    #Mensaje de salida cuando el servidor es iniciado.
    printf("Chatserver iniciado sobre el puerto %d\n", port)
    @descriptores.push( @serverSocket )
  end # initialize

  # Implementado la funcionalidad del chat
  def run
    #Entrando es un ciclo infinito (El server esta escuchando...)
    while 1

      # Esperando un evento de lectura. Cuando el servidor inicia el único
      # descriptor presente es el socket de servidor. Por lo tanto se espera
      # a que clientes se conecte.
      res = select( @descriptores, nil, nil, nil )

      if res != nil then

        # Iterando a través de los descriptores de lectura etiquetados
        for sock in res[0]

          # Recibida una conección al servidor (escuchando) socket
          if sock == @serverSocket then
            conexion_nueva
          else
            # Alguna cosa recibida sobre el socket del cliente?
            if sock.eof? then
              str = sprintf("Cliente desconectado %s:%s\n",
                sock.peeraddr[2], sock.peeraddr[1])
              broadcast_string( str, sock )
              sock.close
              @descriptores.delete(sock)
            else
              str = sprintf("[%s|%s]: %s",
                sock.peeraddr[2], sock.peeraddr[1], sock.gets())
              broadcast_string( str, sock )
            end
          end
        end
      end
    end
  end # run

  private

  # Permite enviar una misma informacion a todos los usuarios que esten
  # conectados al chat.
  def broadcast_string( str, omit_sock )
    @descriptores.each do |clisock|
      if clisock != @serverSocket && clisock != omit_sock
        clisock.write(str)
      end
    end
    print(str)
  end # broadcast_string

  # Cunado un cliente solicita conexión al servidor, esta es aceptada se añade
  # el cliente a la pila de descriptore y el cliente en unido al chat.
  def conexion_nueva
    newsock = @serverSocket.accept
    @descriptores.push( newsock )

    # Notificamos que el cliente se ha unido al ChatServer
    newsock.write("Estas conectado al ChatServer de Ruby.\n")

    # Mostramos información del cliente conectado
    str = sprintf("Cliente Unido %s:%s\n", newsock.peeraddr[2], newsock.peeraddr[1])

    # Notificamos a los demás usuarios que un nuevo cliente se ha unido al chat
    broadcast_string( str, newsock )
  end # accept_new_connection

end #server

#Instanciado el servidor de chat
my_chat_server = ChatServer.new( 2626 )

#Corriendo el chat
my_chat_server.run

Ahora, procedemos a crear nuestra clase cliente. Está clase es demasiado sencilla, pues solo es necesario crear una instanacia TCPSocket que se conecte a nuestro ChatSever. Y por medio de un ciclo permitimos que nuestro cliente interactúe en el chat.

# Importamos la clase socket ya que vamos a trabajar con ella
require 'socket'

#Creamos un socket tipo cliente y nos conectamos a servidor que se encuentra en
# localhost escuchando por el puerto 2626
socket = TCPSocket.new('localhost', 2626)

text = ''

# Permite que el cliente ingrese texto en el chat de manera iterativa que sera
# enviado a todos los usuario que se encuentren conectado al servidor.
# El cliente sale cuando la letra q es tipeada y enviada.
while text != 'q' do
  text = STDIN.gets.chomp
  socket.puts(text)
end

# Cerramos el socket del cliente.
socket.close

En últimas, solo queda ejecutar en primera instancia el ChatServer y a continuación ejecutamos 2 o mas instancias del ChatUser y probamos copiando cualquier texto en cualquier instancia de ChatUser y vemos como éste aparece en los demás cliente así como en el servidor.

Saludos.

Como insertar código fuente en Blogger

2011-07-21T22:14:00.000-07:00

"Mi primera necesidad, mi primer post"

Sin duda alguna, nos resulta muy útil postear código fuente de una manera ordenada y legible. Para ello se hace necesario indentar y colorear nuestro código, pero esto es algo que, si se hace manualmente se torna demasiado tedioso. En la búsqueda por encontrar una solución me he topado con una librería que nos resuelve este problema de manera muy fácil y rápida.

SyntaxHighLighter es una librería de código abierto construida en JavaScript que nos permite resaltar el código dándole un aspecto mas agradable y legible. Este proyecto que inicio en el 2004 ya se encuentra en su versión 3.0.83 (Julio 2011) y cuenta con un conjunto de scripts que nos ayudan a resaltar código en diversos lenguajes de programación, lenguajes de scripts y metalenguajes.

Para mayor información podemos remitirnos a la página oficial: http://alexgorbatchev.com

A continuación resalto los pasos necesario para instalar de manera rápida la librería:

Como no es posible subir archivos .js a Blogger entonces utilizamos la versión host que nos ofrece la librería, para ello editamos nuestra plantilla "Personalizar > Diseño > Edición de HTML".

Agregamos después de la etiqueta <head> las siguientes líneas:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>

<script type='text/javascript'>SyntaxHighlighter.all();</script>

Las 3 primeras líneas corresponden a los estilos que se añaden por defecto, las otras 7 líneas corresponden a los diferentes Brush que podemos añadir de acuerdo a los diferentes lenguajes de programación que estemos manejando. Tenga en cuenta que al menos las 2 primeras líneas de éstas 7 si son obligatorias. Además es importante no olvidar la última línea para que todo funcione de una manera correcta.

Por último cada elemento que deseemos resaltar lo colocamos entre las etiquetas <pre></pre> y con esto todo queda listo.

Así convertimos éste codigo:

public class HelloWorld {

public static void main(String ar[]){

System.out.println("Hello World!!!");

}

</pre>

en esto:

public class HelloWorld {
        public static void main(String ar[]) {
            System.out.println("Hello World!!!");
        }
    }

Espero que les sea de mucha utilidad así como lo fue para mi.

Saludos.

Ingeniería de Software, JAVA, Android, Flash, HTML, CSS y más

Introducción al HTML 5

Conceptos Básicos JAVA

Arquitectura Empresarial

Características del Nuevo Samsung Galaxy Nexus

Mejorando el rendimiento del Emulador de Android

Como conectarse a una URL desde Android

Conectarse a una URL a través de HttpUrlConnection

Conectarse a una URL a través de HttpClient

Lectura desde un Buffer

Workshop de medios convergentes y dispositivos móviles

Pensamiento Sistemico

Proceso de Desarrollo de Software

SEMAT - Software Engineering Method And Theroy

SEMAT - Preguntas y Respuestas

LASES 2011 - Ivar Jacobson hablando acerca del SEMAT Parte I y II

SEMAT - Software Engineering Method And Theroy

Creación de un Chat sencillo con Ruby

Como insertar código fuente en Blogger

Conectarse a una URL a través de `HttpUrlConnection`

Conectarse a una URL a través de `HttpClient`