Reset CSS

Neosy — Wed, 15 Sep 2010 08:00:53 +0000

Como diseñador web, muchas veces nos encontraremos que teniendo un mismo archivo de estilo css, hay cosas que se ven distinto entre los diferentes navegadores. Márgenes mas grandes o pequeños, fuentes de letra, colores… Hay una forma de minimizar el impacto que los navegadores, con sus css por defecto, puedan hacer sobre nuestra página. Para ello usaremos los reset.css. Es un css adicional que habrá que incorporar a la página antes que los demás estilos.

Hay diferentes reset.css, pero los dos mas importantes son:

Yahoo! UI Library: Reset CSS de Yahoo. No comentaré nada al respecto, simplemente lo he nombrado porque fué el primero en aparecer.

Eric Meyer: Poco después de aparecer la versión de Yahoo, Eric Meyer (gurú del CSS), creó su propia versión:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Lo único que tenemos que hacer es crear un archivo CSS y importarlo en nuestro html:

Con esto conseguiremos tener nuestro diseño con parametros iguales (prácticamente) en todos los navegadores y nos ahorrará bastantes quebraderos de cabeza.

Primera aplicación con Android: Hola Mundo

Neosy — Mon, 13 Sep 2010 08:00:00 +0000

El otro día comentaba como instalar el entorno para desarrollar aplicaciones para Android utilizando el IDE Eclipse e instalando el SDK. Partiendo de esa base, hoy voy a explicar un poco como crear nuestra primera aplicación, un clásico Hola Mundo.

Al ejecutar Eclipse, lo primero que haremos es asegurarnos de tener bien configurado el compilador (si seguiste el post de puesta a punto del entorno, no te hará falta) . Para ello abrimos el menú:

Window > Preferences > Java > Compiler

Y nos tendremos que asegurar de tener esta opción con este valor:

Compiler compliance level: 1.6

Ahora si, es el momento de crear un nuevo proyecto. Para ello vamos a:

File > New > Other > Android > New Android Project

En la nueva ventana que se nos abrirá, deberemos especificar:

Nombre del proyecto
Versión del SDK que queremos utilizar
Propiedades: nombre de la aplicación, nombre del package y actividad

Finalizamos y después de unos segundos, Eclipse nos habrá preparado el entorno para empezar a desarrollar. La interfaz está estructurada (inicialmente) en cinco apartados internos, pero nos centraremos en tres.

Package Explorer: aquí podremos ver los proyectos
Problems, Javadoc, Declaration y Console
Editor central: desde aquí editaremos el código.

Como habeis visto en la imagen, tengo abierto el holamundo.java (en el Package Explorer: Hola Mundo > src > net.neosy). Es es el archivo que editaremos. Al crear un proyecto, se autorellenará con este código:

package net.neosy;

import android.app.Activity;
import android.os.Bundle;

public class holamundo extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 }
}

Lo único que tenemos que cambiar es la línia 11, por este código:

TextView tv = new TextView(this);
tv.setText("Hola Mundo, desde Neosy.net");
setContentView(tv);

De tal manera que quedará así (habrá que añadir el import para el TextView – linia 5):

// Nombre del paquete
/** Varia dependiendo del nombre del proyecto */
package net.neosy;

// Importamos los paquetes necesarios
/** Nota: si quieres olvidarte de ir importando los paquetes, puedes presionar Cntrl+Shift+O y automáticamente importará los paquetes que falten */
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

// Creamos una actividad.
/** En este caso, vendría a ser como un "int main()" en C. Podemos crear tantas actividades como queramos, pero solo se puede interactuar con una a la vez. */
public class holamundo extends Activity {

 // Aquí iniciaremos la interfaz
 /** onCreate es el un método que Android llamará al iniciar esta actividad */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // Creamos una nueva variable de tipo TextView para controlar el texto que aparecerá por pantalla
  TextView tv = new TextView(this);

  // Le indicamos que texto queremos que aparezca
  tv.setText("Hola Mundo, desde Neosy.net");

  // Mostramos el texto de la variable por pantalla
  setContentView(tv);
 }
}

Ahora solo faltará probar nuestra aplicación. Para ello vamos al menú Run > Run. Saltará un aviso diciendo que no tenemos ninguna máquina virtual creada. Para crear una, acepta el mensaje y en la nueva ventana, hacemos click en New:

Name: Android2.2

Target: Android 2.2

Creamos la máquina virtual (Create ADV). Ahora seleccionamos la máquina que acabamos de crear y hacemos click en Start > Launch.

Veremos como se carga un emulador de Android. Tras un rato (dependiendo del ordenador, mayor o menor), cargará el S.O. Android. Ahora volvemos a la ventana de Eclipse y veremos como salta una ventana automaticamente. Tenemos que indicarle donde queremos que instale la aplicación. Le indicamos la máquina virtual que acabamos de hacer y aceptamos. Ahora sí, podremos ver nuestra aplicación en Android.

Observación: Si vamos a estar haciendo cambios y pruebas, es mejor no cerrar la máquina virtual. Tarda en cargar, la podemos dejar abierta e ir compilando distintas versiones de nuestra aplicación para probarla rápidamente.

Neosy » Programacion

Reset CSS

Primera aplicación con Android: Hola Mundo