Mostrando entradas con la etiqueta Html5. Mostrar todas las entradas
Mostrando entradas con la etiqueta Html5. Mostrar todas las entradas

viernes, 15 de marzo de 2013

Como diseñar una página a dos columnas con CSS


Después de ver una pequeña entrada sobre estilos en cascada css, vamos a comentar como construir un sitio con dos columnas. Ejemplos de esto lo tenemos, por ejemplo, en Studio manchego. En primer lugar dentro de la etiqueta body, vamos a crear varias etiquetas div para crear la estructura de una página con dos columnas. En primer lugar, para poner una introducción, un título o imagen, o una combinación de las mismas crearemos la cabecera o header.
Después vendrá el contenido principal de la página, que lo vamos a dividir en dos partes, contenido principal y un contenido. La página web contiene todos los elementos que queremos que se vean. Para decidir cómo se van a ver, usaremos una hoja de estilos en cascada. Si no la utilizamos la página quedaría muy pobre. Por hacerlo más sencillo, no introduciremos un pie de página. Tampoco vamos a colocar un menú. No obstante, si deseáis ver como se coloca un menú podemos ver está pagina que se enseña como hacerlo.
La estructura de nuestra página debe quedar de la siguiente forma:




Código de la página web

Para crear la página crearemos el siguiente código:




La página la podemos guardar como index.html. Todo lo que se va a ver en la página estará situado dentro de la etiqueta body. El primer elemento es el div header:



Si nos fijamos, dentro del div con id fondo hemos colocado otro dos div (principal y aside):



Lo que queremos es que principal y aside queden colocados uno al lado de otro así:


  

Hoja de estilos

Ahora que tenemos todos los elementos que nos interesan en index.html vamos crear la hoja de estilos. Tal como muestra index, la llamamos estilos.css y la guardamos dentro de la carpeta css. Si a la carpeta la llamamos Mi sitio, su contenido puede ser así:



Esto significa que la carpeta mi sitio tiene dos carpetas (CSS e Imágenes) junto con la página index.html. CSS, a su vez, contiene el archivo estilos.css y la carpeta imágenes podemos decir que tiene dos imágenes.

Vamos a ver el contenido de estilos.css por apartados. Para hacer referencia a cada div usamos su id. Por ejemplo, a header, le aplicamos los distintos estilos poniendo el carácter # antes de su id. Después colocamos las distintas propiedades encerradas entre llaves, y la final de cada propiedad debemos colocar un punto y coma. Podemos recordar que tenemos una referencia de los estilos sobre posicionamiento en librosWeb.

En primer lugar el div con id de valor header queda así:

#header
{
            width: 100%;
            height: 100px;
            background: #fd23;
            font-style: italic;
            font-weight: bold;
            text-align: center;
}

Esto significa que su ancho va a ser el de toda la página, width: 100%. Le damos una altura de 100 pixeles, un color de fondo con la propiedad background. El texto aparece en cursiva gracias a Font-style, Font-weight nos pone en negrita todo el texto y además, estará centrado gracias a text-align.
Al div fondo le aplicamos los siguientes estilos:

#fondo
{
            width: 100%;
            height: 630px;
            background: #ff23;
}

Es decir fondo va a ocupar todo el ancho de la página. Su altura tendrá 630 pixeles.


#principal
{
            float: left;
            width: 65%;
            height: 630px;
            background: blue;
}

Principal y aside van dentro de fondo. Para que principal quede a la izquierda ponemos float: left. La altura es la misma que de fondo y de aside (height: 630 pixeles). Las anchuras las hemos colocado de forma porcentual. Su suma es del 100%. El color de fondo de principal está puesto a azul.

#aside
{
            float: right;
            width: 35%;
            height: 630px;
            background: yellow;
}

Float lo ponemos a right para que quede a la derecha del div principal. Con float hacemos que el resto de la página “fluya” alrededor del elemento. Así conseguimos que aside se coloque al lado de principal, a su misma altura. Color de fondo amarillo.

Si queremos colocar más columnas, lo podemos hacer, las dos primeras columnas la propiedad float tendrá de valor left. En la última su valor será right. La suma de sus anchos no debe superar al ancho del div que los contiene, de lo contrario, una columna podría caer hacia abajo (digamos que tiene que buscar un sitio donde ponerse).
Para ver más ejemplos de maquetación de paginas web podemos ir a la página de desarrolloweb.
Me despido, espero que resulte de ayuda esta entrada para los lectores. Un saludo!!

lunes, 25 de febrero de 2013

Como instalar Emmet en Sublime Text 2

Hoy nos vamos a centrar en como instalar el plugin Emmet en el editor multilenguaje Sublime Text 2. Para crear páginas web, hojas de estilos CSS, trabajar con Sublime Text 2 resulta muy interesante. Como indica Roxana Falasco, "es un editor ligero, rápido y fácilmente configurable".
Para trabajar mejor con él se puede instalar un gestor de paquetes denominado Package Control. Nos permitirá instalar distintos paquetes entre los que se encuentra Emmet que sustituye a otro plugin exitoso, Zen Coding. Presenta un autocompletado muy interesante. Basta escribir una etiqueta y pulsar la tecla TAB para que se complete la entrada de la etiqueta. En aprendiendoando tenemos la posibilidad de ver un video en castellano que nos va a ayudar a generar código con más facilidad gracias a emmet. Voy a deciros ahora los pasos para instalar emmet, tal como he hecho en mi ordenador.

Pasos


1º Vamos a la página wbond para descargar el paquete:

2º Pulsamos en installation.
3º Copiamos el todo el código que tiene fondo gris:

4º Vamos a Sublime Text 2. Pulsamos en el menú View (Vista) donde seleccionamos Mostrar consola (Show console):


Ahora, en la fila de la parte inferior de la pantalla lo pegamos con CTRL + V.



Hacemos clic.
5º Sublime nos pide que reiniciemos el programa. Lo cerramos y lo volvemos a abrir.
6º Presionamos las teclas Ctrl + Shift + P
7º Aparece una ventana flotante donde escribiremos install. Conforme vamos escribiendo sublime va autocomplentando de acuerdo a lo que tecleamos. Cuando aparezca Package Control ya podemos hacer clic sobre el mismo.

8º Ahora tenemos otra ventana donde escribimos el plugin que queremos instalar, Emmet, lo escribimos y hacemos clic sobre el primero que aparezca (veremos dos, pinchamos en el primero).

En esta imagen solo hay uno, pues lo instalé antes. Ya lo tenemos instalado.  A partir de ahora podemos utilizar todas las posibilidades del plugin.

Algunas características que ofrece emmet

a) Por ejemplo, para crear rápidamente la estructura de una página Web escribimos html:5 y pulsamos la tecla TAB. El resultado es el que sigue:


Tenemos la estructura más sencilla para empezar en la elaboración de la página. Esto ha sido posible gracias a que acabamos de instalar el plugin. Tiene muchas más características que es interesante conocer. Podremos generar código con más rapidez sin equivocarnos.

b) Si colocamos las etiquetas de la siguiente forma:

ul>li
y pulsamos en la tecla tabulador el resultado será:


Nos genera la apertura y cierre de ambas etiquetas, además como hemos colocado un símbolo > hace que la etiqueta li esté dentro de ul.

c) Escribir en varios lugares a la vez:
En primer lugar hacemos que la etiqueta li aparezca 5 veces:



Damos a tab y tenemos:


Ahora ya podemos hacer lo que queremos. Hacemos clic dentro de la primera etiqueta li, y ahora con la tecla control pulsada hacemos clic en el resto de etiquetas li. El cursor parpadea en las 5 etiquetas. Empezamos a escribir la palabra elemento y se irá escribiendo en todas al mismo tiempo tal como se aprecia  en la figura.


d) También podemos teclear un par de etiquetas de la siguiente forma:

ol+div

Provocará la siguiente respuesta:



Concatenamos dos etiquetas con el signo +. Ahora ya nos podemos centrar en el contenido de cada una de ellas para escribir lo que le hace falta a cada una de ellas.
Resumiendo, es altamente recomendable hacer uso del plugin. La generación de código es más limpia, rápida y ayuda a evitar errores de escritura, no tenemos necesidad de teclear la apertura y cierre de las etiquetas. Si te gusta y quieres aprender más, puedes ir a la página de Iván Prego que te permitirá profundizar en un mayor conocimiento.
Un saludo a todos!!

Actualizar tablas en Excel

En el siguiente ejercicio vamos a ver como actualizar tablas en excel. Nos centraremos en modificar unos precios con código VBA. Modificare...