Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS3. Mostrar todas las entradas

sábado, 11 de julio de 2015

HTML/CSS. Marcas Básicas



Publicado por en No hay comentarios:
Etiquetas: , , ,

sábado, 17 de enero de 2015

Actualización del curso Miriada X

Desde que publiqué el curso de Miriada X, que fue mi primer contacto con Firefox OS, han impartido otros tres cursos de formación del Módulo 1.
He vuelto a retomar el tema de Firefox OS y estoy repasando este módulo pero estudiando los vídeos de la última formación (Edición 4):

 Módulo 0: Introducción
Módulo 1: Introducción a Internet
Módulo 2: Estructura de navegación HML5 y CSS3
Módulo 3: Estructuración y depuración de HTML5 y CSS3 con Firefox en entornos multi-pantalla, móviles y tabletas
Módulo 4: Introducción a JavaScript
Publicado por en No hay comentarios:
Etiquetas: , , ,

lunes, 24 de febrero de 2014

Cap 11 Sitio Web en HTML5 Responsive Web Design Form y Mapa de Contacto

Sitio Web en HTML5 Responsive Web Design Form y Mapa de Contacto


En este tutorial veremos como crear formularios utilizando labels, input tipo texto e input tipo submit (botones), texarea. Con required hacemos que HTML5 comprueba si los datos introducidos en el formulario están completos.

En CSS3 agregamos estilos a input indicuando a que tipo afectará. Por ejemplo: input[type="email"]

También aplicamos estilos cuando una caja de texto tenga el foco. Por ejemplo: input[type="email"]:focus


Publicado por en No hay comentarios:
Etiquetas: , ,

sábado, 22 de febrero de 2014

Cap 10 Sitio Web en HTML5 Responsive Web Design y jQuery Fancybox

Sitio Web en HTML5 Responsive Web Design y jQuery Fancybox




Recursos:
Después de <head>, lo primero que hay que añadir es la etiqueta <meta charset="UTF-8"> para que no tengamos problemas con los acentos.


Publicado por en No hay comentarios:
Etiquetas: , , , ,

domingo, 9 de febrero de 2014

Curso Práctico de HTML5 - Cap 09 Sitio Web en HTML5 Responsive Web Design Servicios y Audio

Sitio Web en HTML5 Responsive Web Design Servicios y Audio


Recursos:
Para navegadores antiguos, es necesario incluir http en src. Se incluye en <head>:
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

Para incluir audio:
                <audio id="audios-servicios" controls>
                    <source src="audio/Mixfuckedup-PeliculaLenta.mp3" type="audio/mpeg"></source>
                    <source src="audio/Mixfuckedup-PeliculaLenta.ogg" type="audio/ogg"></source>  

                </audio>

Para incluir un vídeo de youtube: Compartir - Insertar.

 Para hacer desaparecer una imagen:
        display: none;

Publicado por en No hay comentarios:
Etiquetas: , ,

sábado, 8 de febrero de 2014

Curso Práctico de HTML5 - Cap 08 Sitio Web en HTML5 Responsive Web Design en Acerca y Video

Sitio Web en HTML5 Responsive Web Design en Acerca y Video


Recurso:

Por si no encontramos la librería jquery en los servidores de google, se puede guardar en local y, con el siguiente script, se carga la librería local
<script>
    !window.jQuery && document.write("<script src='js/jqyery.min.js'></script>");
</script>

Añadir una imagen:
            <figure id="img-acerca">
                <img src="img/acerca.png" alt="acerca">
Añadir una descripción de la imagen al pie de la misma:
                <figcaption>He visto el fututo... está en el navegador</figcaption>
            </figure>
Añadir un vídeo:
            <video id="video-acerca" controls preload>
                <source src="vdo/video-prueba.mp4" type="video/mp4"></source>
                <source src="vdo/video-prueba.webm" type="video/webm"></source>
                <source src="vdo/video-prueba.ogv" type="video/ogg"></source>
            </video>

Publicado por en No hay comentarios:
Etiquetas: , ,

domingo, 2 de febrero de 2014

Curso Práctico de HTML5 - Cap 05 Sitio Web en HTML5 Responsive Web Design del Home

Sitio Web en HTML5 Responsive Web Design del Home


Recursos del videotutorial:
http://bextlan.com/recursos/tutoriales/html5/video05-html5.zip

 index.html
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Sitio con Responsive Web Desing en HTML5, CSS3 y jQuery</title>
    <meta name="description" content="Bienvenido a mi portafolio web hecho en HTML5, CSS3 y jQuery con Responsive Web Design">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="author" type="text/plain" href="humans.txt" />
    <link rel="stylesheet" href="css/estilos.css">
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <h1>
            <a href="index.html">
                <img class = "fade" src="img/bextlan-logo.png" alt="bextlan.com | Lugar de bits, vectores y pixeles">
            </a>
        </h1>
        <nav>
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li><a href="acerca.html">Acerca de</a></li>
                <li><a href="servicos.html">Servicios</a></li>
                <li><a href="trabajos.html">Trabajos</a></li>
                <li><a href="contacto.html">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <section id="contenido">
        <section id="principal">
            <article id="galeria-inicio">
                Aquí habrá una galería con jQuery
            </article>
        </section>
        <aside>
            Widgets Sociales
        </aside>
    </section>
    <footer>
        Aprendindo HTML5, CSS3, jQuery y Responsive Web Desing con <a rel ="author" href="http://twitter.com/@bextlan">@bextaln</a>
    </footer>
</body>
</html>

 estilos.css
Reseteo Univerdal con la ayuda del *: Modelo de caja
*{
    border: 0;
    margin: 0;
    padding: 0;
}
Estructuras que trabajamos con etiquetas semánticas:

article,figcaption,figure,footer,header,hgroup,nav,section {
    display:block;
}

 Hoja de Estilos en Cascada

 /* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 2, 2014 */

 @font-face {
    font-family: 'Chalet';
    src: url('../fonts/Chalet.eot');
    src: url('../fonts/Chalet.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Chalet.woff') format('woff'),
         url('../fonts/Chalet.ttf') format('truetype'),
         url('../fonts/Chalet.svg#Chalet') format('svg');
    font-weight: normal;
    font-style: normal;
}

 @font-face {
    font-family: 'Pecita';
    src: url('../fonts/Pecita.eot');
    src: url('../fonts/Pecita.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Pecita.woff') format('woff'),
         url('../fonts/Pecita.ttf') format('truetype'),
         url('../fonts/Pecita.svg#Phalet') format('svg');
    font-weight: normal;
    font-style: normal;
}

 body {
    background: #212121 url(../img/fondo.jpg);
    color: #FFF;
    font-family: "Chalet",Helvetica,Verdana;
    font-size: 1em;
}

 a {
    color: #57ABB8;
    font-weight: bold;
Para quitarle la underline a los enlaces:
    text-decoration: none;
}
hover: cuando se pasa el ratón por encima
a:hover {
    color:#F60;
}

La etiqueta <figcaption> es únicamente para enmarcar un titular dentro de la etiqueta <figure>. Mas info: wsnetcorp
figcaption {
    font-size: 0.85em;
    padding: 0.25em;
    text-align: center;
}

Para que se ajusten las imágenes y el vídeo al tamaño de la pantalla (objetos flexibles):
img,video {
    max-width: 100%
}

 header,section#contenido,footer {
    background: #FFF url(../img/fondo-interno.jpg);
    margin: 0 auto;
    max-width: 90%;
    text-align:center;
}

 header h1, nav {
    display:inline-block;
    max-width: 100%;
    vertical-align:middle;
}

Para quitar el punto de la lista (viñetas):
nav ul {
    list-style: none;
}

 nav li {
    display:inline-block;
    padding: 0.1em;
    vertical-align:top;
}

 nav a {
    background: #FFF;
    border: 0.1em solid #57ABB8;
    border-radius: 0.25em;
    color: #F60;
    display:block;
    font-family:"Pecita", Helvetica, Verdana;
    font-size: 1.4em;
    padding: 0.2em;
Transiciones: para que los cambios se produzcan con cierta transición. in es al principio del efecto. (ms: microsoft explorer, mos: mozilla firefox, o: opera, webkit: safari y chrome)
    -ms-transition: all 0.5s ease-in;
    -mos-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

Estilo de una línea discontinua: dashed. Transición out: al final del efecto.
nav a:hover {
    background: #212121;
    border: 0.1em dashed #F60;
    border-radius: 0 0.5em 0 0.5em;
    color: #FFF;
    -ms-transition: all 0.5s ease-out;
    -mos-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

 section#principal,aside {
    background: #1E6381;
    border-radius: 0.5em;
    display:inline-block;
    margin: 0 auto;
    max-width: 100%;
    padding: 0.25em;
    vertical-align: top;
    width: 65%;
}

 article#galeria-inicio {
    border-radius: 0.5em;
    margin: 0.5em;
    padding: 0.5em;
    text-align: left;
    width: 95%;
}

 aside {
    width: 30%
}

 aside img {
    border-radius: 0.5em;
}

 footer {
    color: #000;
    font-size: 0.85em;
    padding: 0,75em 0;
}

Opacity: equivale al canal alpha (transparencia). Para que el explorer funcione correctamente se utiliza filter:
.fade {
    opacity: 1;
    filter: alpha(opacity=10);
    -ms-transition: all 0.5s ease-in;
    -mos-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;    
}

 .fade:hover {
    opacity: 0.7;
    filter: alpha(opacity=7);
    -ms-transition: all 0.5s ease-out;
    -mos-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
Trabajando con MediaQuery: cuando se cumple la condición se modifican los estilos.

Cuando el ancho del navegador es superior a un número determinado de pixeles:
@media(min-width:1081px) {
    header h1{
        text-align: left;
        width: 35%;
    }
    nav {
        text-align: right;
        width: 60%;
    }
}
Cuando el ancho del navegador es iferior a un número determinado de pixeles:
@media(max-width: 1080px) {
    nav li {
        font-size: 1.3em;
    }
    article#galeria-inicio {
        width: 90%;
    }
    aside {
        width: 20%
    }
}

 @media(max-width: 800px) {
    nav li {
        font-size: 0.95em;
    }
    article#galeria-inicio {
        width: 88%;
    }
}
@media(max-width: 600px) {
    nav li {
        display:inline-block;
        margin: 0px;
        width: 98%
    }
    
    section#principal {
        margin-bottom: 0.2em;        
    }
    
    section#principal,aside {
        display:block;
        width: 95%
    }

}
Publicado por en No hay comentarios:
Etiquetas: , ,

sábado, 1 de febrero de 2014

Curso Práctico de HTML5 - Cap 03 Responsive Design con HTML5 y CSS3

Responsive Design con HTML5 y CSS3


Responsive Design (Diseño Sensible): Adaptación de la página Web a las características de la pantalla donde se está visualizando.


index.html
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Estructura Básica en HTML5 y CSS3 con responsive design">
Hoja de Estilo externa:
    <link rel="stylesheet" href="css/estilo.css">
    <title>Estructura Básica Semántica en HTML5 y CSS3</title>
</head>
<body>
    <h1>Estructura Semántica HTML5</h1>
Carácter especial: &lt;
    <header>&lt;header&gt;</header>
    <nav>&lt;nav&gt;</nav>
    <section id="contenedor">
        <section id="principal">
            &lt;section&gt;
            <article>&lt;article&gt;</article>
        </section>
        <aside>&lt;aside&gt;</aside>
    </section>
    <footer>&lt;footer&gt;</footer>
</body>
</html>

estilos.css
Para asignar el estilo a todos los lementos se utiliza *
*{
    margin:0;
    padding:0;
}

Agregar una tipografía externa que no sea segura (true-font) con la ayuda de fontsquirrel:
@font-face {
    font-family: 'chaletmedium';
    src: url('../fonts/chalet-webfont.eot');
    src: url('../fonts/chalet-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/chalet-webfont.woff') format('woff'),
         url('../fonts/chalet-webfont.ttf') format('truetype'),
         url('../fonts/chalet-webfont.svg#chaletmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    background: #212121 url(../img/fondo.jpg);
    color: #FFF;
    font-family: "chaletmedium",Helvetica,Verdana;
Equivalencia de los tamaños por defecto: 16px = 12pt = 100% = 1em
1em (unidades relativas) equivale al ancho de la letra M
    font-size: 2em;
}

h1 {
    color: #F60;
Trabajar margen en parejas: arriba-abajo, derecha-izquierda (auto: para permitir centrar) El margen es el espacio que hay entre el borde de la página y los elementos o entre los elementos.
    margin: 0.25em auto;
Alineación del texto:
    text-align:center;
Sombra: distancia con respecto al texto en el eje x, con respecto al eje y, blur (desenfoque), transparencia en formato rgb
    text-shadow: 5px 5px 10px rgba(255,255,255,0.5);
}

header,nav,footer {
    background: #1E6381;
Bordes curvos:
    border-radius: 0.5em;
    margin: 0.5em auto;
Para trabajar con diseño que se ajuste al tamaño de la pantalla del dispositivo, se utiliza max.width, min-width, max-height, min-height.
    max-width: 960px;
    padding: 0.25em;
    text-align:center;
}

section#contenedor {
    margin: 0.5em auto;
    max-width: 960px;
    padding:0;
    text-align:center;
}
#principal {
    background: #1E6381;
    border-radius: 0.5em;
Con display indicamos como se va a mostrar la disposición de los elementos (en linea o en bloque). inline-block: primero se muestra en linea y lo que hay después se comportara como un bloque (un bloque ocupa todo el ancho de la pantalla).
    display:inline-block;    
    margin: 0.25em auto;
    max-width: 960px;
    min-height: 200px;
    padding:0.25em;
Alineación vertical:
    vertical-align: top;
    width: 65%
}

article {
    background:#011E30;
    border-radius: 0.5em;
    min-height: 140px;
    padding: 0.25em;
}

aside {
    background: #1E6381;
    border-radius: 0.5em;
    display:inline-block;    
    margin: 0.25em auto;
    max-width: 960px;
    min-height: 200px;
    padding:0.25em;
    vertical-align: top;
    width: 30%
}

Publicado por en No hay comentarios:
Etiquetas: , ,

sábado, 25 de enero de 2014

Curso Práctico de HTML5 - Cap 02 Buenas Prácticas con CSS

Buenas Prácticas con CSS


Las hojas de estilo separan el contenido de su presentación, es decir, del formato de salida (color, tamaño de letra, etc...)

Para escribir un comentario en html se utiliza <!-- comentario --> En CSS se utiliza /* comentario */. 

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Descripción del sitio">
        <title>Mi primera página</title>
Para añadir una hoja de estilo externa se utiliza link. Con rel indica que tipo de enlace vamos a agregar. Para las hojas de estilo se utiliza stylesheet. El tipo de contenido se indica como type="text/css". Para indicar para qué dispositivos van estos estilos se utiliza media. Si el valor es all indicamos que para todos (móvil, imprimir, pantalla,...). Se puede omitir porque el valor por defecto es all. El atributo href nos indica dónde se encuentra nuestro archivo.
        <link rel="stylesheet" type="text/css"  media="all" href="css/estilos.css">
    </head>
    <body>
      ...
    </body>
</html>

 Reglas para trabajar con CSS
  1. Se definen los estilos para las etiquetas HTML. Por ejemplo, header, footer, div, a, p, etc...
  2. Después de definen los estilos para identificadores (id). Los id son elementos únicos en el HTML. En el CSS se declaran con el símbolo de #. Ejemplo: #nombre-id {estiolos}. En el HTML se llaman mediante el atributo id. Ejemplo: <div id="nombre-id"></div>
  3. Al final se definen los estilos para las clases (class). Las clases son elementos que se pueden repetir n veces en el html. En el CSS se declaran con el símbolo de . Ejemplo: .nombre-clase { estilos }. En HTML se llaman con el atributo class. Ejmplo: <div class="nombre-clase"></div>.
  4. Todos los estilos se ordenan conforme van apareciendo en la disposición del HTML, teniendo en cuenta la prioridad anterior, es decir, primero etiquetas HTML, luego id y por último class.
  5. Los atributos se declaran de la siguiente forma: {atributo1: valor1 ; atributo2: valor2 ; ...atributoN: valorN }
  6. Todos los atributos se ordenan alfabeticamente. Por ejemplo, si tengo width, color y display, entonces el orden sería: color, display y width.
  7. Si tenemos estilos para el comodín *, las etiquetas <html> y/o <body>, estos estilos son los primero en definirse.
  8. En el body debemos declarar un tamaño de fuente global.
  9. Si tenemos estilos para resetear elementos HTML, estos irán antes de cualquier estilo.
* { 
    margin: 0;
    padding: 0;
}

 body {
Para indicar que suba un nivel en las carpetas, se utiliza ../
    background: #212121 url(../img/fondo.jpg);
    color: #FFF;
    font-size: 16px;
}

 Recursos:
Publicado por en No hay comentarios:
Etiquetas: , ,

martes, 7 de enero de 2014

Uso API Database

Uso API Database


Recursos:
Ejemplo de creación de notas post-it. Necesitaremos utilizar HTML5 Application Cache, HTML5 Database API, efectos CSS (CSS Animation y CSS Transform) y JavaScript (utilizando los métodos Getters y Setters). Utilizaremos WEBKit que es el motor de renderizado de páginas web creado por Apple.

Application Cache nos permite que una aplicación WEB pueda funcionar incluso estando off-line. Utilizamos manifest para indicarle al navegador donde encontrar los recursos necesarios.

API Database crea una base de datos en nuestro Disco duro utilizando una variante de SQL.

Para que una aplicación funcione offline usaremos la API Applicaton Cache de HTML5. Crearemos un archivo de extensión .manifest donde listaremos todos los archivos que necesitamos mientras estamos off-line. Debe empezar por CACHE MANIFEST. Los comentarios empiezan por #. A continuación debemos indicar todos los archivos que queremos usar en offline (path). Estos recursos deben estar en el mismo dominio de la página.

Para añadir este archivo en la página html utilizamos:
  • <html manifest="nombre_archivo.manifest">
HTML5 Database Storage
Abrir una base de datos
Método openDataBase(Nombre_BD,Numero_DB,Nombre_BD,Tamaño_Bytes).

Las Bases de datos funcionan de forma asíncrona. Se utiliza Callbacks y Transactions.
Publicado por en No hay comentarios:
Etiquetas: , , , ,

El juego del ahorcado

El juego del ahorcado


Este videotutorial tratará los siguientes temas:
  • Estilos CSS
  • Generar Marcadores para botones alfabéticos
  • Usar un Array para secuencia de dibujos
  • Usar un string para la palabra secreta
  • Usar archivo externo javascript para lista de palabras
  • Configurar y eliminar administradores de eventos
Para acceder a un archivo externo javascript se utiliza el método defer:
  • <script src="documento.js" defer></script>
Publicado por en No hay comentarios:
Etiquetas: , , ,

viernes, 22 de noviembre de 2013

Tema 3.3: Estructura con CSS

Estructura con CSS



Los <div> son elementos de bloque que se emplean para ser formateados mediante CSS. Se nombran mediante un identificador ID o una clase class para manipular su aspecto.
  • ID: Cada elemento puede tener un solo ID. Cada página puede tener un solo elemento con la ID
  • CLASS: Puede utilizar la misma clase en varios elementos. Puede utilizar varias clases en el mismo elemento

Un div puede tener tanto un ID como CLASS. Puede tener instrucciones de formato (fuente, color,...) atributos de altura y anchura, posicionamiento...

Tamaño: width (en pixels o porcentaje) *Hay que evitar definir altos si no son necesarios.

Nota: El contenido está por encima de los estilos. Si una imagen es de 500px y lo queremos ioncluir en un div de 400px, la imagen se desbordará.

Cada div es un bloque por lo que inicialmente cada div irá uno debajo de otro mida lo que mida. Tendríamos que modificar los aspectos de posición para modificar este comportamiento.

Padding, margin y border

Los márgenes de dos div consecutivos no se suman (se conserva el margen mayor).

El tamaño total del div se calcula sumando el ancho del div, el ancho del margen, el ancho del borde y el ancho del padding

Background (fondo)
Podemos añadir tantos fondos (imágenes o colores) como queramos a una página.
  • Imagen: url(fondos/f1.png)
  • Color:: background-color: #a4d3ff

Podemos elegir en los div sombras y bordes sombreados

Posicionamiento de la caja
CSS3 permite posicionar los div en la página utilizando float y clear. Con float, el div "flota" a una posición relativa. Con clear hacemos que el contenido se muestra debajo.
  • float puede tener los valores left,
  • clear puede tener el valor both

Para una posición absoluta (el div sale del flujo del contenido) utilizamos position: absolute. En ese caso debemos definir la posición con left y top en pixels. Tambiñén debemos tener en cuenta el eje z para saber si la caja está por encima o por debajo de las demás

Para definir una posición fija (no cambia de posición en el escalado del navegador o el scroll en la página) utilizamos position: fixed y le indicamos su posición. Por ejemplo, si queremos que está en el borde inferior, pegado a la izquierda y que ocupe todo el ancho de la página lo indcamos con bottom: 0px; left: 0px; width: 100% 

Recursos:

Publicado por en No hay comentarios:
Etiquetas: ,
Suscribirse a: Entradas (Atom)