Problemas, problemas…
Parece que últimamente el servidor ha recibido un número de visitas mucho mayor que el esperado y me he quedado sin ancho de banda disponible. Estoy realizando ajustes para que no vuelva a pasar. Hasta entonces, es probable que algunos de los contenidos de la página no funcionen como es debido, disculpad las molestias.
Archivado en: Personal
Creando una página desde cero con layout a dos columnas (IV) : Añadiendo un fondo degradado
No sólo de código vive el desarrollador web. De vez en cuando conviene olvidar por un momento el editor del texto y utilizar otras herramientas. El objetivo de esta serie de artículos va orientado a obtener una web agradable a la vista, por lo que va siendo hora de utilizar una herramienta de tratamiento de imágenes. El Photoshop siempre es la opción más cómoda, con la que (casi) todos hemos aprendido, pero por desgracia, no es una opción barata. Por esta razón, utilizaremos una herramienta que realizará funciones similares: The Gimp. O mejor dicho, Gimpshop, una versión de The Gimp adaptada para aquellos que están acostumbrados al Photoshop y les cuesta cambiar de herramienta. Se puede obtener desde aquí.
Nuestra página va cogiendo forma, pero a primera vista vemos que el fondo es demasiado neutro y que no llama en absoluto la atención. O mejor dicho: llama la atención por lo “soso” del fondo. Es por eso que crearemos un fondo con un ligero degradado que contraste con los colores de la capa central. Otro día hablaremos de la teoría del color, pero para no extendernos mucho, lo resumiremos en que, ya que nuestra página está diseñada en una escala de grises, haremos que el fondo continúe con ese mismo patrón.
Archivado en: Herramientas, HTML / XHTML / CSS, Nivel básico, Recursos · Etiquetado como: css, diseño grafico, gimp, Nivel básico, webdesign
Creando una página desde cero con layout a dos columnas (III) : Loading screen con transparencias
Nuestra página va tomando forma poco a poco. Es buen momento para seguir jugando un poco más con CSS3 y hablar de otro de los elementos importantes que nos ofrece: las transparencias.
Recordemos que CSS3 es interpretado por cada engine de forma completamente diferente, por lo que habrá que especificar una propiedad css distinta para cada navegador. La propiedad encargada de la transparencia de un elemento es opacity, y se expresa en tanto por uno (salvo en Internet Explorer), de modo que si queremos que un elemento sea transparente al 30%, le asignaremos a opacity el valor de 0.3.
Vamos a crear un ejemplo en el que existe la típica pantalla que se oscurece con un fondo transparente mostrando una imagen con el texto “Loading…“, “Cargando datos…” o similar cuando realiza una llamada a servidor. Por supuesto, sólo será una simulación, mediante un temporizador en JavaScript. Lo importante del ejemplo es aprender una de las muchas formas que existen de crear esta pantalla de carga que bloquea el fondo mientras se procesan los datos.
Archivado en: HTML / XHTML / CSS, JavaScript, Nivel intermedio · Etiquetado como: css, diseño, html, JavaScript, transparencias, webdesign, xhtml
Creando una página desde cero con layout a dos columnas (II) : Sombras, bordes y pseudoclases
Hemos dado el primer paso: crear un layout para nuestra página. Un layout no es más que una estructura, por lo que lo que queda por delante es duro: tallar la página en bruto para conseguir un diseño vistoso, no sólo funcional.
En el presente artículo vamos a jugar un poco con CSS3. Hasta ahora, a la hora de diseñar páginas nos encontrábamos dos mundos: el mundo de Internet Explorer y el resto del mundo. Con la llegada de CSS3, pese que el Explorer sigue siendo el niño rarito de la clase, nos encontramos con que cada navegador (o mejor dicho, cada motor de renderizado) utiliza unos tags css determinados, por lo que el trabajo de diseño aumenta considerablemente al tener que codificar ciertas funcionalidades de forma explícita para cada navegador en lugar de hacerlo de forma genérica.
A grosso modo nos encontramos con los siguientes motores a considerar, teniendo en cuenta los más utilizados:
| Motor | Navegador(es) |
| Trident | Internet Explorer |
| Gecko | Mozilla Firefox |
| Presto | Opera |
| WebKit | Safari, Google Chrome |
| KHTML | Konqueror |
Nuestro objetivo para hoy va a ser el siguiente: retocar la página que creamos en el artículo anterior con dos objetivos: añadirle sombras y esquinas redondeadas y crear un menú cuyos elementos se asemejen a botones. Y todo con HTML y CSS, ni siquiera con un poquito de JavaScript. Bueno, opcionalmente se le podrá añadir una pequeña función para el funcionamiento de los enlaces, aunque puede ser suplido con hipervínculos normales.
Archivado en: HTML / XHTML / CSS, JavaScript, Nivel intermedio · Etiquetado como: css, diseño, html, JavaScript, Nivel intermedio, webdesign
Creando una página desde cero con layout a dos columnas (I)
Casi todas las páginas que se diseñan hoy en día se caracterizan por tener un layout (distribución de los elementos) bastante similar. Suelen constar de un elemento central de tamaño fijo que se mantiene siempre en el centro (independientemente de la resolución), y éste a su vez suele componerse de los siguientes elementos: una cabecera, un menú lateral, una sección de contenido y un pie de página. En definitiva, suele tener el siguiente aspecto:
Layout a dos columnas
Vamos a aprender cómo conseguir reproducir un layout base de este tipo en unas pocas líneas de html+css.
Archivado en: HTML / XHTML / CSS, Nivel básico · Etiquetado como: css, diseño, html, layout, Nivel básico, webdesign
Introducción a jQuery (I)
JavaScript tiene fama de ser un lenguaje que no deja indiferente a ningún programador: es amado u odiado. Todos los desarrolladores web tienen sus preferencias a la hora de decidir dónde incluir ciertas funcionalidades: los hay cuyas tendencias son dejarle la mayor parte al servidor, los hay quienes delegan al máximo en el cliente, y los hay quienes alcanzan un buen equilibrio repartiendo “al César lo que es del César y a Dios lo que es de Dios”. Ésta última aproximación es la que más trabajo requiere, pero la que mejor resultados ofrece. Leer el resto del artículo »
Archivado en: JavaScript, Nivel básico · Etiquetado como: JavaScript, jQuery, Nivel básico
Introducción a la persistencia (I): Serialización
Por norma general, casi todos nuestras clases contienen tipos básicos que pueden almacenarse en una base de datos en campos individuales. Así, si tenemos una clase “Alumno” con los campos “Nombre”, “Apellidos”, “NIF”, “FechaNacimiento”… podemos modelar una tabla que represente con una columna cada uno de esos datos. Pero… ¿qué ocurre si la información que queremos almacenar no se corresponde con un tipo básico? Si por ejemplo quisiéramos guardar una foto del alumno o un objeto binario con datos de cualquier tipo, ¿cómo nos las arreglaríamos? Vamos a comprobar las ventajas de la serialización.
La serialización o “Marshalling” no es más que la codificación de un objeto en un conjunto de bytes. Si podemos almacenar un binario como un conjunto de bytes y a su vez podemos representar esos bytes como caracteres de texto… ¡voilà! podemos entonces representar un objeto como una cadena de caracteres. Sin embargo, no todo es Jauja: es preciso que el objeto en cuestión tenga el atributo Serializable.
Archivado en: C#, Nivel intermedio · Etiquetado como: C#, marshalling, Nivel intermedio, serialización
Agrupando sumas mediante particiones en SQL
Cuando el cliente te pide una funcionalidad relacionada con la generación de informes, sabes que vas a tener que enfrentarte a un concepto que, a menudo, provoca verdaderos dolores de cabeza cuando se trata de realizar consultas SQL: los valores agrupados.
No entraremos en detalle en el concepto de agrupación, ya que cualquier manual de SQL le dedica secciones enteras a este concepto. Trataremos un caso particular de agrupación: la agrupación de sumas.
Archivado en: Bases de datos, Nivel intermedio, Oracle, SQL Server · Etiquetado como: Nivel intermedio, over, partition, PL/SQL, sql, sum, T-SQL
Ignorar mayúsculas y tildes en ORACLE
¿A quién no le ha pasado esto?: Cuando la aplicación está casi terminada y la entrega está próxima, el tester se da cuenta de un pequeño (y básico) detalle que no habíamos tenido en cuenta: los formularios de búsqueda de nuestra aplicación deben ignorar mayúsculas y minúsculas y, por si fuera poco, también deben ignorar tildes.
La primera parte tiene una solución relativamente sencilla: ORACLE proporciona las funciones upper() y lower(), que devuelven una cadena de texto convertida a mayúsculas y a minúsculas respectivamente. Así, para crear un filtro en una sentencia SELECT que ignore mayúsculas y minúsculas (es decir, que sea CASE-INSENSITIVE), bastaría con lo siguiente (según queramos búsqueda exacta o aproximada):
select * from USUARIOS where upper(APELLIDOS) = upper('López')
select * from USUARIOS where upper(APELLIDOS) like '%' || upper('López') || '%'
Ahora nos queda la segunda parte: podemos ignorar las letras con tilde mediante la funcion translate(). Dicha funcion recibe tres parametros: una cadena de entrada sobre la que se quiere operar, un patrón con los caracteres que se quieren sustituir y otro patrón con los caracteres que sustituirán a los incluidos en el parámetro anterior. Así, la siguiente llamada a la función:
translate('Cadena 112234', '1234', 'abcd');
Devolverá el resultado ‘Cadena aabbcd’, al realizar la sustitución 1->a, 2->b, 3->c, 4->d. Si aplicamos la misma teoría a nuestras búsquedas, para no tener en cuenta ningún tipo de diéresis ni tilde, sustituiríamos las consultas anteriores por las siguientes:
select * from USUARIOS
where translate(upper(APELLIDOS), 'ÁÉÍÓÚÄËÏÖÜÀÈÌÒÙÂÊÎÔÛ', 'AEIOUAEIOUAEIOUAEIOU') = translate(upper('López'), 'ÁÉÍÓÚÄËÏÖÜÀÈÌÒÙÂÊÎÔÛ', 'AEIOUAEIOUAEIOUAEIOU')
select * from USUARIOS
where translate(upper(APELLIDOS), 'ÁÉÍÓÚÄËÏÖÜÀÈÌÒÙÂÊÎÔÛ', 'AEIOUAEIOUAEIOUAEIOU') like translate(upper('%López%'), 'ÁÉÍÓÚÄËÏÖÜÀÈÌÒÙÂÊÎÔÛ', 'AEIOUAEIOUAEIOUAEIOU')
Hecho esto, no tendremos que preocuparnos más ni de mayúsculas ni de tildes 
Archivado en: Nivel intermedio, Oracle · Etiquetado como: Nivel intermedio, Oracle, PL/SQL, sql
Redimensionar un control de texto con el tamaño de su contenido
En ocasiones, trabajando con WinForms, nos encontramos con un control contenedor de un texto variable en el que, o nos sobra espacio o nos falta. La clase Graphics de System.Drawing nos proporciona un método tremendamente útil para saber el tamaño, en píxels, de una cadena de texto.
Veremos a continuación cómo redimensionar de forma dinámica un control dependiendo del tamaño del texto contenido. Para ello crearemos, por ejemplo, un TextBox al que llamaremos txtPrueba, y en el que albergaremos un texto, por ejemplo “Más vale pájaro en mano, que ciento volando”.
txtPrueba.Text = "Más vale pájaro en mano que ciento volando";
A continuación, declararemos dos variables enteras, una para el alto y otra para el ancho.
// Declaramos una variable entera para almacenar el nuevo ancho y el nuevo alto int nuevoAncho = 0; int nuevoAlto = 0;
Es ahora donde instanciaremos la clase Graphics a partir del control TextBox, y extraeremos la fuente que está utilizando.
// Creamos un objeto de tipo Graphics a partir del TextBox Graphics g = txt.CreateGraphics(); // Extraemos la fuente del TextBox Font fuente = txt.Font;
Obtenemos, a partir del objeto Graphics, su alto y ancho a partir del método MeasureString, que no hace otra cosa que medir, en pixels, el tamaño que ocupa la cadena con la fuente indicada.
nuevoAncho = (int)g.MeasureString(txt.Text, fuente).Width; nuevoAlto = (int)g.MeasureString(txt.Text, fuente).Height;
Por último, asignamos los nuevos valores de alto y ancho y refrescamos el control.
txt.Width = nuevoAncho; txt.Height = nuevoAlto; txt.Refresh();
A partir de estos conceptos básicos, se pueden encontrar multitud de utilidades a este proceso, como por ejemplo, redimensionar el desplegable de un ComboBox al tamaño del mayor de sus elementos.
Archivado en: C#, Nivel intermedio · Etiquetado como: .NET, C#, GDI, Nivel intermedio, Tricks
