Cómo surgió la Web: La historia del nacimiento de Internet y el proyecto de Tim Berners-Lee

Módulo
Taller de Aplicaciones para Internet

1.- Tecnologías y Desarrollo Web
Docente: Michell Jáuregui Valdés
Ingeniería de Ejecución en Informática Mención Desarrollo de Sistemas - Módulo: Taller de Aplicaciones para Internet - Aiep Rancagua
Introducción
Hablar de la evolución de los computadores es un tema realmente

extenso, no obstante no podemos hablar de las tecnologías
asociadas a la computación sin hablar de estos queridos tarros.
Se dice que el primer computador portátil de la historia fue creado

por IBM en 1975, un año después Stephen Wozniak y Steve Jobs
crearon su primer computador personal en el garaje de su casa,
aunque Wozniak insiste en que esto último es un invento
publicitario, pero afirma que su creación es el auténtico primer
computador personal de la historia.
En ese momento nació una ventana dimensional que nos transportó

en pocos años a una era de tecnología digital y al mundo que
conocemos hoy en día. Muchos de los jóvenes amantes de la
tecnología no conocieron el mundo sin computadores, ni hicieron
tareas sin ocupar internet ni una impresora, extrañamente la
tecnología aporta un nuevo e inquietante paradigma, “en el
inmenso mar de información ya no sabes qué buscar”...
1989, existían algunas técnicas
para enviar mensajes entre
computadores, todas carentes
de ser un estándar oficial y cada
uno trabajando como islas
alejadas. Tim Berners-Lee
presentó en una conferencia de
prensa su trabajo (desde 1980, El creó el lenguaje HTML y el proyecto World Wide Web
Enquire) que permitía el acceso a (Telaraña Mundial), junto a un sistema que permitía la
ficheros en línea que funcionaba lectura de la información mediante un programa de
mediante la conección de navegación (browser), bautizado como “WorldWideWeb”
computadoras basadas en el y luego “Nexus”... luego la avalancha de nombres,
protocolo TCP/IP, creando una cambios modificaciones, standarización de tecnologías
red de computadoras, con esto etc.
en fase experimental científicos
de universidades americanas Pero el génesis del WWW nació de la necesidad de
lograban intercambiar resolver un gran problema originado en el CERN y el
información. Monumental Proyecto del Colisionador de Hadrones en
Europa.
Gran Colisionador de Hadrones
La necesidad de crear algo que solucione un problema
Centro Europeo de Investigaciones Nucleares (CERN)
Gran Colisionador de Hadrones

Dentro del colisionador dos haces de
protones son acelerados en sentidos Experimento ATLAS se espera que investigue los nuevos
opuestos hasta alcanzar el 99,99 % de la tipos de partículas que puedan ser detectados en las
velocidad de la luz, y se los hace chocar colisiones de alta energía del LHC. Algunas de ellas
entre sí produciendo altísimas energías supondrán la confirmación o no del Modelo Estándar,
mientras que otras pueden dar lugar a nuevas teorías.
(aunque a escalas subatómicas) que
permitirían simular algunos eventos
ocurridos inmediatamente después del
big bang.
Requerimientos:
● Guardar millones de datos.

● Compartirlos.
Las colisiones crean miles de millones de ● Estudiarlos.
datos, fotos, gráficas etc. etc.
Esto se debe estudiar y validar por un ● Tener todos los avances
ejército de personas, distribuidas alrededor actualizados.
del planeta, es un experimento de la
humanidad y es vital el trabajo en conjunto ● Científicos participantes
de muchos países, organizaciones, ubicados en todo el planeta.
universidades etc.
● Intercambio de ideas etc.
https://actualidad.rt.com/ciencias/184753-impactantes-datos-gran-colisionador-hadr
ones
“Charla explicativa”
Tecnologías y tendencias para el desarrollo Web
“Charla explicativa”
Tecnologías y tendencias para el desarrollo Web
Te presento a:
HTML
En un block de notas escribir el siguiente
código:
<html>
<head>
<title>Hola Aiep</title>
</head>
<body>
Hola Aiep Rancagua, esta es mi
Primera Web!!
</body>
</html>
Guardarlo con el siguiente nombre y

extensión: hola.html
Luego hacerle doble click y se abrirá en
el browser, nuestra primera página web.
HTML
JAVASCRIPT
CSS
HTML5 JAVASCRIPT CSS
Sintaxis básica de html
Ejemplos de Sintaxis html Básico
Estructura Base de Html
<html>
<head>
</head>
<body>
Hola Aiep Rancagua, esta es mi
Primera Web!!
</body>
</html>
Etiquetas básicas y atributos de formateo de texto
Forma Tamaño Extras
<b>negrita</b> H <sub>2</sub>O
negrita <small>pequeño</small>
pequeño
H2O
<strong>negrita también</strong>
negrita también
<big>más grande</big> 7<sup>3</sup>
<i>cursiva</i> más grande 73
cursiva
<em>también cursiva</em> <big><big>más grande aún</big></big>

también cursiva
más grande aún
<u>Subrayado</u>
Subrayado
<tt>Frase espaciada </tt>

Frase espaciada
Ejemplos de etiquetas para Formateo de texto
<html>
<head>
</head>
<body>
<h1>Hola Aiep Rancagua, esta es mi Primera Web!!</h1>
<p>Hola Aiep Rancagua, esta es mi Primera Web!!</p>
<pre>Hola Aiep Rancagua, esta es mi Primera Web!!</pre>
<p><i>Hola Aiep Rancagua, esta es mi Primera Web!!</i>.</p>
<p><em>Hola Aiep Rancagua, esta es mi Primera Web!!</em>.</p>
<h2>Hola <small>Aiep Rancagua,</small> esta es mi Primera Web!!</h2>
<h2>Hola <mark>Aiep Rancagua,</mark> Hola Aiep Rancagua, esta es mi
Primera Web!!</h2>
<p>Hola Aiep Rancagua, <del>esta es mi Primera</del> Web!!</p>
<p>Hola Aiep Rancagua, <ins>esta es mi Primera</ins> Web!!</p>
<p>Hola Aiep Rancagua, <sub>esta es mi Primera</sub> Web!!</p>
<p>Hola Aiep Rancagua, <sup>esta es mi Primera</sup> Web!!</p>
<bdo>Hola Aiep Rancagua, esta es mi Primera Web!!</bdo>
</body>
</html>
Ejercicios:
Hola mundo: http://codepen.io/mjarte/pen/KrbaGV
Estilos aplicados: http://codepen.io/mjarte/pen/KrbaAz
Esto es un link: http://codepen.io/mjarte/pen/BzvpvX
Imagen: http://codepen.io/mjarte/pen/grkgqJ
Tablas y Css: http://codepen.io/mjarte/pen/YWdNrR
Listas: http://codepen.io/mjarte/pen/vKvgqb
Recuadro y CSS http://codepen.io/mjarte/pen/YWdkPB
Módulo
Párrafos, saltos de línea, div, alineación.
Párrafo <p></p> Div <div></div>
<p>Esto es un párrafo</p> Sirve para crear secciones o agrupar contenidos.
Esto es un párrafo
Salto de línea <br> <div>Texto ejemplo</div>
<p>Esto es un párrafo con<br>Salto de línea</p>

Texto ejemplo
Esto es un párrafo con
Salto de línea
La instrucción align = “ ” dentro del Div, modificará todo el contenido de este.
Centrar <center>
align = “ ” = center, left right
<p>Centrado</p>
Centrado
<div align=”center”>Texto centrado</div>
Texto centrado
Link entre páginas
Etiqueta <a></a> Ejemplo Básico de link a una web.
<p>¿Quieres ir a Google?</p> <html>

<a href="http://www.google.com" target="_blank">pincha aquí</a> <head>
<meta charset="UTF-8">
</head>
<body>
href="" Dirección URL o Imagen con la que nos conectaremos.
<h1>Bienvenidos a link_1</h1>
target="" Define el parámetro como mostrará la información. <br>
<p>Ir a link 2</p>
Atributos asociados al target="" <a href="http://www.google.com" target="_blank">pincha aquí</a>
</body>
_blank Muestra el contenido en una nueva ventana del navegador. </html>
_self Muestra el contenido en el mismo frame que se abrió
_parent Muestra el contenido utilizando toda la ventana del navegador.
_top Abre el documento vinculado en el cuerpo completo de la ventana
nombre de frame Abrir documento linkeado en frame
Ejercicio 1 - Conectar 3 páginas mediante links
Etiqueta Iframe y sus atributos.
<iframe></iframe> Ejemplo Básico de iframe
Es un elemento HTML que permite insertar o incrustar un documento <html>

HTML dentro de un documento HTML principal.
<head>
Atributos asociados a un iframe
src="" Atributo obligatorio, indica el nombre del archivo de imagen o la URL
desde la que se va a obtener la imagen o URL. </head>
<body>
width="" Ancho del elemento. Se expresa en %, px etc.
<h1>Bienvenidos a iframe</h1>
height="" Alto del elemento. Se expresa en %, px etc.
<br>
name="" Nombre asignado al elemento.
<iframe src="http://ionicframework.com/"
alt="" Lo que escribas aquí, se mostrará, si la imagen o URL no llega a cargar, name="frame_1" width="80%" height="80%">
mientras se carga o, cuando pasamos el ratón por encima. </iframe>
border="" Se especifica el ancho del borde que rodea la imagen. </body>
Si se indica 0 equivale a “sin borde”. Se expresa en cifras. </html>
Ejercicio 2 -
1. Cree una página web, de acuerdo al código entregado abajo.
2. Al abrir la página web debe mostrar una página dentro del iframe.
3. Al hacer click en “pincha aquí” tiene cambiar la página dentro del

Iframe.
<html>
<head>
</head>
<body>
<div align="center">
<h1>Bienvenidos</h1>
<br>
<p>Ver página de IONIC</p>
<a href="........................." target="............">pincha aquí</a>
<br>
<br>
<iframe src="....................." name="............" width="80%" height="80%">
</iframe>
</div>
</body>
</html>
Ejercicios:
Formulario_simple: http://codepen.io/mjarte/pen/oLJkXQ
Checkbox y radio checked: http://codepen.io/mjarte/pen/bZOqVE
Formulario simple + extras: http://codepen.io/mjarte/pen/YWdkyg
Hora y fecha de nacimiento: http://codepen.io/mjarte/pen/rLoyWz
Menu Select: http://codepen.io/mjarte/pen/LkrWNX
Alert: http://codepen.io/mjarte/pen/wWMggM
Si quieres profundizar más sobre este tema,
te dejo un link para descargar un archivo con más etiquetas html5:
https://goo.gl/qTvBFr
Módulo
Sintaxis - Html5
Características de html5
● Las nuevas características están basadas en HTML, CSS, DOM de JavaScript.

● Reduce la necesidad de plugins externos (como Flash).
● Mejor manejo de errores.
● Más marcado para reemplazar secuencias de comandos.
● HTML5 debe ser independiente del dispositivo.
● El proceso de desarrollo debe ser visible para el público.
● Nuevos elementos.
● Código más limpio.
● Uso del elemento Div con Id asociado.
● Aplicación de clases en forma simple.
Html5 - Div, id,class etc.
html
<p>Nombre:<br><input type="text"></p>
html5
<div align="left" id="nombre" class="estilo_1"><p>Nombre:<br><input type="text" id="nombre"></p></div>
Resultado:
El resultado es exactamente igual, la diferencia fundamental es que el “ID”, permite identificar el div con todo su contenido.
En el caso de input también está plenamente identificado porque también tiene “ID”, además la etiqueta “CLASS” permite
aplicar clases, estilos css. Esto permite extender enormemente las capacidades de la aplicación.
Html5 - Tablas
<table border="1">
<tr>
<th>Nombre de Compañía</th>
<th>Contacto en el país</th>
<th>País de Origen</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Mun</td>
<td>Francisco Chang</td>
<td>México</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
</table>
Html5 - Listas
<ul> ● UNO LISTADO CON RECUADROS:
<li>UNO</li>
<li>DOS</li> ● DOS <ul style="list-style-type:square">
<li>TRES</li> ● TRES <li>UNO</li>
</ul> <li>DOS</li>
<li>TRES</li>
</ul>
1. UNO I. UNO <dl> UNO ES UNO

<ol type="1"> <ol type="I"> <dt>UNO ES UNO</dt> -uno es uno
2. DOS II. DOS
<li>UNO</li> <li>UNO</li> <dd>- uno</dd> DOS ES DOS
<li>DOS</li> 3. TRES <li>DOS</li> III. TRES <dt>DOS ES DOS</dt>
<li>TRES</li> <li>TRES</li> <dd>- dos</dd> -dos es dos
</ol> </ol> </dl>
<ol type="A"> A. UNO

<li>UNO</li>
<li>DOS</li> B. DOS
<li>TRES</li> C. TRES
</ol>
Formulario Html5
Se pueden agregar parámetros los cuales fortalecen las capacidades de este.
id = identificación única dentro de la página name = identificación única dentro de la página class = nombre de una clase asociada
<p> = “Párrafo”. Ayuda a que los elementos queden como un párrafo y agrega márgenes automáticos evitando poner <br>(saltos de línea)
<meta charset="UTF-8"> Ayuda para que se puedan ver los caracteres latinos, como la letra Ñ los acentos ´ , etc.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>Nombre:<br><input type="text" id="nombre"></p>
<p>Apellido:<br><input type="text" id="apellido"></p>
<p><textarea id="comentario" placeholder="Tu
comentario"></textarea></p>
</form>
</body>
</html>
Algunos elementos de Html5
MENU - COMBO BOX INGRESO DE FECHA
<select> <input type="date" id="myDate" value="2016-08-02">
<option value="rosado">Rosado</option>
<option value="amarillo">Amarillo</option>
<option value="verde">Verde</option>
</select>
INGRESO DE IMAGENES SELECCIÓN CHECKBOX

<img src="imagen.png" Checkbox:
width="150" height="150"/> <input type="checkbox" id="seleccionado">
Html5 - Eventos
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón "entra" en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la página (por ejemplo al cerrar el navegador) <body>
Html5 - Ejemplo de aplicación de evento
<button type="button" onclick="prueba();" >Botón</button> Atributos de eventos

(aplicables a input, button, etc.)
• onclick • onkeydown
• ondblclick • onkeyup
• onmousedown • onfocus
• onmouseup • onblur
• onmouseover • onload
• onmousemove • onunload
• onmouseout • onchange
• onkeypress • onselect
<script>
Función function prueba()
{
Javascript: alert("Botón OK");
}
</script> Otras acciones de button:
<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
Actividad - Evaluada 1
Página web Ingreso e Inscripción de Usuarios
El trabajo se realizará en clases:
Se crearán 3 archivos html de acuerdo a las indicaciones detalladas en la siguientes páginas.

(ver siguientes 3 páginas)
Los 3 archivos se guardarán en una carpeta con el nombre del alumno.
Comprimir en zip o rar.
Se enviará al profesor Michell Jáuregui : mjarte@gmail.com en el horario de clases.
Que la fuerza los acompañe...
Actividad 1/3
Cree 1 archivo html con
el siguiente diseño:
Página 1:
Nombre: index.html
Contiene 2 links:
link 1 (Ingreso):
Está vinculado a ingreso.html
link 2 (Inscripción de nuevo usuario):

Está vinculado a nuevo.html
Actividad 2/3
Cree 1 archivo html con
Página 2:
Nombre: ingreso.html
Contiene 1 links:
link 1(volver) :
Está vinculado a index.html
Actividad 3/3
Cree 1 archivos html con
Página 3:
Nombre: nuevo.html
Contiene 1 links:
link 1(volver) :
Está vinculado a index.html
Módulo
3.1.- Tablas y Fieldset
Ejemplos básicos de tablas
<!DOCTYPE html>
<html>
<head>
<style>table, th, td { border: 1px solid black; } </style>
</head>
<body>
<table>
<tr>
<th>Lista A</th> <th> Se utiliza
<th>Lista B</th> Lista A Lista B
</tr>
para los títulos o
<tr> encabezados de
<td>1</td> 1 2
<td>2</td> las tablas.
</tr> 3 4
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Ejemplos básicos de tablas - colspan
<table>
<tr>
Lista A Lista B
<th>Lista A</th>
<th>Lista B</th> 1 2
</tr>
<tr> Fusión de 2 Columnas
<td>1</td>
<td>2</td>
</tr> La instrucción: colspan="2"
<tr>
Realiza la fusión de las columnas.
<td colspan="2">Fusión </td>
El número indica la cantidad de
</tr>
</table> columnas que se van a fusionar.
Ejemplos básicos de tablas - rowspan
<table>
<tr>
Lista A Lista B
<th>Lista A</th>
<th>Lista B</th> 1 Fusión de
</tr> 2 celdas.
<tr> 3
<td>1</td>
<td rowspan="2">Fusión de 2 celdas</td>
</tr>
<tr>
La instrucción: rowspan="2"
<td>3</td> Realiza la fusión de las celdas.
</tr>
El número indica la cantidad de celdas
</table>
que se van a fusionar.
Ejemplo básico - fieldset y legend
margin-left: 20% margin-right: 20%
<fieldset style="margin-left:20%;margin-right:20%;">
<legend> Formulario</legend>
Nombre o Título
<i>Esta es una prueba</i>

Aquí va el contenido
</fieldset>
Módulo
4.- Integrando html5 + css + javascript
Docente: Michell Jáuregui V.
Ejercicio concatenar nombre y apellido
.estilo_1{
<!DOCTYPE html> background-color: #f9f9f9;
<html> padding:15px; https://codepen.io/mjarte/pen/AXzaBv
<head> margin:20px;
<meta charset="utf-8"> border:1px solid;
<link rel="stylesheet" type="text/css" href="css/estilos.css"> border-color:#cccccc;
<script type="text/javascript" src="js/funciones.js"></script> border-radius: 10px;
</head> }
<body> .centrado{
<table width="100%"> text-align: center;
<br><br><br><br> }
<tr align="center">
<td> .texto_normal{
<div class="estilo_1 ancho_25" id="ejemplo_1"> color:gray;
<p class="centrado">Ejemplo Nº 1</p> }
<div align="center"> input{

margin:5px;
<label>Ingrese Nombre:</label><br> width:auto;
<input id="id_nombre" type="text" ><br> padding:10px
 }
<label>Ingrese Apellido:</label><br> label{

<input id="id_apellido" type="text" ><br> font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 color:gray;
<button onclick="nombre();">Concatenar font-weight: normal;
Nombre</button><br><br> margin:5px; function nombre(){
</div> } var id_nombre =
</div> document.getElementById("id_nombre").value;
</td> p{ var id_apellido =
</tr> font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; document.getElementById("id_apellido").value;
</table> color:gray;
<h1><div align="center" style="color:red;" font-weight: bold; var resultado = id_nombre+" "+id_apellido;
id="resultado"></div></h1> font-size: 20px;
</body> margin:15px; document.getElementById("resultado").innerText = resultado;
</html> } }
https://codepen.io/mjarte/pen/yJARKz
Ejercicio sacar promedio
<table width="100%">
<br><br><br><br>
<tr align="center">
<td>
<div class="estilo_1 ancho_25" id="ejemplo_1">

<p class="centrado">Ejemplo Nº 1</p>
<div align="center">
<label>Nota 1:</label><br>
<input id="nota_1" type="text" name="" value=""><br>

<label>Nota 2</label><br>
function promedio(){
 var nota_1 = Number(document.getElementById("nota_1").value);
var nota_2 = Number(document.getElementById("nota_2").value);
<label>Nota 3</label><br> var nota_3 = Number(document.getElementById("nota_3").value);
//alert(nota_1 +" "+ nota_2+" "+nota_3);

<button onclick="promedio();">Sacar Promedio</button><br><br>
</div> var resultado = (nota_1 + nota_2 + nota_3)/3;
</div>
</td> //alert(resultado);
</tr>
</table>
<h1><div align="center" id="promedio"></div></h1>
document.getElementById("promedio").innerText = resultado;
Módulo
5.- Framework Bootstrap 3.3.7
Presentación Bootstrap
Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter, como un marco de trabajo (framework) para fomentar la
consistencia a través de herramientas internas. Antes de Bootstrap, se usaban varias librerías para el desarrollo de interfaces de
usuario, las cuales guiaban a inconsistencias y a una carga de trabajo alta en su mantenimiento. Según el desarrollador de Twitter
Mark Otto, frente a esos desafíos:
"...un pequeño grupo de desarrolladores y yo nos reunimos a diseñar y construir una nueva herramienta interna y
vimos una oportunidad de hacer más. A través de ese proceso, nos vimos construir algo mucho más sustancial que
otra herramienta interna más. Meses después, terminamos con una primera versión de Bootstrap como una manera
de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía." Mark Otto
El primer desarrollo en condiciones reales ocurrió durante la primera "Semana de Hackeo" (Hackweek) de Twitter." 5 Mark Otto mostró
a algunos colegas como acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas
de temas se han introducido en el marco de trabajo.
En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más
popular de GitHub.
https://es.wikipedia.org/wiki/Twitter_Bootstrap
Estructura y Función
Bootstrap es modular y consiste esencialmente en una serie de
hojas de estilo LESS que implementan la variedad de
componentes de la herramienta. Una hoja de estilo llamada
bootstrap.less incluye los componentes de las hojas de estilo. Los
desarrolladores pueden adaptar el mismo archivo de Bootstrap,
seleccionando los componentes que deseen usar en su proyecto.
Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos
son posibles mediante las declaraciones LESS.
El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases
mixin.
Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por
otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias
opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.
Sistema de cuadrilla y diseño sensible
Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de
ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos:
teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las
columnas automáticamente.
Entendiendo la hoja de estilo CSS
Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga
una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y
formularios.
Componentes re-usables
En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con
características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y
verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y
barras de progreso.
http://getbootstrap.com/
Bootstrap ejemplos de código.
El presente material será explicado por el docente y el objetivo es
grillas_bootstrap_1
http://codepen.io/mjarte/pen/LkvvpW
ejercitar y aprender bootstrap y se desarrolla en clases.
Estos links contienen gran parte de los fundamentos de bootstrap, al
tablas_bootstrap_2
https://codepen.io/mjartedocente/pen/ZOkkQY
realizar los ejercicios y aplicarlos podrás desarrollar páginas web de
excelente calidad gráfica.
img-thumbnail_bootstrap_3
https://codepen.io/mjartedocente/pen/JKVVXE
formulario_elementos_basicos_bootstrap_17
Well Size_bootstrap_4 Dropdown_bootstrap_11 http://codepen.io/mjartedocente/pen/ZOkkLb
https://codepen.io/mjartedocente/pen/akxxNm https://codepen.io/mjartedocente/pen/VjNNjr
input_bootstrap_18
alert_bootstrap_5 Simple Collapsible_bootstrap_12 http://codepen.io/mjartedocente/pen/XKQQpd
https://codepen.io/mjartedocente/pen/YWrrqE http://codepen.io/mjartedocente/pen/bZJJZO
botones_bootstrap_6 Collapsible panel_bootstrap_13 columnas_celdas_bootstrap_19

https://codepen.io/mjartedocente/pen/mEggPx http://codepen.io/mjartedocente/pen/WxWWxm http://codepen.io/mjartedocente/pen/xOZZgg
botones_varios_bootstrap_7 Tabs_Pills_bootstrap_2_14 ventana_modal_bootstrap_20

https://codepen.io/mjartedocente/pen/jARRqo http://codepen.io/mjartedocente/pen/LkvvRy http://codepen.io/mjartedocente/pen/XKQQrd
botones_varios_2_bootstrap_8 Navbar_bootstrap_14 pagina_basica_bootstrap_21

https://codepen.io/mjartedocente/pen/pbBByr http://codepen.io/mjartedocente/pen/OXGGRo http://codepen.io/mjartedocente/pen/akxxJB
Basic Panel_bootstrap_9 Navbar_2_bootstrap_15

https://codepen.io/mjartedocente/pen/AXzzXW http://codepen.io/mjartedocente/pen/WxWWGm pagina_basica_2_bootstrap_2
http://codepen.io/mjartedocente/pen/vKrrxd
Panels_bootstrap_10 formulario_bootstrap_16
https://codepen.io/mjartedocente/pen/JKVVKE http://codepen.io/mjartedocente/pen/rLbbWa grillas_pagina_2_bootstrap_1
http://codepen.io/mjartedocente/pen/gryyRd
Crear una Página web con Bootstrap
1) Descargar el siguiente archivo:
https://drive.google.com/file/d/1XfbRNp7s
nKYT0zKmXIfmGJb-S5MXg-Vb/view?usp
=sharing
El archivo descargado es una plantilla

completa bootstrap, viene con las
carpetas, css, etc. listo para modificar a tu
gusto.
2) Trabajar con la plantilla, modificarla

y crear una página con contenido original
de una temática a elección.
3) Utilice los elementos entregados

en clase (bootstrap, css, javascript, html5)
utilice los que usted estime necesarios.
Módulo
6.- Sintaxis Básica de Javascript
Sintaxis Básica Javascript - Variables
Las variables se declaran de la siguiente forma: ---------------------------------------------------------------------------------
var mivariable = “hola”; -Ejemplos:
Pueden ser numéricas, alfanuméricas y booleanas (True o False). var letras = "2";
---------------------------------------------------------------------------------- var numeros= 5;
Ejemplos: var resultado = letras+numeros;
var letras =”abc”;
var numeros= 123; Cuanto vale “resultado” ?
var resultado = letras+numeros;
Cuanto vale “resultado” ? Respuesta : 25
Porque?... (Porque es un texto y se concatenó)
Respuesta : abc123 ----------------------------------------------------------------------------
---------------------------------------------------------------------------------- Transformar la variable con parseInt
var numero1 = 5;
var letras = "2";
var numero2= 2;
var letras_arreglada = parselnt(letras);
var resultado1 = numero1 + numero2;
var numeros= 5;
Cuanto vale resultado1 ?
var resultado = letras_arreglada + numeros;
Respuesta : 7
Respuesta: 7
Sintaxis Básica Javascript - Arrays
var frutas= new Array("Naranja", "Manzana", "Uva");
Cuanto vale frutas?, Respuesta: var persona = {Nombre:"Miguel", Apellido:"González", Edad:46};
Naranja, Manzana, Uva

--------------------------------------------------
--------------------------------------------------------------
Cuanto vale?: persona.Nombre;
Respuesta: Miguel
--------------------------------------------------
--------------------------------------------------
Cuanto vale?: persona.Apellido;
Cuanto vale?: frutas[1]
Respuesta: Manzana
Respuesta: González
--------------------------------------------------
--------------------------------------------------
Cuanto vale?: persona.Gonzalez;
Respuesta: Naranja
--------------------------------------------------
Respuesta: 46
Respuesta: Uva
Sintaxis Básica Javascript - Arrays
var frutas= new Array("Naranja", "Manzana", "Uva"); ELIMINAR ÚLTIMO ELEMENTO
frutas.pop();
AGREGAR ELEMENTOS
(Elimina el último elemento “Pera”)
frutas.push("Pera");
frutas contiene: Naranja, Manzana, Uva
frutas contiene: Naranja, Manzana, Uva, Pera
---------------------------
---------------------------
ELIMINAR PRIMER ELEMENTO
CONTAR ELEMENTOS
frutas.splice(0, 1);
var x = frutas.length;
(Elimina el primer elemento “Naranja”)
x vale: 4
frutas contiene: Manzana, Uva
------------------------------------------
------------------------------------------
frutas.sort(); Ordena Alfabéticamente
frutas.reverse(); Invierte el orden
Sintaxis Básica Javascript - Operaciones
= asignación && and
== Igual || or
< Menor que ~ not
> Mayor que ^ or
<= Menor o igual
>= Mayor o igual
!= Distinto
Sintaxis Básica Javascript - Estructuras de Control
switch (expresión) {
if (condición) {
respuesta 1; case 6:
} text = "Este día es Sábado";
break;
case 0:
if (condición) {
text = "Este día es Domingo";
respuesta 1;
break;
}else{
default:
respuesta 2;
text = "NO coincide con ningún día";
}
}
Sintaxis Básica Javascript - Estructuras de Control
for (statement 1; statement 2; statement 3)

while (condición) { {
respuesta 1;
ejecutar código;
}
}
do {
ejecutar código; Ejemplo:
} for (i = 0; i < frutas.length; i++) {

while (condición);
text += frutas[i] + "<br>";
Realizar los siguientes ejercicios.
1) Crear una función que se llame desde un 3) Calcular una cantidad a partir de un
botón. La función ejecutará 10 veces un alert porcentaje.
que diga “Esta es la vuelta Nº(Poner variable,
que comience en 1 y se incremente hasta 10)”. Ejemplo: 45% de 89 = 40.05
2) Crear una tabla de multiplicar automatizada, El % de es =

en la cual se ingrese un numero y cree todas
las multiplicaciones asociadas a ese número del
1 al 10.-
4) Crear un formulario, con 1 input, “Nombre”.
Ejemplo: Agregar un botón “Agregar” que tome este valor
y los guarde en un array. Luego agregar un
3 3 x 1= 3
botón “Ver Listado”, para que muestre todos los
3 x 2= 6
3x3=9 nombres que se agregaron.
3 x 4 =12
3 x 5 = 15 Ayuda: Cree un array y utilice la instrucción
3 x 6 = 18 push(), para agregar los elementos.
3 x 7 = 21
3 x 8 = 24 Ingrese Nombre
3 x 9 = 27
3 x 10 = 30 Ver
Agregar
Listado
Módulo
7.- Sintaxis Básica de Javascript 2
Ejemplo ajax
En la página: https://jsonplaceholder.typicode.com/ hay ejemplos de archivos
JSON que se pueden consultar haciendo la siguiente llamada desde nuestro
archivo js.
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
Ejemplo ajax
Para verificar que esto funciona en su navegador pasar al modo “Inspeccionar”
Ctrl + Mayúscula + i
Si usted puede ver esto, todo salió OK.
Ejemplo ajax
Otro Ejemplo con más datos:
fetch('https://jsonplaceholder.typicode.com/users')
Ejemplo ajax
Vamos a seleccionar el primer elemento, el numero “0” Si hacemos click sobre el
elemento, se despliega más información, tenemos 2 items más “address” y “com
pany” y dentro de ellos hay más datos.
¿Cómo podemos manipular estos datos?, ¿Cómo podemos imprimir estos datos
en la página?
Ejemplo ajax
El código que nos trajo estos datos es muy simple, el resultado “response” lo
envía completo a la instrucción “console.log” y se despliega en la consola eso es
todo.
fetch('https://jsonplaceholder.typicode.com/todos/1')
Ejemplo ajax
Este ejemplo es más cercano a los ejemplos que hemos visto en clases utilizando
funciones en js. El resultado está contenido en “respuesta”, ahora si tenemos en
nuestras manos un “objeto” para manipular.
Pero ¿Sabemos trabajar con objetos?
Ejemplo ajax
JavaScript está diseñado en un paradigma basado en objetos. Un
objeto es una colección de propiedades, y una propiedad es una
asociación entre un nombre y un valor.

Recordatorio: Cuando trabajamos con Array
o Arreglos declarábamos un arreglo y luego --------------------------------------------------
podíamos ingresar nuevos datos, Cuanto vale?: frutas[1]
modificarlos, recorrerlos etc. Respuesta: Manzana
La respuesta que obtenemos de la llamada ajax no podemos

recorrerla de la forma tradicional, hay que hacer algunos cambios:
respuesta[0]
Ejemplo ajax - Recorrer un objeto obtenido de una llamada ajax.
Hay muchas formas de hacerlo, este ejemplo es uno más, lo preferí

por lo simple y efectivo.
Un nuevo for for .. in
Esta simple estructura recorre todo el contenido del

“objeto” obtenido en la consulta ajax.
El ejemplo completo por fin, pero ojo todavía no hacemos nada con
los datos, se recorre perfectamente pero no estamos mostrando
nada.
Tenemos los datos en el js, ahora hay que mostrar los datos. En una
página html5 agregar el siguiente contenido.
1) Creamos un botón que llame a la función.

2) Creamos una tabla con un “id” donde se desplegará nuestra
tabla con el contenido que traemos desde la Api.
Hay que agregar nuevos datos a nuestro for .. in, agregamos la
ubicación utilizando documen.get… y vinculamos al “id” “prueba”
que está en la página html5.
+= Es una poderosa instrucción asociado a la forma innerHTML que permite ir

agregando contenido html5 en cada vuelta, cada vez que itere el for..in agregará
<tr><td>”contenido”</td></tr> y comenzará a crear una tabla con lo obtenido en la
llamada ajax.
Resultado Final
Si usted a realizado todo correctamente, este
será su resultado final.
¿Qué falta ahora?
Apliquemos bootstrap, color, estilos propios

como usted quiera para que quede lindo.
Usted ya comenzó el largo camino del:

js+css-html5
Ahora avance poco a poco, camine o corra
usted decide.
Lo que vimos en el módulo recién es una ojeada simple de lo que es el
mundo de la programación, no se inquiete, siga adelante buscando siempre
el porqué de las cosas, sea curioso o curiosa, nunca se quede con preguntas
sin formular.
Los programadores creamos, diseñamos, soñamos.
Nunca deje de soñar y nunca deje de crear.
Y lo más importante, sea humilde “siempre hay alguien que sabe más”,
comparta el conocimiento, coopere y comparta.
No somos islas, estamos integrados al río universal de la vida.
Saludos a todos.
Módulo
Ejercicio Final
Ejercicio Final
1) Descargar plantilla Bootstrap (enviada a su correo).
2) La plantilla contiene 6 links, todos conectados entre sí. Usted debe modificar el css de la página y
mejorarla visualmente, además usted completará los contenidos de la siguiente forma:
a) Pagina inicio(index): Presentación formal logo aiep, nombre alumno, curso año, nombre profesor, nombre del
modulo.
b) Pagina_1: Insertar 5 Ejemplos html5 + css.
c) Pagina_2: Insertar 3 Ejemplos utilizando interacción con DOM de Javascript (alert, document.getElement….. etc.).
d) Pagina_3: Insertar 3 Ejemplos utilizando bootstrap. (Ejemplos de Código, etiquetas)
e) Pagina_4: Insertar 3 Tareas con Javascript. Realizadas por usted en clases, sirven todas las realizadas en clases.
Pagina_5: Insertar 1 Creación propia, basada en Javascript (Invente una pequeña aplicación, tipo formulario simple,
que se ingresen valores y que los calcule o realice cualquier trabajo, utiloice javascript , creado 100% por usted).
Para insertar los contenidos debe Obligatoriamente utilizar Grillas Responsivas Bootstrap.
Bonos Track: Agregar página de entrada con validación de usuario y pass. Agregar elementos de redes
sociales. Subir la página a un servidor. Agregar ventanas modales Sweet Alert. Mejoras en CSS.
El trabajo debe ser realizado 100% por el alumno si hay contenido duplicado, copiado entre alumnos,
este trabajo será calificado con la nota mínima.
Fecha de Entrega: Miércoles 24 de Septiembre de 2016 - Se revisará en clases. Suerte!!!
Módulo
6.- Instalación Sublime text
Pasos para trabajar con sublime text.
4. Siempre seleccionar
1. Descargar el archivo Cancelar!!!
enviado al correo…
2. Descomprimir carpeta.
3. Abrir el siguiente archivo:

“sublime_text.exe”
5. Ahora estamos listos para

trabajar!!!!
Información adicional
Shift + Command + p = Menu con todos los códigos
Ej: escibir en la consola : bs3-html Esto creara una página
control + shift + c = color picker
http://limestrap.blogspot.cl/
http://docs.emmet.io/abbreviations/syntax/
Video para trabajar con comandos Simple Text:
https://www.youtube.com/watch?v=VWp6J7Q59KE
Módulo
Ejercicios con html5
Nota acumulativa
Ejemplo de HTML5 + CSS
Ejercicios con HTML5 + CSS
Ejemplo de HTML5 + JS
Ejercicios con HTML5 + JS
Explicación de MVC
Ejercicios con MVC
HTML5 + CSS + JS
Conceptos Básicos Para simplificar la comunicación nos provee de un
intérprete de Json, de forma que si el backend
Propone una forma de organizar el Frontend. (server-side) responde con un Json, angular interpreta
la respuesta y crea los objetos que la representan.
Se ejecuta del lado del usuario.
Está basado en el MVC proponiendo las siguientes

divisiones: Los conceptos principales de angular son:
Modelo: conjunto de referencias a objetos JavaScript ● Scopes

definidas en un scope y visibles desde un módulo. La
definición se hace en javascript y para mostrar los ● Controllers
datos nos propone bindings con los componentes
visuales. ● Bindings
Vista: es el template (muy parecido a html puro) donde ● Filtros

definimos los componentes visuales y los linkeamos
con el modelo. ● Directivas (ng-repeat, ng-model, etc.)
Controlador: se declara en javascript, contiene el scope ● Expresiones {{ 1 + 1 }} {{ Hola mundo }} etc.

y de ser necesario realiza la comunicación con el
servidor.
Iniciando con AngularJS 1
1. Descargar AngularJS 1, desde: www.angularjs.org.
2. Agregar una dependencia en nuestro html.
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
3. Listo !!!
Directivas
Angular trabaja con Javascript, pero además <!DOCTYPE html>
incluye un nuevo elemento : “Las Directivas” <html ng-app>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
Las directivas son atributos html, que nos </head>
permiten agregar información a elementos del <body>
</body>
DOM. (1) (Ver Etiqueta Iframe y sus atributos) </html>
Con esto le indicamos a Angular que tiene que

efectuar alguna operación. En este ejemplo La Directiva ng-app, indica que
Dentro de la aplicación podemos elegir que parte todo el código html es parte de una aplicación
del código estará trabajando con una directiva en angular.
particular. Si no se inserta esta directiva “ng-app”,
Angularjs no funcionaría, ya que no tendría un
Podemos dividir el código en partes, para que área de trabajo asignada.
éstas trabajen de forma más optimizada,
beneficiando la eficiencia en su conjunto.
(1) DOM = Modelo de Objetos del Documento. Define la estructura lógica de los documentos y el modo en que se accede y manipula
un documento. El DOM es un API de programación para documentos.
Expresiones {{ }}
Con las expresiones podemos enriquecer el Html, permiten ingresar cualquier tipo de valores o expresiones y
angular se encarga de interpretar.
<body ng-app>
<h1>{{ 1 + 1 }}</h1>
<br>
{{"Soy el Mejor Alumno de " + "Aiep Rancagua"}}
<br>
2
Soy el Mejor Alumno de Aiep Rancagua
<br>
<br> hola...
<input type="text" ng-model="valor_ingresado" />
<br> hola…
{{ valor_ingresado}}
<br>
<br> 5
<br>
<input type="text" ng-model="numero_ingresado" /> 5 x 5 = 25
<br>
<br>
{{ "5 x " + numero_ingresado + " = " + numero_ingresado * 5 }}
</body>
Conceptos: Double Data Binding (Data binding doble).
Double Data Binding : Trabaja por medio de funciones internas invisibles al programador, activa una escucha permanente del input y cuando
se ingresan valores estos son obtenidos y agregados a la expresion {{ }} que contenga el nombre de ese input.
En el ejemplo anterior utilizamos en el input un ng.model y le agregamos un nombre luego este nombre lo pusimos entre {{ }} y obtuvimos el valor
ingresado en el input.
hola...
{{ valor_ingresado}} hola...
El mismo ejemplo con Javascript: “Comentar las observaciones y preguntas del ejemplo...”
<br> hola...
<input id="valor_ingresado2" type="text" onchange="tomar_valores()" /> hola...
<div id="resultado"><div>
<script>
function tomar_valores(){
var valor = document.getElementById("valor_ingresado2").value;
document.getElementById("resultado").innerText = valor;
}
</script>
Expresiones
Con las expresiones podemos enriquecer el Html, permiten ingresar cualquier tipo de valores o expresiones y
angular se encarga de interpretar.
<body ng-app>
<h1>{{ 1 + 1 }}</h1>
<br>
{{"Soy el Mejor Alumno de " + "Aiep Rancagua"}}
<br>
2
Soy el Mejor Alumno de Aiep Rancagua
<br>
<br> hola...
<br> hola…
{{ valor_ingresado}}
<br>
<br> 5
<br>
<input type="text" ng-model="numero_ingresado" /> 5 x 5 = 25
<br>
<br>
{{ "5 x " + numero_ingresado + " = " + numero_ingresado * 5 }}
</body>
Ejemplo Angular JS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Cambie los datos: </p>
<div ng-app="ejemplo_1" ng-controller="controlador_1">
Nombre: <input type="text" ng-model="nombre"><br>

Apellido: <input type="text" ng-model="apellido"><br>
<br>
Nombre Completo: {{"Mi nombre es: " + nombre + " " + apellido}}
</div>
<script>
var app = angular.module('ejemplo_1', []);
app.controller('controlador_1', function($scope) {
$scope.nombre= "michell";
$scope.apellido= "jauregui";
});
</script>
</body>
</html>
Ejemplo Angular JS
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="lista=['juan','pedro','diego']">

<p>Hacer loop con "ng-repeat" :</p>
<ul>
<li ng-repeat="contenido in lista">
{{ contenido }}
</li>
</ul>
</div>
</body>
</html>

Cómo surgió la Web: La historia del nacimiento de Internet y el proyecto de Tim Berners-Lee

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cómo surgió la Web: La historia del nacimiento de Internet y el proyecto de Tim Berners-Lee

Caricato da

Copyright:

Formati disponibili

Módulo

Taller de Aplicaciones para Internet

Docente: Michell Jáuregui Valdés

Hablar de la evolución de los computadores es un tema realmente

Se dice que el primer computador portátil de la historia fue creado

En ese momento nació una ventana dimensional que nos transportó

Gran Colisionador de Hadrones

● Guardar millones de datos.

Guardarlo con el siguiente nombre y

<em>también cursiva</em> <big><big>más grande aún</big></big>

<tt>Frase espaciada </tt>

Hola mundo: http://codepen.io/mjarte/pen/KrbaGV

Estilos aplicados: http://codepen.io/mjarte/pen/KrbaAz

Esto es un link: http://codepen.io/mjarte/pen/BzvpvX

Tablas y Css: http://codepen.io/mjarte/pen/YWdNrR

Recuadro y CSS http://codepen.io/mjarte/pen/YWdkPB

Docente: Michell Jáuregui Valdés

<p>Esto es un párrafo</p> Sirve para crear secciones o agrupar contenidos.

Salto de línea <br> <div>Texto ejemplo</div>

<p>Esto es un párrafo con<br>Salto de línea</p>

<p>¿Quieres ir a Google?</p> <html>

Es un elemento HTML que permite insertar o incrustar un documento <html>

mientras se carga o, cuando pasamos el ratón por encima. </iframe>

border="" Se especifica el ancho del borde que rodea la imagen. </body>

Si se indica 0 equivale a “sin borde”. Se expresa en cifras. </html>

1. Cree una página web, de acuerdo al código entregado abajo.

3. Al hacer click en “pincha aquí” tiene cambiar la página dentro del

Checkbox y radio checked: http://codepen.io/mjarte/pen/bZOqVE

Formulario simple + extras: http://codepen.io/mjarte/pen/YWdkyg

Hora y fecha de nacimiento: http://codepen.io/mjarte/pen/rLoyWz

Menu Select: http://codepen.io/mjarte/pen/LkrWNX

Docente: Michell Jáuregui Valdés

● Las nuevas características están basadas en HTML, CSS, DOM de JavaScript.

<div align="left" id="nombre" class="estilo_1"><p>Nombre:<br><input type="text" id="nombre"></p></div>

1. UNO I. UNO <dl> UNO ES UNO

<ol type="A"> A. UNO

INGRESO DE IMAGENES SELECCIÓN CHECKBOX

<button type="button" onclick="prueba();" >Botón</button> Atributos de eventos

Se crearán 3 archivos html de acuerdo a las indicaciones detalladas en la siguientes páginas.

Los 3 archivos se guardarán en una carpeta con el nombre del alumno.

Comprimir en zip o rar.

Se enviará al profesor Michell Jáuregui : mjarte@gmail.com en el horario de clases.

Que la fuerza los acompañe...

link 2 (Inscripción de nuevo usuario):

Docente: Michell Jáuregui Valdés

margin-left: 20% margin-right: 20%

<i>Esta es una prueba</i>

Docente: Michell Jáuregui V.

<div align="center"> input{

<label>Ingrese Apellido:</label><br> label{

<div class="estilo_1 ancho_25" id="ejemplo_1">

Docente: Michell Jáuregui V.

Entendiendo la hoja de estilo CSS

botones_bootstrap_6 Collapsible panel_bootstrap_13 columnas_celdas_bootstrap_19

botones_varios_bootstrap_7 Tabs_Pills_bootstrap_2_14 ventana_modal_bootstrap_20

botones_varios_2_bootstrap_8 Navbar_bootstrap_14 pagina_basica_bootstrap_21

Basic Panel_bootstrap_9 Navbar_2_bootstrap_15

El archivo descargado es una plantilla

2) Trabajar con la plantilla, modificarla

3) Utilice los elementos entregados

Docente: Michell Jáuregui V.

Cuanto vale frutas?, Respuesta: var persona = {Nombre:"Miguel", Apellido:"González", Edad:46};

Naranja, Manzana, Uva