Mi primera web HTML5

Colapsar

Anuncio

Colapsar
No hay anuncio todavía.
Este tema está cerrado
X
X
  • Filtrar
  • Tiempo
  • Mostrar
Limpiar Todo
nuevos mensajes

    Mi primera web HTML5

    En este artículo explicaremos cómo crear nuestra primera página en HTML5 y CSS3con WebMatrix 2, veremos algunas de las novedades en etiquetas y atributos de estos estándares y las ventajas que nos ofrece WebMatrix 2 para esta tarea.
    Para ello necesitaremos descargar la herramienta:


    Descárgalo gratis desde aquí, empieza a desarrollar tu sitio web y ayuda a mejorar la herramienta publicando tu feedback en el foro de WebMatrix.
    Internet Explorer 9 es el navegador más compatible con HTML5. Si no lo tienes instalado deberías probarlo. Puedes descargarlo desde aquí.
    Empieza con WebMatrix








    Cuando iniciamos WebMatrix tendremos la opción de abrir un sitio ya creado, de empezar a programar desde una plantilla o instalar una aplicación de la galería. Elegiremos crear nuestro sitio web desde una plantilla, que será la plantilla de sitio vacío para crearlo desde cero.
    En la pantalla principal de WebMatrix seleccionamos el icono Files de la parte inferior izquierda y haremos doble clic en el fichero Default.cshtml. Este fichero será nuestra página de inicio del sitio web. Viene con la estructura base para que podamos empezar a programar en HTML5 y utilizar sintáctica Razor para código de servidor. En este artículo nos centraremos en el código HTML5. Estructura HTML5

    Con HTML5 tendremos una web más simple y semántica gracias a las nuevas etiquetas para identificar mejor algunos elementos y no llenar nuestra página de elementos div sin ningún valor semántico. El ejemplo más claro son las etiquetas video y audio utilizadas para esta clase de elementos multimedia pudiendo identificarlos mejor que con los típicos div con un id.

    Código HTML:
    
    
    
    
    







    Con WebMatrix 2 si no tienes muchos conocimientos de HTML5, su estructura y nuevas etiquetas, no te preocupes,mientras escribes te aparecerán sugerencias mostrándote las etiquetas que puedes utilizar y cuando la selecciones te pondrá la etiqueta de cierre automáticamente para que no se te olvide.








    Si quieres una ayuda más amplia puedes presionar el icono de ayuda que aparece arriba a la derecha. Este icono abre un panel en el que aparecen enlaces a material y cursos referente al tipo de codificación que tenga la página. Si estamos creando una página .cshtml podremos ver ayuda sobre ASP.NET si es .html será sobre HTML5, etc.
    Uso de Header, Nav y Footer

    Vamos a editar la estructura para adecuarla a lo que queremos, empezando por cambiar el lenguaje de la página a español y poniendo el título “Mi primer sitio html5”. También pondremos un título, un menú de navegación y el pie de página.
    Existe una etiqueta nueva denominada. Se utiliza para los elementos que sean encabezados, normalmente títulos, que tengamos en nuestra página y pueden haber varias de estas etiquetas. El título lo pondremos dentro de una etiqueta .
    Para el menú utilizaremos la etiqueta que es la etiqueta para este tipo de funcionalidad que se ha añadido en HTML5. Añadiremos unos cuantos enlaces en el menú. En HTML5 también existe una etiqueta pero hay que tener en cuenta que si se trata del menú de navegación se debe utilizar .
    El pie de página será un elemento y dentro de este hemos añadido el copyright y una fecha para mostrar la última actualización.

    Código HTML:
    
    
    Mi primer sitio HTML5
    
    
    Mi primer sitio HTML5
    
    
    inicio
    blog
    vídeos
    
    
    
    
    Copyright © 2011
    
    Actualizado en: 11 Noviembre 2011
    
    
    
     Etiquetas Section y Article
    Para que no quede tan desolada la página vamos a añadir algo de texto. Para ello insertaremos un elemento entre el menú y el pie, y dentro de ella unos elementos donde pondremos un pequeño texto con un título. El título lo pondremos también entre etiquetas .

    Código HTML:
    WebMatrix 2
    WebMatrix 2 Beta es una herramienta para desarrollo web con la que
    podrás instalar, desarrollar, optimizar, desplegar y administrar tus sitios.
    De esta forma, WebMatrix 2 te permite crear tus sitios web utilizando sólo
    una herramienta. Esta herramienta trae consigo muchas novedades orientadas
    sobre todo a ayudar al desarrollador en la tarea de construir su sitio
    web.
    

    La etiqueta está pensada para definir contenidos que pueda publicarse o distribuirse independientemente, como artículos, comentarios de post, etc. Unas etiquetas de este tipo pueden contener a otras por ejemplo tener el contenido de un post con esta etiqueta y después varias etiquetas dentro correspondientes a los comentarios del mismo.
    Definir el uso de es un poco más complejo. Según el estándar representa una sección genérica agrupando un contenido con la misma temática y contiene una cabecera.
    Puede ver todas las nuevas etiquetas de HTML5 aquí. Primer vistazo







    Ahora ejecutaremos el sitio para ver el resultado de nuestro primer código HTML5. Para ello tenemos el botón Run en la barra superior. Podemos presionar directamente este botón abriéndose nuestro sitio en el navegador que tengamos por defecto o acceder al menú para seleccionar en cuál queremos ejecutarlo o hacerlo en todos con un único clic.








    Editar estilo con WebMatrix

    El resultado que obtenemos es muy simple debido a que no hemos aplicado ningún estilo, así que nos pondremos a ello. Seleccionamos nuestro sitio web y crearemos un nuevo fichero, ya sea presionando el botón New en el menú de la parte superior o haciendo clic con el botón derecho encima de la carpeta de nuestro sitio “Mi primer sitio HTML5”.
    Nos aparecerá el panel para elegir el tipo de fichero y nombrarlo. Elegiremos un fichero de tipo CSS y de nombre pondremos estilo.css.







    Se nos abrirá el fichero CSS para que lo editemos. Si tenemos abierto el panel de ayuda de la derecha podremos ver distintos enlaces a material sobre CSS. Aparte de esta ayuda y de las sugerencias que te ofrece WebMatrix para completar el código, tenemos un Color Picker.







    Este control aparece cuando tenemos que poner alguna propiedad de tipo color. Tendremos una barra donde podremos elegir colores de una fila estando al principio los que hayamos usado ya en la página. Si presionamos el botón + que está en la barra se despliega un panel con el que podremos elegir mejor el color que queramos y cambiar la transparencia o, en cambio, copiar alguno gracias a la herramienta de selección de color.
    Otra ayuda interesante que nos propone WebMatrix aparece a la hora de escribir el valor de algún atributo, informándonos, aparte de sugerencias de posibles valores,qué tipo de valores puede contener ese atributo. En el ejemplo podemos ver cómo nos aparece que el atributo font-size puede tener valores absolutos, relativos, una unidad de medida o un porcentaje.








    Maquetar la página

    Una vez explicado cómo WebMatrix nos puede ayudar con nuestro estilo, vamos a ir creando un estilo no muy complejo para nuestro sitio web. Primero tendremos que añadir a nuestro fichero HTML5 en la sección un enlace al fichero CSS para que coja el estilo aplicado en ese CSS.


    Empezaremos por “colocar” las 3 partes que se compone nuestra página. Pondremos el menú de navegación a la izquierda, la sección con los artículos a la derecha y el pie de página debajo de la sección a la izquierda. También le daremos un ancho fijo a cada una.
    Código HTML:
    nav{
    float:left;
    width: 150px;
    }
    section{
    float:right;
    width:570px;
    }
    footer{float:left}
    He elegido ese ancho debido a que voy a crear la página para una resolución de 1024x720. Lo ideal si se pone un ancho fijo es ir cambiándolo según la resolución del dispositivo desde el que esté navegando el usuario con las Media-Queries. Con lasMedia-Queries podremos hacer sentencias más precisas que las que podíamos hacer con la regla Media gracias a los nuevos valores que se pueden introducir en los atributos.
    Para que quede bien el contenido debemos poner un ancho fijo también al y así centramos el contenido. De paso, utilizando el Color Picker, elegiremos un color para el fondo y pondremos un pequeño margen.

    Código HTML:
    body {
    background-color:#f2f2f2;
    margin: 36px auto;
    width: 720px;
    }
    Personalizar el menú de navegación

    Una vez estructurada la página vamos a dar estilo al menú de navegación. Con el atributolist-style-type podemos cambiar el tipo de enumeración de la lista, para este caso no pondremos ninguno y añadiremos un marginy un padding igual a cero.

    Código HTML:
    nav ul {
    list-style-type:none;
    margin: 0px;
    padding: 0px;
    }
    También utilizaremos text-transform paraaplicar transformaciones al texto, en este caso de todas las transformaciones que tenemos usaremos la de poner la primera letra de las palabras en mayúscula, “capitalizar” las palabras de la lista, cambiaremos el color del texto y quitaremos el formato de enlace.
    nav ul li {
    margin: 5px; padding: 10px; text-transform:capitalize; font-size:20px;
    }
    nav ul li a {
    color:#e34c26;
    text-decoration: none;
    }
    Utilizar CSS Selector

    Una característica interesante de CSS3 es la posibilidad de seleccionar elementos por medio de los CSS Selectors. Los CSS Selectors nos permiten elegir a qué hijos de un elemento queremos aplicar un determinado estilo de una forma fácil. Cómo ejemplo vamos a aplicar un estilo distinto a los elementos pares e impares de que tenemos poniendo un fondo blanco con distinta transparencia con el Color Picker.

    Código HTML:
    article:nth-child(odd){
    background-color:rgba(255, 255, 255, 0.20)
    }
    article:nth-child(even){
    background-color:rgba(255, 255, 255, 0.60)
    }
    Podemos ver que con CSS Selector aplicar un estilo distinto dependiendo de la paridad del elemento es muy fácil con el atributo oddy even. También acepta ecuaciones, por ejemplo (3n), con lo que el estilo se aplicaría cada 3 elementos. Redondear esquinas de bordes con border-radius

    Para mejorar un poco el aspecto de nuestra página vamos a añadir bordes a los elementos de nuestro menú y artículos.
    En CSS3 se ha añadido una nueva característica denominada border-radius con la que podremos redondear los bordes de los elementos sin necesidad de poner imágenes de fondo para lograr esta clase de efecto. Se puede cambiar el ángulo de la curva del borde para decir cuán pronunciada la queremos.
    Aplicaremos un borde uniforme a los artículos mientras que para los elementos del menú haremos un borde más estiloso para comprobar todo el potencial de este atributo. Más información aquí.

    Código HTML:
    article{
    margin-bottom:5px; padding: 10px;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: 2px;
    border-color:#ffffff;
    }
    nav ul li {
    margin: 5px; padding: 10px; text-transform:capitalize; font-size:20px;
    border-radius: 152px 304px 228px 152px;
    border-style: solid;
    border-width: 3px;
    border-color:#ffffff
    }
    Último vistazo

    Ya hemos creado nuestra estructura en HTML5 y aplicado un estilo a los elementos viendo algunas de las novedades de CSS3. Para acabar volveremos a ejecutar nuestro sitio para ver el resultado. [CENTER]

    Fuente: http://blogs.msdn.com/b/esmsdn/archi...l5-y-css3.aspx [CENTER]
    Editado por última vez por nerdy; https://www.forocentral.com/member/67-nerdy en 24/06/15, 17:08:10.

    #2
    Gracias MásPasta por compartir este tutorial, se ha editado para una mejor visualización. Una cosa muy importante, si te basaste en otro articulo por favor cita la fuente si no tendré que asignarte un infracción.
    REGLAS | SOPORTE HOSTING P2H | CONTACTO

    DNS

    dns39.privatehostingservers.com
    dns40.privatehostingservers.com

    NO HAY SOPORTE POR MENSAJE PRIVADO

    Comentario


      #3
      Gracias iLuis mil disculpas puedo conversar contigo por inbox o MP

      Comentario


        #4
        Claro que puedes conversar conmigo por MP, pero si es un problema o algo que se pueda tratar en el foro sería mejor que se hiciera en este.
        REGLAS | SOPORTE HOSTING P2H | CONTACTO

        DNS

        dns39.privatehostingservers.com
        dns40.privatehostingservers.com

        NO HAY SOPORTE POR MENSAJE PRIVADO

        Comentario


          #5
          Gracias por el aporte.

          Lo único que me hizo ruido al inicio fue la referencia al "mejor navegador" Internet Explorer pero luego me di cuenta de que la herramienta era de Microsoft, y todo resultó lógico.

          Saludos.

          Comentario


            #6
            jajaj xD gracias Fedora

            Comentario


              #7
              :v ahora se usan plantillas y todo ya recuerdo mi primera pagina html5 parecia echa con tablas con una sombra fea pero sin envargo para mi fue una marabilla cuando pedi la opinion de otros todos me ptiaron :'v q mal me senti xDD pero siguo adelante todo bien

              Comentario


                #8
                Seguro fueron tus amigos, los amigos siempre hacen eso. XD!!!!

                Comentario


                  #9
                  Originalmente publicado por Fedora Ver Mensaje
                  Seguro fueron tus amigos, los amigos siempre hacen eso. XD!!!!
                  en este caso fueron users de una comunidad conosida

                  Comentario


                    #10
                    Hola, buen artículo para los que recién comienzan con internet. Ahora esta muy de moda utilizar gestores de contenido para todo, pero siempre el código bien aplicado da una gran experiencia de usuario en cuanto a velocidad principalmente. Recuerdo cuando curse diseño web en granada que nos instaban a usar wordpress.
                    Gracias por compartirlo.

                    Martin.

                    Comentario

                    Trabajando...
                    X