Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 24 vistas

    Introducción Diseño Web HTML

    Cargado por

    Sara Trinidad
    Este documento explica los conceptos básicos de HTML5, incluyendo sus características, etiquetas y estructura. También cubre temas como diseño web adaptable, Bootstrap, jQuery, hojas de estilo CSS y rejillas.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Introducción Diseño Web HTML

    Cargado por

    Sara Trinidad
    24 vistas21 páginas
    Este documento explica los conceptos básicos de HTML5, incluyendo sus características, etiquetas y estructura. También cubre temas como diseño web adaptable, Bootstrap, jQuery, hojas de estilo CSS y rejillas.

    Descripción original:

    Clase

    Título original

    INTRODUCCIÓN DISEÑO WEB HTML

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento explica los conceptos básicos de HTML5, incluyendo sus características, etiquetas y estructura. También cubre temas como diseño web adaptable, Bootstrap, jQuery, hojas de estilo CSS y rejillas.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    24 vistas21 páginas

    Introducción Diseño Web HTML

    Cargado por

    Sara Trinidad
    Este documento explica los conceptos básicos de HTML5, incluyendo sus características, etiquetas y estructura. También cubre temas como diseño web adaptable, Bootstrap, jQuery, hojas de estilo CSS y rejillas.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    Está en la página 1de 21

    Objetivo: En este proyecto crearás sitios web utilizado la versión 5 del lenguaje

    HTML, lo que te permitirá lograr un diseño llamativo y adaptable a varios


    dispositivos. Ampliarás tus competencias en el área de diseño web, al utilizar
    estándares, etiquetas y herramientas que facilitan la creación de un sitio moderno.

    SECCIÓN 1: COMPONENTES DE HTML5

    HTML significa Lenguaje de Marcado para Hipertexto (HyperText Markup


    Language) y es el lenguaje más usado para crear y visualizar páginas web.
    El contenido dentro de una página web es etiquetado con elementos HTML
    como <img>, <p>, <div>, entre otros. Estos elementos conforman los bloques que
    constituyen un sitio web.

    HTML provee básicamente tres


    características: estructura, estilo y funcionalidad. En HTML es común utilizar
    enlaces para conectar una página web con otra. Además, soporta imágenes y
    otros elementos multimedia.
    ¿Qué es HTML5?

    HTML5 es la quinta revisión del lenguaje básico para elaborar páginas web. HTML5 es
    una combinación de nuevas etiquetas HTML, JavaScript y otras tecnologías
    complementarias.

    HTML5 establece nuevos elementos, atributos y comportamientos que reflejan el uso de


    los sitios web en la actualidad. Es recomendable actualizar el navegador a la versión más
    reciente para aprovechar todas las características de HTML5.
    Algunas características de HTML5

     Es independiente del dispositivo, funciona en un teléfono móvil, una tableta


    o computadora personal.
     La estructura está basada en elementos HTML y JavaScript.
     Proporciona un excelente soporte para usar contenido multimedia.
     Reduce la necesidad de plugins externos, tal como Flash Player.

    Algunas novedades en HTML5:


     Estructura web con nuevos elementos.
     Nuevas etiquetas para contenido multimedia: canvas, audio y video.
     Mejora en validación: required, email, number y date.
     Nuevas funciones para arrastrar objetos: drag y drop.
     Etiquetas para organizar más fácilmente la
    información: div, section y article, entre otras.
     Nuevas propiedades CSS3 para creación de estilos.
    Estructura básica de HTML5
    Los documentos HTML se encuentran debidamente organizados. Los
    elementos de una página web son la espina dorsal de un documento
    HTML, de forma similar a como se observa en el esquema:
    Sintaxis del HTML

    El HTML es un lenguaje que basa su sintaxis en un elemento


    llamado etiqueta. La etiqueta presenta dos partes: una apertura <tag> y
    un cierre </tag>. Por ejemplo: <p> y </p>.
    Algunas etiquetas HTML5

    HTML5 introduce nuevos elementos que mejoran la estructura de una


    página web.
    Etiquetas básicas

    Etiquetas de lista
    Etiquetas para formularios

    Etiquetas para tabla

    Propiedades CSS
    Elementos Bootstrap

    ¿Qué es un Wireframe?

    Un wireframe es un esquema que representa de forma sencilla la estructura y diseño de


    un sitio web. El wireframe representa el diseño de la página y la organización del
    contenido; incluye elementos para la interfaz y la navegación.
    Generalmente en los wireframes no se utilizan colores, tipografías o
    imágenes. Lo importante es centrarse en la funcionalidad del sitio y la
    experiencia del usuario. La prioridad es poder idear la mejor forma de
    presentar los contenidos. Los esquemas pueden ser dibujados con lápiz y
    papel, esquemas en una pizarra o por medio de una herramienta en línea
    o una aplicación.
    Herramientas en línea para crear wireframes:
     https://gomockingbird.com
     https://cacoo.com
     https://www.gliffy.com
    Plantillas imprimibles
    Las plantillas imprimibles son otra forma de crear wireframes. Por ejemplo,
    se pueden encontrar diseños en la
    dirección http://zurb.com/playground/responsive-sketchsheets

    SECCIÓN 2: EDITORES DE CÓDIGO

    Editores de código

    HTML es un lenguaje en el que podemos crear y editar un sitio web.


    Puedes utilizar cualquiera de los siguientes editores para crear tu sitio web:
    Editores de código para Windows:
     Notepad ++

     Aptana
     jEdit
     PSPad
     ConTEXT

    Editores de código para Mac OS:


     jEdit
     Smultron
     TextWrangler
    Editores de código para Linux:
     Aptana
     gEdit
     Kate
     vim
     Emacs

    Navegadores web
    El navegador es un programa que nos permite visualizar las páginas web.
    El trabajo del navegador es leer el código HTML y CSS para mostrar una
    salida en pantalla. Se sugiere instalar varios navegadores para confirmar
    que el sitio web funciona correctamente.
    SECCIÓN 3: DISEÑO WEB ADAPTABLE

    El diseño web adaptable (Responsive Web Design) es una tendencia


    de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las
    páginas web a diferentes dispositivos.

    Actualmente las páginas web se visualizan en muchos tipos de dispositivos


    como tabletas, teléfonos, computadoras portátiles y de escritorio. Cada
    uno con sus propias características en tamaño y resolución.
    Esta tendencia pretende que, con un solo documento, se tenga una
    visualización adecuada en cada dispositivo. El responsive web design es
    posible gracias al uso de Media Query en los estilos CSS3.
    Ventajas:
     Se reducen costos, debido que el diseño es similar en la mayoría de
    dispositivos.
     La velocidad de carga es más rápida.
     Es compatible con la mayoría de navegadores.
     Mejora la experiencia de navegación.
    ¿Qué es Bootstrap?

    Bootstrap es un conjunto de herramientas basado en HTML y CSS,


    creado por Twitter y liberado en 2012. Este “framework” es de uso libre y
    sirve para diseñar sitios y aplicaciones web, proporcionando mejoras en la
    apariencia de botones, menús, formularios y otros elementos.

    Los diseños creados con Bootstrap son simples, limpios e intuitivos. Esta
    característica agiliza el proceso de carga y se adapta a otros dispositivos.
    Puedes ingresar a la siguiente dirección http://getbootstrap.com/getting-
    started/ para obtener diferentes recursos del framework:
     Archivos de descarga (Download).
     Bootstrap CDN.
     Estructura de carpetas y archivos.
     Plantilla básica a utilizar.
     Ejemplos y mucho más.
    Navegadores que soporta:
     Chrome
     Firefox
     Opera (Mac OS, Windows)
     Safari (iOS, Mac OS)
     Internet Explorer (Windows)

    jQuery

    JQuery es una biblioteca de JavaScript que permite simplificar la manera


    de interactuar con los documentos HTML. Al igual que otras bibliotecas,
    ofrece una serie de funciones basadas en JavaScript que de otra forma
    requerirían más código, tiempo y espacio.

    Por ejemplo: manipular la hoja de estilos, efectos y animaciones, agregar


    interacción y mucho más. jQuery es un único archivo JavaScript que
    contiene las funciones comunes.
    ¿Cómo se inicia?
    La forma de interactuar con la página es mediante la función $().
    Hoja de estilos CSS

    La hoja de estilo en cascada (Cascading Style Sheets) es un lenguaje


    usado para definir y crear la presentación de una página HTML. El código
    de estilo puede ser definido en un archivo separado o en la misma página
    HTML. En este último caso se deben definir los estilos utilizando el
    elemento “style”.

    ¿Para qué se utiliza la hoja de estilos?


    Proporciona estilo al documento HTML separando el contenido de la
    presentación. Los CSS permiten controlar el estilo y formato de múltiples
    páginas al mismo tiempo. Cualquier cambio afectará a todas las páginas
    vinculadas en las que aparezca ese elemento.
    Versiones:
    CSS1
    Es la primera especificación oficial de CSS, recomendada por la W3C y
    publicada en diciembre de 1996.
    CSS2
    Esta especificación fue desarrollada por la W3C y publicada en mayo de
    1998.
    CSS3
    Es la última evolución del lenguaje de las hojas de estilo en cascada. Está
    dividida en varios documentos separados llamados módulos. Los primeros
    borradores fueron liberados en junio de 1999.

    Ventajas:
     Esquinas redondeadas, sombras, transiciones o animaciones.
     Control centralizado de la presentación de la página.
     Pueden definirse los mismos estilos para muchos elementos.
    Atributo CLASS
    Este atributo asigna uno o más nombres de clase a un elemento. Se puede
    asignar el mismo nombre a cualquier número de elementos.

    Atributo ID
    Este atributo asigna un identificador único a un elemento.

    Tipos de rejillas
    La rejilla o grid es la base sobre la que se construye el diseño de una
    página web. Es un componente que garantiza que la página web se
    adaptará adecuadamente en diferentes dispositivos.
    Bootstrap utiliza un modelo de rejilla basado en dos tipos de contenedores y una
    rejilla de 12 columnas que resulta muy flexible y fácil de modificar.
    1. container:
    El contenido de la página web aparece centrado y con un ancho fijo.

    2. container-fluid:
    El contenido de la página web puede ocupar todo el ancho disponible.

    ¿Cómo funciona el sistema de rejillas?


     Las columnas se agrupan dentro de filas (.row).
     Las filas se colocan dentro de un contenedor: .container o .container-fluid.
     Cada fila se puede dividir hasta un máximo de 12 columns.
     El contenido se debe colocar dentro de cada columna.
     La separación entre columnas se realiza aplicando padding.
    Con este orden el sistema de rejillas funcionará correctamente.
    Características de las rejillas en los dispositivos:

    Ejemplo de rejillas
    El siguiente ejemplo muestra cómo crear una rejilla con la clase .col-md:

    Vista previa
    Ejemplo de rejillas para móviles, tabletas y pc de escritorio:

    Ingresar a la dirección http://getbootstrap.com/css/#grid para consultar


    más detalles sobre las rejillas.

    SECCIÓN 4: MEDIA QUERIES

    CSS Media Queries

    Las Media Queries se dieron a conocer por primera vez en la propuesta


    inicial de CSS en 1994. Una Media Query es una serie de órdenes que se
    incluyen en la hoja de estilos que permiten adaptar el contenido de un
    documento HTML a las características de un dispositivo con una
    resolución de pantalla determinada, utilizando parámetros como ancho,
    alto y color.
    Sintaxis:

    Las Media Queries se pueden utilizar para adaptar propiedades a:


     Alto y ancho de una pantalla.
     Alto y ancho de un dispositivo.
     Orientación de un dispositivo.
     Crear formatos especiales de impresión.
     Aplicar combinación de estilos avanzados y más.
    Ejemplo:

    JavaScript

    JavaScript (JS) es un lenguaje de programación que se utiliza para crear


    páginas web dinámicas. Los programas son llamados scripts y consisten
    en funciones que son llamadas desde el propio HTML cuando sucede
    algún evento.

    Una página web dinámica incorpora elementos como:


    a. Animación de elementos en una página.
    b. Acciones que se activan al pulsar botones.
    c. Contenido interactivo como juegos, reproducción de audio y video.
    d. Validación de datos en un formulario.
    e. Transferencia de información sobre hábitos de lectura.
    f. Ventanas con mensajes de aviso.
    JavaScript es un lenguaje de programación interpretado, por lo que no es
    necesario compilar los programas para ejecutarlos. Los programas
    escritos con JavaScript se pueden probar directamente en cualquier
    navegador sin necesidad de procesos intermedios.
    Ejemplo:

    También podría gustarte