Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017 ·
  • Inicio

Fundamentos de programación: JavaScript

js logoPor sí mismo, HTML no tiene ninguna habilidad: no puede realizar operaciones matemáticas, no puede ver si alguien ha rellenado bien un formulario y no puede tomar decisiones acerca de cómo interactúa con el un visitante de la web.
Básicamente, HTML permite a la gente leer textos, mirar fotos y hacer clic en enlaces para moverse a otras páginas web con más textos y más fotos. Para añadir inteligencia a las páginas web de modo que puedan responder a los visitantes, se necesita javascript.

JavaScript es el lenguaje de programación que puedes usar para añadir interactividad a un Sitio Web, por ejemplo juegos, eventos que ocurren cuando los botones son presionados o ingresamos datos en los formularios, efectos de estilo dinámicos, animación, y mucho más.

Presentación de introducción a JavaScript.

Para aprender más sobre este lenguaje realizar distintos ejercicios utilizaremos esta Web:

3con14 code

Imprimir

Layout "base" responsive

Cuando construimos un sitio web desde cero necesitamos crear una estructura de contenedores donde ubicar los textos, las imágenes y, en general, todos los objetos que necesitemos. Unas veces queremos dos columnas, otras tres de igual ancho o distinto, otras cuatro y, en raras ocasiones, cinco. Crear esto cada vez que creamos una página es tedioso y por eso os dejo un archivo CSS que he llamado base314.css con algunas reglas CSS "básicas" que  os sevirán para crear la mayoría de los diseños (=layouts) que se os puedan ocurrir. Añadiendo este archivo CSS a nuestro sitio, y "entendiendo" su funcionamiento, nos ahorraremos mucho tiempo y esfuerzo.

Observaciones:

  • He añadido algunas reglas CSS para que el tamaño del texto se adapte a distintos dispositivos.
  • La última sección CSS que he llamado "marcas..." solo es necesaria en tiempo de diseño para saber donde estoy colocando las distintas filas y sus respectivos items hijos (la podemos borrar cuando ya tengamos construido nuesto sitio).
  • Es evidente  que he dejado los colores de fondo de los item-flo y de los item-flex para que se comprenda mejor donde están y que márgenes tienen. Las líneas CSS de estos fondos las debes eliminar cuando lo utilices en tus diseños.
  • He añadido algunas reglas CSS3 avanzadas para no tener que marcar el primier ítem de cada fila con "ini" (inicio) ni el último ítem con "fin".
  • Es conveniente cargar el archivo CSS normalize.css para que todos los navegadores tengan la misma configuración en todos los elementos HTML que utilicemos.
  • También es útil hacer primero un pequeño dibujo en papel (o con alguna herramienta web como NinjaMock) de la distribución y aspecto que queremos que tengan nuestras páginas web.
  • En el apartado [Demo base314.css] tenéis el archivo y un ejemplo de su utilización.

layout

código

Página Web


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="(cc) 3con14" />
    <title>Demo Layout</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>

  <!-- Ejemplo: fila flotante con 4 hijos de igual ancho -->
  <div class="fila-flo">
    <div class="item-flo-1_4"></div>
    <div class="item-flo-1_4"></div>
    <div class="item-flo-1_4"></div>
    <div class="item-flo-1_4"></div>
  </div>
  <!-- Ejemplo: fila flexBox con 3 hijos de igual ancho -->
  <div class="fila-flex">
    <div class="item-flex"></div>
    <div class="item-flex"></div>
    <div class="item-flex"></div>
  </div>

</body>
</html>

Reglas CSS para Layout-Base


/**
 * /////////////////////////////////////////////////
 *    Hoja de estilos general para Layout básicos
 *    (cc) 3con14, FEB-2017
 *    archivo de estilos: base314.css
 * /////////////////////////////////////////////////
 */

/**
 * Es conveniente cargar el archivo reset: normalize
 * de https://necolas.github.io/normalize.css
 * (enlazar normalize.css antes de base314.css en HTML)
 */

/** VARIABLES GLOBALES ------------------------- */
:root {
  --texto-mobile  : 90%;
  --texto-desktop : 110%;
  --anchoWeb      : 800px;
  --espacio       : 2%;
}
/** RESET BÁSICO -------------------------------- */
* { 
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
  transition : all 0.1s ease-in;
}
*::before, *::after { box-sizing: border-box; }
a:active, a:hover, *:focus { outline: 0; }

body {
  max-width        : 100vw;
  min-height       : 100vh;
  background-color : #FDF5E6;
}

/** TAMAÑO DE FUENTE POR DEFECTO ---------------- */
html { font-size : 16px; }

/** TAMAÑO DE FUENTE MOBILE POR DEFECTO --------- */
body { font-size : var(--texto-mobile); }

/** TAMAÑO EN % PARA DISEÑO RESPONSIVE ---------- */
h1   { font-size: 200%; }
h2   { font-size: 180%; }
h3   { font-size: 150%; }
h4   { font-size: 130%; }
h5   { font-size: 110%; }
h6   { font-size:  90%; }

/** ELEMENTOS COMUNES ---------------------- */
p, ul, ol, blockquote, pre { margin: 0 0 25px 0; }
* + p,* + ul,* + ol,* + blockquote,* + pre { margin-top: 25px; }

h1, h2, h3, h4, h5, h6 {
  margin         : 0 0 25px 0;
  font-family    : sans-serif;
  font-weight    : normal;
  color          : #333333;
  text-transform : none;
}
* + h1,* + h2,* + h3,* + h4,* + h5,* + h6 { margin-top: 20px; }
ul, ol { padding-left: 30px; }

hr {
  width         : var(--anchoWeb);
  margin        : 2em auto;
  border-top    : 1px dotted #8c8b8b;
  border-bottom : 1px dotted #fff;
}
 /** ==============================================   
 *  DISEÑO RESPONSIVE MOBILE  /////////////////////
 ================================================== */
      
  /* ANCHOS Y ALTOS POR DEFECTO ///////////////// */
.ancho-full,.ancho-fix {
  max-width : 100vw;
  margin    : 0 auto;
}
.ancho-fix { width: 96%; }

/* CAJAS FLOTANTES (CON FLOATS) ///////////////// */
  /** contenedor flotante */
.fila-flo { 
  overflow : hidden;
  height   : 1%;
  margin   : var(--espacio) auto;
}
  /** hijos del contenedor flotante */
div[class*="item-flo"] { 
  float            : none;
  margin-top       : calc(var(--espacio) / 2);
  margin-bottom    : calc(var(--espacio) / 2);  
  background-color : rgba(0,0,0,0.1);
}

/* CAJAS FEXIBLES (CON FLEX) ///////////////// */
  /** contenedor flexBox */
.fila-flex {
  display        : flex;
  flex-direction : column;
  margin         : var(--espacio) auto;
}
  /** hijos del contenedor flex-box */
.item-flex {
  margin-top       : calc(var(--espacio) / 2);
  margin-bottom    : calc(var(--espacio) / 2);
  background-color : rgba(255,0,0,0.1);
}
  /** Separa los item-flex de texto */
.item-flex { margin-right : var(--espacio); }

  /** Quita margen del último item-flex de texto */
div.fila-flex > div[class*="item-flex"]:last-child {
  margin-right: 0;
}

/** =========================================================   
 *  /// CAMBIOS EN DISEÑO RESPONSIVE DESKTOP  ///////////////
 *  ========================================================= */

@media all and (min-width: 768px) {
  
    /** TAMAÑO DE FUENTE DESKTOP POR DEFECTO --------- */
    body { font-size : var(--texto-desktop); }

    .ancho-fix {
      max-width    : var(--anchoWeb);
      margin-left  : auto;
      margin-right : auto;
    }

    /* CAJAS FLOTANTES ////////////////////////////////////// */
    div[class*="item-flo"] {
      float        : left;
      margin-left  : calc(var(--espacio) / 2);
      margin-right : calc(var(--espacio) / 2);
    }
      /** Cambia margenes del primer item-flo */
    div.fila-flo > div[class*="item-flo"]:first-child {
      margin-left  : 0 !important;
      margin-right : var(--espacio) !important;
    }
      /** Cambia márgenes de último item-flo */
    div.fila-flo > div[class*="item-flo"]:last-child {
      margin-left : var(--espacio) !important;
      margin-right: 0 !important;
    }
      /** Diseño 1/5 (=20%) del 100% */
    .item-flo-1_5 { width: calc(100% * (1 / 5) - var(--espacio)); }
    .item-flo-2_5 { width: calc(100% * (2 / 5) - var(--espacio)); }
    .item-flo-3_5 { width: calc(100% * (3 / 5) - var(--espacio)); }
    .item-flo-4_5 { width: calc(100% * (4 / 5) - var(--espacio)); }

      /** Diseño 1/4 (=25%) y 1/2 (=50%) del 100% */
    .item-flo-1_4 { width: calc(100% * (1 / 4) - var(--espacio)); }
    .item-flo-2_4 { width: calc(100% * (1 / 2) - var(--espacio)); }
    .item-flo-3_4 { width: calc(100% * (3 / 4) - var(--espacio)); }

      /** Diseño 1/3 (=33.333%) del 100% */
    .item-flo-1_3 { width: calc(100% * (1 / 3) - var(--espacio)); }
    .item-flo-2_3 { width: calc(100% * (2 / 3) - var(--espacio)); }

    /* CAJAS FLEXIBLES ////////////////////////////////////// */
    .fila-flex {
      flex-direction  : row;
      justify-content : space-between;
    }
      /** Separa los item-flex de imágenes */
    .galeria { flex-wrap: wrap; justify-content: space-around; }
      /** Del % depende el número de imágenes por línea  */
    .galeria > .item-flex { 
      width       : 20%;
      margin      : 0.5em !important;
      line-height : 0;
    }

}  /* ######################################################## */


/** ==============================================   
 *    ELEMENTOS RESPONSIVE DESING  ///////////////
 *  ============================================== */
/**
 * IMÁGENES RESPONSIVE Y ADAPTABLES A SU CONTENEDOR
 */
img {
  max-width : 100%;
  height    : auto;
  border    : 0;
}

/**
 *  OBJETOS (obj) FULL-WIDTH (ANCHO 100% DEL NAVEGADOR) DESDE HTML
 *  1) Ejemplo con una imagen como banner
 *        <div class="full-box">
 *            <img src="/i2017bto2/img/wpp1_13.jpg" class="full-obj">
 *        </div>
 *  2) Ejemplo con un mapa de Google-Maps
 *        <div class="full-box">
 *          <iframe class="full-obj" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d68724.23825770643!2d-3.7231663634384162!3d40.426328001427194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1486287754960" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
 *        </div>
 */
.full-box {
  position       : relative;
  height         : 0;
  padding-bottom : 25%;     /* alto de objeto */
  overflow       : hidden;
  margin         : var(--espacio) auto;
}
.full-obj {
  width             : 100%;
  background-size   : cover;
  background-repeat : no-repeat;
}

/**
 * OBJETOS (media) RESPONSIVE: videos, mapas, páginas, onDrive, Drive,...
 * 1) Ejemplo con video de Youtube 16:9
 *      <div class="media-16_9">
 *          <iframe width="560" height="315" src="https://www.youtube.com/embed/v64KOxKVLVg" frameborder="0" allowfullscreen></iframe>
 *      </div>
 * 2) Ejemplo con video de Vimeo 16:9
 *      <div class="media-16_9">
 *          <iframe src="https://player.vimeo.com/video/36296951" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 *      </div>
 * 3) Ejemplo con mapa de Google-Maps 4:3
 *      <div class="media-16_9 media-4_3">
 *          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d68724.23825770643!2d-3.7231663634384162!3d40.426328001427194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1486287754960" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
 *      </div>
 * NOTA: Estos ejemplos se adaptarán al tamaño de su contenedor, por ejemplo:
 *        <div class="item-flo-2_4"> (aquí poner ejemplo) </div>
 *        <div class="fila-flo ancho-full"> (aquí poner ejemplo) </div>
 *        <div class="fila-flo ancho-fix"> (aquí poner ejemplo) </div>
 */
.media-16_9 {
  position  : relative;
  height    : 0;
  max-width : 100%;
  overflow  : hidden;
}
.media-16_9 { padding-bottom : 56.25%; }
/** si seguidamente añadimos esta sera 4:3; */
.media-4_3  { padding-bottom : 75%;    }

.media-16_9 iframe,
.media-16_9 object,
.media-16_9 embed,
.media-16_9 video {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}
audio, canvas, iframe, img, video { vertical-align: middle; }

/* MARCAS para ver cajas (solo en tiempo de diseño) /////////////
================================================================= */
.mk1 { box-shadow: 0 0 0 5px hsla(0, 100%, 50%, 0.4) inset; }
.mk2 { box-shadow: 0 0 0 4px hsla(120, 100%, 50%, 0.4) inset; }
.mk3 { box-shadow: 0 0 0 3px hsla(240, 100%, 50%, 0.4) inset; }
.mk4 { box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.4) inset; }
.mk5 { box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.4) inset; }

Demo: base314.css

En esta página puedes observar una estructura de ejemplo realizada con este CSS. Si abres el navegador con un ancho inferior a 768px, el diseño se adapta a este tipo de dispositivos. En el siguiente enlace puedes descargar el archivo "estilos_base.css".

Videotutorial de funcionamiento

 

Imprimir

Slider automático y responsive, solo con CSS

Un sencillo "Slider" automático y responsive utilizando sólo CSS y sin emplear javascript ni ningúnn otro framework. También he implementado un botón de pausa.

Vista SLIDER:

slider auto1

slider auto2

código

Elementos HTML


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="(cc) 3con14" content="Slider automático solo con CSS" />
    <title>Slider automático</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<div class="container">
  <h3>Slider automático solo con CSS</h3>
  <input type="checkbox" id="pausa">
  <div class="slider">
    <div class="show">
      <img src="/img2/wpp1_02.jpg" alt="">
      <img src="/img2/wpp1_03.jpg" alt="">
      <img src="/img2/wpp1_16.jpg" alt="">
      <img src="/img2/wpp1_05.jpg" alt="">
    </div>
  </div>
  <label for="pausa">Stop</label>
</div>
</body>
</html>

Reglas CSS


/**
 * Slider automático de 4 imágenes
 * Solo CSS, responsive
 * (cc) 3con14.pro
 */

:root {
  --base  : 480px;
  --ancho : calc(var(--base) * 1);
}
* {
  margin     : 0;padding: 0;
  box-sizing : border-box;
}
html {
  font-size  : 16px;
  color      : #fff;
  text-align : center;
  background : tan;
}
body {
  min-height : 100vh;
  display    : flex;
}
.container {
  max-width        : var(--ancho);
  width            : 96%;
  margin           : auto;
  background-color : rgba(0,0,0,0.1);
}
.slider {
  max-width : var(--ancho);
  height    : calc(var(--ancho) / (16 / 9) );
  outline   : 2px solid hsla(0, 100%, 100%, 1);
  position  : relative;
  margin    : auto;
  overflow  : hidden;
  background-color: #000;
}
.show {
  position    : absolute;
  top         : 0;
  left        : 0;
  line-height : 0;
  display     : table;
  width       : 100%;
  height      : 400%;
  animation   : ani 16s ease-out infinite alternate;
}
/*
 .show:hover {
  cursor               : pointer;
  animation-play-state : paused;
}  */
img {
  max-width : 100%; /* 24.84% en FF */
  height    : auto;
  opacity   : 1;
  /* display   : table-cell; */  /* para FF */
}

@keyframes ani {
  0%,20%   { top: 0; opacity: 1;}
  25%      { top: 0; }
  26%      { opacity: 0; }
  27%,47%  { top: -100%; opacity: 1;}
  52%      { top: -100%; }
  53%      { opacity: 0; }
  54%,74%  { top: -200%; opacity: 1;}
  79%      { top: -200%; }
  80%      { opacity: 0;}
  81%,100% { top: -300%; opacity: 1;}
}

h3 { margin: 0.2em 0; }
input[type="checkbox"] { display: none; }
label { 
  margin      : 1em;
  line-height : 2em;
  cursor      : pointer;
}
input[type="checkbox"]:checked ~ label { 
  color: red; font-weight: 900;
}
input[type="checkbox"] + div.slider > div.show { 
  animation-play-state: running;
}
input[type="checkbox"]:checked + div.slider > div.show { 
  animation-play-state: paused;
}

 

Imprimir

Más artículos...

En línea...

Hay 14 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png5.png5.png8.png5.png
Hoy ........27
Ayer .......16
Mes ........343

Domingo, 25 Junio 2017