profesordeinformatica.com en Egibide

martes, 7 de mayo de 2013

Curso HTML5. Post 6. La etiqueta address.

La etiqueta <address>

La etiqueta address no es una etiqueta nueva, ya que existía anteriormente aunque prácticamente no se utilizaba, era una forma de referenciar direcciones postales. En la nueva versión la W3C pretende que sea una etiqueta que se va a utilizar para indicar información del propietario del página o parte de una página o artículo incluyendo información como correo electrónico o la dirección de la página. Suele introducirse dentro de la etiqueta footer, aunque no tiene por qué.

Ejemplo 1:

<h2>Artículo</h2>

</header>

<p>Descripción del artículo</p>

Escrito por: <a href="mailto:alopezaberasturi@egibide.org">Aitor LA</a>.<br/>

profesordeinformatica.com <br/>

Egibide<br/>

</address>

</footer>

</article>

Ejemplo 2:

<h1>La etiqueta address</h1>

<address>por Aitor Lopez de Aberasturi</address>

</header>

<p> Esta estiqueta ,.....</p>

</article>

NO habrá que utilizar la etiqueta address para referenciar a una dirección postal.

Egibide- Nieves Cano <br/>

profesordeinformatica.com <br/>

C/ Nieves Cano, 1<br/>

01001 Vitoria-Gasteiz <br/>

</address>

domingo, 5 de mayo de 2013

Curso HTML5. Post 5. Truco para la visualización correcta en navegadores que no soportan HTML5

Aunque se supone que HTML5 puede ser procesado correctamente incluso en navegadores que no lo implementan, hay navegadores y versiones como Internet Explorer 8 y anteriores tiene problemas para procesarlo. Como solución se propone añadir el siguiente código en la cabecera del documento HTML:

Curso HTML5. Post 4. Hoja de estilos CSS básica para html5

Para que el anterior código tenga el diseño deseado tendremos que añadir hojas de estilo a nuestra página web. A la hora de hacer una página web hay que separar el contenido, que irá incluido en el html del estilo (colores, tamaños, diseño,...) que se incluirá en las hojas de estilo CSS. Más adelante hablaremos de las hojas de estilo y en concreto de las novedades que ofrece la nueva versión CSS3. De momento vamos a incluir una hoja de estilos interna básica a nuestra página web. Esto lo incluiremos dentro del head de nuestra página web:

<style type="text/css" >
body {
    width: 940px;
    font: 12px Helvetica, Arial, sans-serif;
    background: #f5f5f1;
    margin: auto;
}
header, section, footer, aside, nav, article {
    display: block;
    position: relative;
    float:left;
    height: 40px;
}
header {
    width: 100%;
    background: #ddd;
}

nav {
    width: 240px;
    background: #fff;
    background: #999;
}

section {
    background: #777;
    width: 700px;
    height: 100%;
}

article {
    width: 650px;
    margin: 10px;
        background: #aaa;

}
aside {
    width: 240px;
}

footer {
    width: 100%;
    background: #666;
}

</style>

miércoles, 1 de mayo de 2013

Curso HTML5. Post 3. Estructura básica de un documento HTML5

Estructura básica de un documento HTML5

HTML5 incorpora varias etiquetas o tags nuevas que sobre todo ayudan en la maquetación de una página web. Inicialmente se maquetaba con tablas y posteriormente con capas (div). Todo maquetador habrá tenido sus problemas con las famosas capas a la hora de ajustar para los diferentes navegadores. La nueva versión de HTML facilita esta maquetación ya que crea nuevas etiquetas para facilitar y reducir el código. La mayoría de maquetadores utilizaban <div id=”cabecera”> para indicar la cabecera de un documento, en su lugar en HTML5 tenemos la etiqueta <header>.

Esta es la estructura básica de un documento:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

<title>Mi primera pagina web</title>

</head>

    <body>
            <header> Cabecera
            </header>
            <aside>
                <nav>
                    Navegador
                </nav>
            </aside>
        <section> Seccion
               <article>
           Articulo 1
               </article>
           <article>
           Articulo 2
               </article>
        </section>
            <footer>
           Pie de pagina
            </footer>
    </body>
</html>

<section>: Será una zona de un elemento.

<article>: Representa a cada un post, una noticia, o artículo.

<aside>: Es la barra lateral donde hay contenido relacionado con la página.

<header>: La cabecera de un documento o sección (ya que puede estar dentro de un article).

<footer>: El pie de página de un documento.

<nav>: zona que indica la navegación de la web por un documento.

martes, 30 de abril de 2013

Curso HTML5. Post 2. Mi primera página web.

Mi primera página web

Como en todo lenguaje de programación vamos a realizar una página web con el contenido “Hola mundo”:

<!DOCTYPE html>

<head>

<title>Mi primera pagina web</title>

</head>

<body>

Hola mundo

</body>

</html>

<!DOCTYPE html> indica el comienzo de la página web. Esto sustituye al código por ejemplo utilizado en HTML4 estricto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

La etiqueta <head> contiene todos los elementos que no se van a visualizar en una página web.

La etiqueta <title> contiene el título de la página. Su contenido es muy importante ya que va a ser fundamental en el posicionamiento de nuestra página web dentro de los buscadores.

La etiqueta <body> contiene el cuerpo de la página web. En el vamos a tener todos los elementos que se van a visualizar en una página web.

NOTA: Es importante que todo lo que se abre se tiene que cerrar y siguiendo un orden jerárquico. Por ejemplo <head><title></head></title> sería incorrecto.

NOTA: Una de las novedades de HTM5 es que las etiquetas se puedes escribir tanto en mayúsculas como en minúsculas aunque a mi personalmente me siga gustando escribirlas en minúsculas siguiendo las anteriores versiones. En ese sentido es mucho menos estricto, incluso a la hora de poner comillas.

Curso HTML5. Post 1. Introducción.

Introducción

El HTML5 (HyperText Markup Language, versión 5) es la quinta versión del lenguaje de marcas HTML que nos ha permitido durante dos décadas crear página web. Aunque esta versión está en modo Beta, los nuevos navegadores, incluido Internet Explorer, implementan algunas características del nuevo lenguaje. A la hora de utilizar HTML hay que tener en cuenta si el navegador o navegadores tienen implementada la funcionalidad que queremos utilizar.

El lenguaje HTML es un lenguaje de marcas compuesto por etiquetas. Las etiquetas comienzan por un símbolo menor (<) y terminan por un símbolo mayor (>). Por ejemplo vamos a tener la etiqueta <article> que va indicar el comienzo de un artículo. Todas las etiquetas tienen un final normalmente se indica con el símbolo menor barra (</) </article> que indica el final del artículo.

Contenido del artículo

</article>

Dentro de una etiqueta vamos a poder tener atributos con sus correspondientes valores.

<etiqueta atributo=”valor” ></etiqueta>. Los atributos relacionados con el diseño se van a incorporar en las hojas de estilo que veremos en el próximo capítulo.

Para hacer una página web vamos a necesitar por una parte un editor (gedit, notepad, bluefish, notepad ++) y por otra parte un navegador (firefox, chrome, explorer, opera,...). En el editor de texto vamos a escribir el código HTML y vamos a guardar los documentos con extensión .html o .htm. Con el navegador vamos a visualizar la página web escrita. Yo suelo aconsejar un editor que te marque las etiquetas y te ayude con los colores y es importante probar nuestras páginas en diferentes navegadores ya que no se verá de igual forma en todos (y sobre todo en HTML5).

HTML5 nos permite una mayor interacción entre nuestras páginas web y contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

miércoles, 24 de abril de 2013

Habilitar/deshabilitar ping firewall windows XP [Solución]

Para denegar el ping a tu máquina en Windows XP lo único que tienes que hacer es :

1.- Entrar en tu firewall de windows (Panel de control -> Firewall de windows)
2.- Ir a opciones avanzadas
3.- ICMP -> Configuración -> Quitar "permitir solicitud de eco entrante"
4.- Opciones Avanzadas -> Configuración -> ICMP -> Quitar "permitir solicitud de eco entrante"

Si una de las 2 pestañas no te la deja desmarcar suele ser porque se a modificado la configuración (por ejemplo se comparte carpetas o impresoras). la solución más rápida es "Restaurar los valores predeterminados".