¿Qué distribución es para tí?

•mayo 8, 2009 • Dejar un comentario

Bueno, esta dirección de internet pretende orientarnos en la elección de nustra primera distribución Linux. Es evidente que, llevados unos años utilizando Linux, cada usuario sepa qué pros y contras  tiene cada distribución con respecto al trabajo que lleve a cabo. Así es que, para aquellos que comiencen o quieran comenzar a utilizar Linux y no sepan qué distribución instalar: Haced el test!

Centrar imágenes en CSS

•abril 17, 2009 • Dejar un comentario

Uno de los problemas que he encontrado a la hora de diseñar con CSS, es centrar las imágenes. Así es, tan simple como eso, lo que se solucionaba con un simple <center></center> en HTML, usando css no parece tan sencillo. Soluciones?

Pues existen dos soluciones posibles (a lo mejor hay más pero son las únicas que he probado)

1- Asignamos a la etiqueta img la propiedad de “elemento de bloque” y al “margin” el valor “auto”, de esta manera el navegador asignará margenes proporcionales al espacio donde está contenida la imagen.

img { display: block; margin: auto; }

Lamentablemente esta solución no es viable en Internet Explorer (para variar), lo cual nos fuerza a buscar otra manera de hacerlo.

2- Esta es la manera como vengo haciéndolo, no es la más elegante pero funciona, para eso le daremos la propiedad text:align-center al cuadro contenedor de nuestra imagen, por ejemplo:

<div style="text-align:center"><img src="http://direccion/de/la/imagen.jpg"/></div>

Con lo cual habremos centrado la imagen.

Fuente: http://blog.almadark.com

Diseñar en CSS para Firefox, IE6, IE7,…

•abril 16, 2009 • 1 comentario

En el proceso de diseño de nuestras páginas web nos hemos encontrado con un problema, que imagino han tenido alguna vez  todos los diseñadores: las páginas y estilos CSS no se muestran de igual forma en Firefox, Internet Explorer 6, Internet Explorer 7, u otros navegadores no tan populares. Lo que en Firefox se vicualiza como nosotros hemos planeado suele aparecer bastante descolocado en cualquier versión de Internet Explorer existentes hasta el momento.

Las causas de estas diferencias son muchas y muy variadas, pero saber cuales son no es el objetivo de este post (aunque éste es un tema importante), sino más bien, cómo poder resolverlas de una forma más que eficiente. Así que para ello serán indicados una serie de hacks (trucos) o formas de implementar nuestro código CSS de forma correcta.

1- En el código HTML deberemos incluir las siguientes entencias, entre las etiquetas <head></head>, evidentemente:

<!--[if lt IE 6]-->
<link rel="stylesheet" type="text/css" src="css_ie6.css">
<![endif]-->
<!--[if IE 7]-->
<link rel="stylesheet" type="text/css" src="css_ie7.css">
<![endif]-->

De esta forma, Firefox y todos los demás navegadores excepto Internet Explorer leerían la hoja de estilos general. Mientras que El IE se comportaría con las hojas de estilo que hemos creado aposta para él.

2- Escribiendo # delante de la propiedad css , solo se aplicará a a Internet Explorer, y si escribimos un _ antes de a propiedad, solo se aplicará a Internet Explorer 6.

.miClase{
    width: 15px; /* Para todos los navegadores */
    #width: 20px; /* Para IE */
    _width: 25px; /* Para IE 6 */
}

3- Finalmente, también podemos utilizar formas válidas de definir los elementos del CSS pero que solo entienden algunos navegadores. De esta forma podemos añadir pequeños arreglos en un mismo archivo css sin que por ello nuestro código deje de validar.

#miDiv { Código para todos los navegadores }
* html #miDiv { Código para IE 6 }
*:first-child+#miDiv { Código para IE 7 }
#miDiv { Código para IE 8\9 } -- #miDiv { float: right\9; }
html>body #miDiv { Código para FF }

4- Y un resumen de más cosillas (otros navegadores incluídos) entremezcladas para acabar de liarla más aún.

* html #uno { color: red } /* IE 6 y anteriores */
*:first-child+html #dos { color: red } /* IE 7 y anteriores */
html>body #tres { color: red } /* IE 7 y navegadores modernos */
html>/**/body #cuatro { color: red } /* Navegadores modernos (IE 7 no) */
html:first-child #cinco { color: red } /* Opera 9.27 y anteriores */
html[xmlns*=""] body:last-child #seis { color: red } /* Safari */
body:nth-of-type(1) #siete { color: red } /*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { background: #FFDECE; border: 2px solid #ff0000 } /* saf3, chrome1+ */
}

Interfaces gráficas de usuario: Java Swing

•noviembre 9, 2008 • 3 comentarios

Cuando se creo swing se hizo con el objetivo de evitar tener que usar los componentes gráficos nativos de cada sistema operativo, y crear una interfaz que fuera la misma en cualquier sistema operativo. Además el tener que usar los componentes nativos generaba problemas ya que no se sabe como se comporta la aplicación según el sistema operativo en el que fuese lanzado, al estar swing enteramente desarrollado en Java aumenta su portabilidad asegurando un comportamiento idéntico en diferentes plataformas.

Para crear una interfaz gráfica con swing se siguen los siguientes pasos:
1. Declarar los componentes que usaremos y crearlas.
2. Añadirlas al contenedor o al componente correspondiente.
3. Registrar los eventos que puedan ocurrir ( lo explicare en otro post ).

Primero hay que crearse una ventana pero la diferencia es que para poder añadir los componentes hace falta crearse un contenedor con la clase Container que almacene los componentes. Para crear un contenedor se pone:
Container contenedor=ventana.getContentPane();

En swing también existen los paneles de awt pero se llaman JPanel y tiene la misma funciones que los Panel .
JPanel panel=new JPanel();
En swing hay mas tipos de paneles como JScrollPane ( muestra barras de desplazamiento ), JRootPane , etc. Son paneles para mejorar un poco los componentes que se le añaden o para dar alguna función extra.

A continuación tenéis un ejemplo de interfaz gráfica con swing:

  1. import java.awt.*;
  2. import java.awt.event.*;
  3. import javax.swing.*;
  4. import javax.swing.event.*;
  5. class MiListasFrames {
  6. //declareamos
  7. private Container contenedor;
  8. //Ventana
  9. private JFrame ventana;
  10. //etiqueta
  11. private JLabel etiqueta;
  12. //campo texto
  13. private JTextField texto;
  14. //eleccion
  15. private JComboBox marcas;
  16. //lista
  17. private JList lista;
  18. String complementos[]={ “ABS”,“Aire-Acod”,“Air-Bag”,“Direc-Asis”,“EE”,“Pintura met.”,“Radio” };
  19. boolean marcaEligida=false;
  20. public MiListasFrames() {
  21. //crear ventana
  22. ventana=new JFrame();
  23. ventana.setSize(330,194);
  24. ventana.setTitle(“Concesionario”);
  25. contenedor=ventana.getContentPane();
  26. //crear etiqueta
  27. etiqueta=new JLabel(“Selecciona marca y equipamiento”);
  28. //crear campo texto
  29. texto=new JTextField();
  30. texto.setEnabled(false);
  31. //crear eleccion
  32. marcas=new JComboBox();
  33. marcas.setFont(new Font(“Arial”,Font.PLAIN,10));
  34. marcas.addItem(“Citroen”);
  35. marcas.addItem(“Fiat”);
  36. marcas.addItem(“Ford”);
  37. marcas.addItem(“Opel”);
  38. marcas.addItem(“Peugeot”);
  39. marcas.addItem(“Renault”);
  40. marcas.addItem(“Seat”);
  41. //crear Lista
  42. lista =new JList(complementos);
  43. //añadimos a ventana
  44. contenedor.add(“North”,etiqueta);
  45. contenedor.add(“South”,texto);
  46. contenedor.add(“West”,marcas);
  47. contenedor.add(“East”,lista);
  48. //registramos eventos
  49. lista.addListSelectionListener(new ManejadorListSelectionListener());
  50. marcas.addItemListener(new ManejadorItems());
  51. //Registramos el evento de cerrar la ventana
  52. ventana.addWindowListener(new CerrarVentana());
  53. ventana.setVisible(true);
  54. }
  55. class ManejadorItems implements ItemListener {
  56. public void itemStateChanged(ItemEvent i) {
  57. texto.setText(“”);
  58. lista.clearSelection();
  59. marcaEligida=true;
  60. }
  61. }
  62. class ManejadorListSelectionListener implements ListSelectionListener {
  63. public void valueChanged(ListSelectionEvent l) {
  64. String acum=“Marca:”+marcas.getSelectedItem()+“#”;
  65. if(marcaEligida) {
  66. Object seleccionados[]=lista.getSelectedValues();
  67. for(int index=0;index<seleccionados.length;index++)
  68. acum+=seleccionados[index]+“*”;
  69. texto.setText(acum);
  70. }
  71. else
  72. texto.setText(“Debe seleccionar una marca primero”);
  73. }
  74. }
  75. public static void main(String args[]) {
  76. new MiListasFrames();
  77. }
  78. }

Unidades de medida en LaTeX

•octubre 3, 2008 • 1 comentario

Bueno, la información listada en este post aparece en el libro “The LaTeX Companion” (página 855) e indica las diferentes unidades de medida disponibles en LaTeX.

sp Scaled point Es la unidad más pequeña de TeX (65536 sp = 1 pt)
pt Punto Equivale a 0.351 mm o 1/(72.27) pulgadas
bp Punto grande Equivale a 0.353 mm o 1/72 pulgadas (se le conoce como Punto Postscript)
dd Punto Didôt Equivale a 0.376 mm o 1/72 de la pulgada francesa
mm Milimetro Equivale a 2.845 puntos
pc Pica Equivale a 4.218 mm o 12 puntos
cc Cicero Equivale a 4.531 mm o 12 puntos Didôt
cm Centímetro Equivale a 10 mm o 2.371 picas
in Pulgada Equivale a 25.4 mm o 72.27 puntos o 6.022 picas

ex Equis Altura de la letra “x” del tipo en uso
em Eme Ancho de la letra “M” del tipo en uso
mu Unidad matemática 18 mu equivalen a 1 em

Algo muy a tener en cuenta si ya queremos pulir, más si cabe, el documento que estemos creando con un diseño estético más avanzado.

Bibliografías en LaTeX

•julio 24, 2008 • 7 comentarios

Como en todo, no hay una única manera de hacerlo. Normalmente si se trata de una bibliografía corta y no estamos interesados en reutilizar los datos bibliográficos la elección habitual es escribirla “a mano” mediante el comando \thebibliography. Para utilizar datos bibliográficos reutilizables, largos o complejos es preferible emplear la utilidad BibTeX.

El manejo de la bibliografía es semejante al de las referencias, de lo cual ya hemos hablado. En ambos casos, cada registro bibliográfico tiene una etiqueta. Cuando, en una determinada posición del texto, queremos hacer referencia a un registro, hacemos uso del comando \cite{etiqueta}. LaTeX ya se encarga de colocar el número o referencia que corresponde a esa entrada y, en el apartado de bibliografía, coloca los datos de la entrada. En caso de que queramos escribir los datos pero no queremos poner una referencia en el texto, utilizamos \nocite{etiqueta}.

El entorno \thebibliography

\begin{thebibliography}{n}
\bibitem{etiqueta}datos

\end{thebibliography}

donde etiqueta es la etiqueta que identifica la entrada y datos son los datos de la entrada. Por ejemplo:

\begin{thebibliography}{9}
\bibitem{Knuth}D. E. Knuth, “The TeXbook”, Addison–Wesley, 1984
\end{thebibliography}

BibTeX

BibTeX es un entorno más complejo para tratar bibliografía, pero es extremadamente útil y fácil de usar. Además, permite reutilizar los ficheros de bibliografía que escribamos para otros
proyectos.

En primer lugar, generamos un fichero al que pondremos un nombre con extensión .bib; por ejemplo mibiblio.bib. En nuestro caso podría contener lo siguiente:
@book{Knuth,
author=”Donald E. Knuth”,
title=”The {T}e{X}book”,
publisher=”Addison–Wesley”,
year=1984,
}

El campo @book nos indica qué tipo de registro es. Hay muchos: para libros, artículos, tesis, manuales, etc. Consulta la documentación de BibTeX para conocerlos. Knuth es la etiqueta que identifica el registro que luego citaremos con \cite. El resto del archivo está claro qué es. Puede sorprender el uso de {} en el título. Esto se debe a que BibTeX maneja automáticamente las mayúsculas y minúsculas: el la forma de indicarle que no debe modificar lo que va dentro, pues de lo contrario lo pondrá en letras minúsculas..

En el documento en el que queremos poner la bibliografía debemos incluir las siguientes líneas:
\bibliographystyle{estilo}
\bibliography{mibiblio.bib}


Donde estilo es el tipo de estilo que queremos para nuestra bibliografía. Hay varios estilos predefinidos (consulta el manual) y puedes crear los tuyos propios. Yo suelo utilizar el estilo plain que ordena las entradas alfabéticamente y las referencias son numéricas. en cuanto al comando \bibliography{mibiblio.bib} debemos colocarlo allí donde queramos insertar la bibliografía.

Vale ¿y ahora? Pues hay que compilar el documento: latex documento. Pero no sale la bibliografía. ¿Por qué? Porque en esta primera pasada LaTeX ha ido recogiendo las citas bibliográficas (los \cite y \nocite que has puesto) y los ha puesto en un fichero auxiliar. Ahora debes ejecutar bibtex documento (¡ojo! no bibtex mibiblio). Ahora BibTeX lee el fichero auxiliar y coge las entradas del fichero bibliográfico y genera ya el índice bibliográfico con las entradas utilizadas. Si ahora ejecutas de nuevo latex documento LaTeX se encontrará el índice bibligráfico ya generado y lo inserta donde toca. Esta secuencia de comandos solo debe ser repetida cada vez que cambies la bibliografía.

Fuente: SalvaDigital.

Windows 7, para Enero del 2010

•julio 23, 2008 • Dejar un comentario

El vicepresidente de Microsoft, Bill Veghte, ha confirmado en una carta enviada a socios y clientes empresariales que el próximo sistema operativo de escritorio de la compañía será comercializado en enero de 2010.

En la nota titulada “Actualización del roadmap de Windows”, Veghte indicó que los planes de Microsoft era entregar Windows 7 tres años después de la fecha de lanzamiento de Vista”.

El vicepresidente de Microsoft explicó que la comunicación de la fecha oficial venía motivada por la petición de sus clientes de conocer un calendario concreto para la liberación del próximo Windows, más con la retirada de las ventas de XP el 30 de junio.

Veghte, como no podía ser de otra forma, aprovechó para alabar las virtudes de Vista, aunque otras partes de su nota indiquen claramente que Microsoft no está satisfecho con la implantación de Vista.

Veghte abordó una de las principales críticas del cliente empresarial (al que iba dirigida la carta) como la falta de compatibilidad de las aplicaciones cuando fue lanzado Vista, pidiendo que fueran comunicadas a la compañía. “Nuestra meta es garantizar que el proceso de migración de Windows Vista a Windows 7 sea sencillo”.

Fuente: The Inquirer