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

 

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

 

Imprimir

Más artículos...

En línea...

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

Prácticas...

aulav

Visitas...

1.png8.png7.png5.png7.png
Hoy ........11
Ayer .......13
Mes ........442

Viernes, 19 Abril 2019