Scribd Logo
Importer

Bienvenue sur Scribd !

  • Taller 1 HTML - CSS PDF

    Transféré par

    Arnold David Alape Gutierrez
    125 vues18 pages

    Titre original

    TALLER 1 HTML - CSS.pdf

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    125 vues18 pages

    Taller 1 HTML - CSS PDF

    Transféré par

    Arnold David Alape Gutierrez

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 18

    TALLER SEMANA 1 HTML 5 CON CSS

    1 INSTALACIÓN DE HERRAMIENTAS VISUAL STUDIO CODE, GEDIT 0

    NOTEPAD ++

    Descargamos Visual studio code de


    https://code.visualstudio.com/download

    Descargamos Gedit de la página https://wiki.gnome.org/Apps/Gedit e


    instalar
    Descargar Notepad++ de

    http://notepad-plus-plus.org/download/v6.2.html
    2 ESTRUCTURA DEL ARCHIVO .HTML

    2.1 ETIQUETAS HEADER(CABEZAL) Y FOOTER (PIE DE PÁGINA)


    Digitar en uno de los editores instalados y visualizar en chrome / Firefox
    /opera/ Safari

    2.2 ETIQUETA NAV (NAVEGACIÓN PARA MENÚS)

    • Define los vínculos de


    Nav navegación ¡NUEVA!

    • Define una lista


    ul desordenada

    • Define un elemento de la
    li lista
    2.3 ETIQUETAS SECTION, ARTICLE, ASIDE

    •Define una sección en un


    Section documento ¡NUEVA!

    •Define un artículo ¡NUEVA!


    Article

    •Define el contenido, aparte del


    Aside contenido de la página ¡NUEVA!
    3 MANEJO DE MULTIMEDIA

    Html5 permite manejar video y audio fácilmente

    3.1 MANEJO DE VIDEO

    Nos da posibilidad de insertar video en diferentes formatos

    En el src=”nombre del video.mp4” type ="video/mp4"

    El video debe estar en la carpeta del sitio

    Formatos de vídeo HTML5 soportados por los navegadores

    Firefox: OGV

    Google Chrome: MP4 y OGV

    Safari: MP4

    Internet Explorer 9: MP4

    Opera: OGV

    3.2 MANEJO DE AUDIO

    Crear un archivo audio.html


    El nuevo elemento permite el uso de diferentes formatos de archivo
    puesto que los formatos que soportan los diferentes navegadores no
    son parte del estándar, sino que depende de la implementación de cada
    fabricante. Puedes guiarte con esta tabla para comprobar que formatos
    soportan los navegadores más usados de forma nativa:

    Códec Tipo IE >=9 Firefox Chrome Safari Opera


    Ogg Vorbis Libre (BSD) no si si no si
    WAV PCM Privativo (Microsoft, IBM) no si si si si
    MP3 Privativo (En disputa) si no si si si en Linux y FreeBSD
    AAC Bajo patente AAC si no si si si en Linux y FreeBSD
    Speex Libre (BSD) no no si no no
    4 MANEJO CSS

    Con CSS podemos conseguir efectos sin utilizar plugins. Para este taller
    colocaremos los css dentro del archivo html.

    Instrucciones: Utilizando uno de los procesadores de texto, crear un


    archivo con extensión .html y digitar el contenido entre las etiquetas
    <html>

    4.1 BORDES

    Se puede hacer bordes redondeados.


    COMPATIBILIDAD CON OTROS MOTORES

    Para dar compatibilidad en otros motores, hay que agregar un


    modificador:

    Veamos cuales motores corresponden a cada navegador:

    o Google Chrome: WebKit


    o Safari: WebKit
    o Mozilla FireFox: Gecko
    o Internet Explorer: Trident
    o Opera: Presto

    Por eso se observa la línea:

    -moz-border-radius:10px; /* Compatibilidad con Firefox */

    4.2 MANEJO DE SOMBRAS (SHADOW)

    Permite manejar sombras.


    4.3 MANEJO DE FONDOS

    Nos permite colocar imágenes de fondo. Permite redimensionar el tamaño


    de las imágenes del fondo
    Realice background-repeat:repeat-y;

    background-repeat:repeat-x;

    background-repeat:no-repeat;
    5 EFECTOS DE TEXTO

    Algunas opciones para el texto

    5.1 SOMBRAS

    Se puede realizar efectos de sombras para los textos.

    5.2 CONFIGURACIÓN DE FUENTES PERSONALIZADAS

    Permite utilizar diferentes tipos de fuentes. La fuente hay que descargarla


    y colocar en la carpeta donde se cree el archivo. Ejemplo
    https://www.dafont.com/es/
    6 MANEJO DE FORMULARIOS

    Html5 Tiene opciones para los formularios.

    6.1 CAMPOS OBLIGATORIOS

    Existe una propiedad requiered y se utiliza con un style para indicar


    propiedades como color diferente.

    6.2 CAMPOS INVALIDOS

    Html5 nos permite validar los campos

    Ejemplo validar que el correo tiene un formato específico. Ejemplo:


    6.3 MANEJO DE FECHAS

    Html5 permite trabajar fecha y coloca un calendario, que le permite


    cambiar a un año, mes o día diferente y volver siempre al día actual.
    6.4 SLIDERS, COLOR Y NUMERICO

    Se puede utilizar para manejar valores entre rangos.

    Para manejar colores, tener en cuenta la siguiente página para obtener el


    código hexadecimal

    http://html-color-codes.info/codigos-de-colores-hexadecimales/
    7 WEBGRAFIA

    Documentación html5

    http://www.w3.org/TR/html5/

    http://www.blogdellamas.vacau.com/curso_html5/indice_html5.html

    http://slides.html5rocks.com/#landing-slide

    http://www.w3c.es/

    PLANTILLAS CCS

    http://www.csszengarden.com/

    http://www.freecsstemplates.org/

    DISEÑO DE PATRONES

    http://www.patterncooler.com/

    GENERADOR DE DEGRADADOS

    http://www.colorzilla.com/gradient-editor/

    CONVERTIR VIDEO A OTROS FORMATOS

    http://www.freemake.com/es/

    http://www.mirovideoconverter.com/

    http://mediaconverter.org/

    http://www.imtoo.com/video-
    converter.html?utm_source=mediaconverter2&utm_medium=banner&ut
    m_campaign=mediaconverter2468x60

    EDITOR GRAFICO VECTORIAL

    http://inkscape.org/?lang=es

    http://www.gimp.org.es/
    COLECCIONES DE ICONOS

    http://freeiconsweb.com/index.html

    COLECCIÓN DE FUENTES Y OTROS

    http://www.muchografico.net/

    VISUALIZADOR DE FUENTES

    http://www.muchografico.net/fontexpert-2007/#more-879

    AÑADIR BUSCADOR DE GOOGLE A TU SITIO

    http://www.google.es/cse/

    SITIO WEB

    http://demo.openerp.com/web/webclient/home

    ANALIZADOR DE COMPORTAMIENTOS DEL USUARIO

    http://www.google.com/intl/es/analytics/

    HERRAMIENTA PARA CONOCER DE UN DOMINIO

    http://www.domaintools.com/

    http://www.dmoz.org/

    http://www.seochat.com/seo-tools/keyword-density/

    VALIDADOR DE NUESTRO SITIO WEB

    http://validator.w3.org/

    http://jigsaw.w3.org/css-validator/

    INDEXAR NUESTRO SITIO EN GOOGLE

    https://accounts.google.com/ServiceLogin?service=sitemaps&passive=1
    209600&continue=https://www.google.com/webmasters/tools/submit-
    url?hl%3Des%26continue%3D/addurl&followup=https://www.google.co
    m/webmasters/tools/submit-
    url?hl%3Des%26continue%3D/addurl&hl=es&authuser=0
    SONIDOS GRATIS MP3

    http://sonidosmp3gratis.com

    MANEJO DE CANVAS

    http://www.youtube.com/watch?v=czc1XdKh_FY&feature=relmfu

    http://html5facil.com/tutoriales/manejo-profesional-de-canvas-2-
    manipulacion-de-imagenes

    PORTAL DE IMÁGENES VECTORIALES

    http://www.freevectors.net/

    http://bestdesignoptions.com/?p=4458

    Vous aimerez peut-être aussi