Taller de Programación Web
Sesión N° 07:
Cascading Style Sheets(CSS)
Introducción a JavaScript
Logro de aprendizaje
Al final de la sesión el estudiante aplica
reglas AT y principios básicos
de JS en la construcción de páginas
HTML con diseño responsivo.
Datos/Observaciones
Agenda
• Reglas AT
• Introducción al Javascript
3
Recordando
Formas de instanciar estilos
1
1. En línea
2 2. Embebido
3. Externo
Datos/Observaciones
Esquema de la regla CSS
Datos/Observaciones
Diseño web responsivo
• El diseño web receptivo hace que su página web se vea bien
en todos los dispositivos.
• El diseño web receptivo utiliza solo HTML y CSS.
Datos/Observaciones
Qué es una vista de cuadricula?
Una vista de cuadrícula receptiva a menudo tiene 12 columnas y tiene un ancho
total del 100%, y se encogerá y expandirá a medida que cambie el tamaño de la
ventana del navegador.
Datos/Observaciones
Diseño responsivo con CSS
<header class="fila">
<div class="col-10" style="background-color: #b4e3cc;">COL 10</div>
<div class="col-2" style="background-color: #ff5733;">COL 2</div>
</header>
<div class="fila">
<div class="col-4" style="background-color: #decd3e;">COL 4</div>
<div class="col-4" style="background-color: #a4e57c;">COL 4</div>
<div class="col-4" style="background-color: #dfc80c;">COL 4</div>
</div>
<footer class="fila">
<div class="col-12" style="background-color: #ffa200;">COL 12</div>
</footer>
Datos/Observaciones
Diseño responsivo con CSS
[Link]
Datos/Observaciones
Lenguajes Nativos
JavaScript ?
[Link]
Datos/Observaciones
¿Qué es JavaScript?
JavaScript es el lenguaje
de programación
encargado de dotar de
mayor interactividad y
dinamismo a las páginas
web.
Datos/Observaciones
Lenguaje JavaScript
Datos/Observaciones
En línea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de JavaScript</title>
</head>
Evento: Onclick
<body>
<p onclick="alert('Hola')">Click aqui</p>
</body>
Función alert: Muestra
</html>
una pantalla en tu
navegador
Datos/Observaciones
Embebido
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de JavaScript Embebido</title>
<script>
alert('Hola') Función: alert
</script>
</head>
<body>
<p>Haciendo uso de JavaScript</p> Se muestra el párrafo
<p>Es muy sencillo</p>
</body>
</html>
Datos/Observaciones
Archivo externo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de JavaScript Externo</title> Archivo javascript
</head>
<body>
<p>Haciendo uso de JavaScript</p>
<p>Es muy sencillo</p>
<script src="js/[Link]"> </script>
</body>
Código javascript al final
</html>
Datos/Observaciones
Variables
• Java Script es un lenguaje débilmente tipado
• No especifica el tipo de variables
• Se deduce por el contenido de la variable y el contexto
• Para declarar una variable se una la palabra reservada var seguida por una
lista de nombres de variables a declarar separadas por ,
• El nombre de una variable puede estar formado por letras, números y
los símbolos $(dolar) y _(guion bajo)
• El primer carácter no puede ser un numero
Datos/Observaciones
Variables
• /*Aprendiendo a declarar variables*/
var numero = 100; // variable numérica
var texto = "hola "; // variable String
var logico = false; // variable lógica
var objeto = {nombre: “José", peso: 23}; // variable tipo objeto
var arreglo = [“Pera",“Manzana",“Piña", “Coco"]; // variable tipo array
Datos/Observaciones
Expresiones
Datos/Observaciones
Expresiones
Datos/Observaciones
Control de Flujo
Datos/Observaciones
Preguntas
Datos/Observaciones
Resumiendo
1. ¿Por qué aplicar reglas AT?
_______________________________________________
2. ¿Qué significa los prefijos de clase s y m?
_______________________________________________
3. Forma de declarar una variable en JavaScript.?
_______________________________________________
_______________________________________________