Página personal de Nestor Andres Angulo

Para cumplir con los requerimientos de evaluacion del modulo 2, enumeraré cada requerimiento con su respectiva solucion

Requerimientos

  1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.

    Respuesta

    He modificado el color de fondo del body en general, modificando tambien las etiquetas h1 y h2 asi como un degradado al contenedor del codigo. Para ello he usado el siguiente codigo.

       body{
          background-color: #fafafa;
          padding: 20px
       }
       h1{
       color: #383838
       }
       h2{
          color: #787878
       }
       h3{
         color: #686898
       }
       .code{
          background: rgba(212,228,239,1);
          background: -moz-linear-gradient(-45deg, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
          background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
          background: -webkit-linear-gradient(-45deg, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
          background: -o-linear-gradient(-45deg, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
          background: -ms-linear-gradient(-45deg, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
          background: linear-gradient(135deg, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );
       }
  2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.

    Respuesta

    He usado el servicio de Adobe Edge web Font, llamando mediante font-family: advent-pro, sans-serif;. Tal como se muestra en el siguiente codigo

       body{
          font-family: advent-pro, sans-serif;
          background-color: #fafafa;
          padding: 20px
       }
  3. Distintos encabezados.

    Respuesta

    Los encabezados que uso son h1 , h2 y h3 tal como se indica en el siguiente codigo

       

    Página personal de Nestor Andres Angulo

       <h1>Página personal de Nestor Andres Angulo</h1>    

    El algoritmo de perfilado de HTML5

       <h2>El algoritmo de perfilado de HTML5</h2>    

    Definiendo secciones en HTML5

       <h3>Definiendo secciones en HTML5</h3>
  4. Uso de caracteres especiales br>
    Respuesta

    He usado algunos caracteres tales como

       <
       >
       &
  5. Incluir, imágenes de tipo bitmap y vectorial.
  6. Incluir algún vídeo.



    Si almacenara el video de forma local lo haria con el siguiente codigo:

       
       <video width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
       </video>
  7. Incluir bordes redondeados en alguna de sus cajas.
    Tengo border circulares !!
  8. La página debe comenzar con el siguiente encabezamiento:  “Página personal de <nombre y apellido del alumno>”

La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado es muy tosco y genera numerosos problemas:

  1. HTML5 quita la necesidad de elementos <div> para definir secciones semánticas sin definir valores específicos para los atributos class, introduciendo un nuevo elemento, <section>, el elemento de sección HTML.
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal. Esto se resuelve en HTML5 con los elementos de seccionado (<article>, <section>, <nav> y <aside>) son siempre subsecciones de su sección ancestra más cercana.
  3. HTML5 introduce el elemento <hgroup> que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> crea el perfil 1. Justine).
  4. Un documento puede tener secciones especiales conteniendo información relacionado que no es parte del flujo principal. HTML5 introduce el elemento <aside> permitiendo a dichas secciones no ser parte del perfil principal.
  5. Hay información relacionada no al documento pero si al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: <nav> para colecciones de enlaces, como una tabla de contenidos, <footer> y <header> información relacionada con el sitio.

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los perfiles de documento ser predecibles y usados por el navegador para mejorar la experiencia de usuario.

El algoritmo de perfilado de HTML5

Definiendo secciones en HTML5

Todo el contenido incluido dentro del elemento <body> es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento <body>, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas <body>, <section>, <article>, <aside>, <footer>, <header>, y <nav>. Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento <h1>. Consulte también Definiendo cabeceras en HTML5.

Ejemplo

<section>
   <h1>Forest elephants</h1>
   <section>
      <h1>Introduction</h1>
      <p>In this section, we discuss the lesser known forest elephants.
   </section>
   <section>
      <h1>Habitat</h1>
      <p>Forest elephants do not live in trees but among them.
   </section>
   <aside>
      <p>advertising block
   </aside>
</section>
<footer>
<p>(c) 2010 The Example company</p>
</footer>