Republica Bolivariana de Venezuela

Ministerio del Poder Popular para la Defensa

Universidad Nacional Experimental Politcnica de la Fuerza Armada

UNEFA Sucre-Extensin Carpano

Profesor: Integrante:

Henry C, Marcano M

C.I:25995153
 Introduccin

La programacin cuenta con una amplia gama de aplicaciones que giran alrededor de todo el
mundo e innovan cada vez ms y cuentan con luz propia. Esta est basada en el manejo de
lenguajes de programacin los cuales son muchos. La base para crear cosas innovadoras es la
imaginacin pues, sin esta, las cosas solo sern ms de lo mismo, es por esto que debemos estar
preparados y tener en cuenta conceptos bsicos, es decir, contar con un conocimiento amplio y
sobre todo experiencia. Dentro del mundo del programador hay un rea muy extensa, la cual es la
Programacin Web, que en este trabajo estaremos tocando con conceptos como HTML, CSS,
Bootstrap y otros, adems de algunos ejemplos.
 Contenido

Qu es HTML?

HTML es un lenguaje de programacin que se utiliza para el desarrollo de pginas de Internet. Se

trata de las siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas
de Hipertexto.

HTML no sirve para el diseo grfico de las pginas web sino ms bien para indicar como va
ordenado el contenido de una pgina web. Esto lo hace por medio de las marcas de hipertexto las
cuales son etiquetas conocidas en ingls como tags.

Este lenguaje se basa en la diferenciacin, para agregar un elemento externo a la pgina, el cual no
se anexa directamente en el cdigo de la pgina, sino que se hace una referencia a la ubicacin de
dicho elemento mediante texto. De esta manera, la pgina web contiene slo texto mientras que
la interpretacin del cdigo, es decir la tarea de unir todos los elementos y visualizar la pgina
final, recae directamente en el navegador web. Al ser un estndar, HTML busca ser un lenguaje
que permita que cualquier pgina web escrita en una determinada versin, pueda ser interpretada
de la misma forma por cualquier navegador web actualizado.

HTML Y HTML5

HTML5 tiene como base HTML, pues realmente seguimos utilizando la mayora de las etiquetas:

html

head
title

body

div

ul

li

span

Con la diferencia que ahora gracias a HTML5 tenemos nuevas etiquetas, nuevos atributos, nuevos
APIs.

Por mencionar nuevas etiquetas:

code

header

footer

article

section

svg

canvas

audio

video

Nuevos apis:

Geolocalization

Drag and drop

Local Storage

Aplication Cache

Web Workers

SSE
De igual forma hay elementos HTML4 que HTML5 ya no los soporta, sin embargo, el consejo es
desde hoy trabajar con HTML5. Es cierto que an hay navegadores que no soportan por completo
HTML5, pero es cosa de tiempo para que esto suceda. Hoy en da los navegadores principales ya
tienen cubierto gran porcentaje de HTML5 as que esto es razn suficiente para ya trabajar con
HTML5 siempre.

Entonces cul es la diferencia? HTML5 es un versin mejorada, depurada y aumentada de

HTML4. Si sabes HTML4 entonces sabes HTML5, solo hay que revisar documentacin para conocer
y aprovechar la nueva funcionalidad, de esta forma ahorraremos tiempo de desarrollo en
funciones que pueden ser ejecutadas por el navegador.

Qu es CSS?

CSS es un lenguaje utilizado en la presentacin de documentos HTML. Un documento HTML viene

siendo coloquialmente una pgina web. Entonces podemos decir que el lenguaje CSS sirve para
organizar la presentacin y aspecto de una pgina web. Este lenguaje es principalmente utilizado
por parte de los navegadores web de internet y por los programadores web informticos para
elegir multitud de opciones de presentacin como colores, tipos y tamaos de letra, etc.

La filosofa de CSS se basa en intentar separar lo que es la estructura del documento HTML de su
presentacin. Por decirlo de alguna manera: la pgina web sera lo que hay debajo (el contenido) y
CSS sera un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta
filosofa, resulta muy fcil cambiarle el aspecto a una pgina web: basta con cambiar el cristal
que tiene delante. Piensa por ejemplo qu ocurre si tienes un libro de papel y lo miras a travs de
un cristal de color azul: que ves el libro azul. En cambio, si lo miras a travs de un cristal amarillo,
vers el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.

Diferencia de CSS y CSS3

Tal vez la mayor diferencia entre CSS2 y CSS3 es la separacin de los mdulos. Mientras que en la
versin anterior todo fue una larga especificacin definiendo diferentes caractersticas, CSS3 est
dividido en varios documentos llamados mdulos. Cada mdulo cuenta con nuevas capacidades,
sin afectar la compatibilidad de la versin estable anterior. Al hablar de mdulos, podemos
nombrar ms de cincuenta, sin embargo, cuatro de ellos han sido publicados como
recomendaciones formales, y se componen de lo siguiente:
Media Queries (publicado en 2012)

Namespaces (publicado en 2011)

Selectors Level 3 (publicado en 2011)

Color (publicado en 2011)

El mdulo Media Queries permite adaptar la representacin del contenido a caractersticas del
dispositivo como la resolucin de pantalla, o la presencia de caractersitcas de accesibilidad como
el braile. Es un principio bsico de la tecnologa de Diseo Responsivo (Responsive Design).

CSS INTERNO

Las diferentes propiedades y valores se pueden poner en una misma lnea o en distintas lneas
segn se prefiera (siempre separados mediante punto y coma).

Dentro de las etiquetas <head> </head> incluiremos una etiqueta de apertura de declaracin de
estilos <style type=text/css>, a continuacin colocaremos la definicin de tantos estilos como
deseemos y cerraremos la declaracin con </style>. En HTML 5 no es necesario especificar type
=text/css pero de momento seguimos recomendando que se use esta sintaxis.

CSS EXTERNO

Aunque el CSS interno nos permite unificar en una declaracin todos los estilos para un archivo
html, seguimos teniendo el problema de tener que repetir la definicin de estilos en la cabecera
de cada uno de los archivos html de nuestro desarrollo web. Si el desarrollo tiene pocos archivos
quizs sea menos problemtico, pero cuando el desarrollo tiene cientos o miles de archivos s se
convierte en un verdadero problema, ya que cada vez que introdujramos cambios habra que
hacerlo en los cientos o miles de archivos de que constara el desarrollo.

Para solventar esta solucin se ide la declaracin externa de CSS, basada en declarar los estilos
CSS en un archivo independiente que puede servir como referente para dotar de estilos a decenas,
cientos o miles de archivos html, que nicamente debern invocar el nombre de archivo utilizando
una sintaxis especfica. De este modo un cambio en los estilos habr que hacerlo nicamente en el
archivo de estilos correspondiente, lo cual supone una gran ventaja. Incluso un cambio completo
de los estilos de una pgina web se puede conseguir simplemente sustituyendo el archivo
correspondiente.

Qu es jQuery?

Es una librera JavaScript open-source, que funciona en mltiples navegadores, y que es

compatible con CSS3. Su objetivo principal es hacer la programacin scripting mucho ms fcil y
rpida del lado del cliente. Con jQuery se pueden producir pginas dinmicas, as como
animaciones parecidas a Flash en relativamente corto tiempo.

La ventaja principal de jQuery es que es mucho ms fcil que sus competidores. Usted puede
agregar plugins fcilmente, traducindose esto en un ahorro substancial de tiempo y esfuerzo. De
hecho, una de las principales razones por la cual Resig y su equipo crearon jQuery fue para ganar
tiempo (en el mundo de desarrollo web, tiempo importa mucho).

La licencia open source de jQuery permite que la librera siempre cuente con soporte constante y
rpido, publicndose actualizaciones de manera constante. La comunidad jQuery es activa y
sumamente trabajadora.

Otra ventaja de jQuery sobre sus competidores como Flash y puro CSS es su excelente integracin
con AJAX.

Una de las principales desventajas de jQuery es la gran cantidad de versiones publicadas en el

corto tiempo. No importa si usted est corriendo la ltima versin de jQuery, usted tendr que
hostear la librera usted mismo (y actualizarla constantemente), o descargar la librera desde
Google (atractivo, pero puede traer problemas de incompatibilidad con el cdigo).

Adems del problema de las versiones, otras desventajas que podemos mencionar:

jQuery es fcil de instalar y aprender, inicialmente. Pero no es tan fcil si lo comparamos con CSS
Si jQuery es implementado inapropiadamente como un Framework, el entorno de desarrollo se
puede salir de control.

Qu es Angular?

Angular.js es uno de los frameworks de referencia en JavaScript, pero trabajar con l no es sencillo
ya que implica un cambio importante en el paradigma de programacin. Una de las caractersticas
principales del framework es su capacidad para organizar el cdigo de JavaScript, habitualmente
catico.

Qu es AJAX?

El trmino AJAX se present por primera vez en el artculo "Ajax: A New Approach to Web
Applications" publicado por Jesse James Garrett el 18 de Febrero de 2005. Hasta ese momento, no
exista un trmino normalizado que hiciera referencia a un nuevo tipo de aplicacin web que
estaba apareciendo.

En realidad, el trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que se puede

traducir como "JavaScript asncrono + XML".

Las tecnologas que forman AJAX son:

XHTML y CSS, para crear una presentacin basada en estndares.

DOM, para la interaccin y manipulacin dinmica de la presentacin.

XML, XSLT y JSON, para el intercambio y la manipulacin de informacin.

XMLHttpRequest, para el intercambio asncrono de informacin.

JavaScript, para unir todas las dems tecnologas.

A continuacin, se muestra una lista de algunas de las aplicaciones ms conocidas basadas en

AJAX:

Gestores de correo electrnico: Gmail, Yahoo Mail, Windows Live Mail.

Cartografa: Google Maps, Yahoo Maps, Windows Live Local.

Aplicaciones web y productividad: Google Docs, Zimbra, Zoho.

Qu es Bootstrap?

Bootstrap es un framework desarrollado y liberado por Twitter que tiene como objetivo facilitar el
diseo web. Permite crear de forma sencilla webs de diseo adaptable, es decir, que se ajusten a
cualquier dispositivo y tamao de pantalla y siempre se vean igual de bien. Es Open Source o
cdigo abierto, por lo que lo podemos usar de forma gratuita y sin restricciones.

Ventajas de usar Bootstrap

La ms genrica es que permite simplificar el proceso de maquetacin, sirvindonos de gua para
aplicar las buenas prcticas y los diferentes estndares. Aqu van unos cuantos pros ms:

Puedes tener una web bien organizada de forma visual rpidamente: la curva de aprendizaje hace
que su manejo sea asequible y rpido si ya sabes maquetar.

Permite utilizar muchos elementos web: desde iconos a desplegables, combinando HTML5, CSS y
Javascript.

Sea lo que sea que creemos, el diseo ser adaptable, no importa el dispositivo, la escala o
resolucin.

El grid system: maquetar por columnas nunca fue tan fcil. Adems, son muy configurables.

Se integra muy bien con las principales libreras Javascript.

El haber sido creado por Twitter nos da ciertas garantas: est muy pensado y hay mucho trabajo
ya hecho. Por lo tanto, hay una comunidad muy activa creando, arreglando cosas, ofreciendo
plugins y mucho ms...

Cuenta con implementaciones externas para WordPress, Drupal, etc.

Nos permite usar Less, para enriquecer an ms los estilos de la web.

 Ejercicios

Formulario de Bootstrap y jQuery

1.- Crear un archivo "index.html", luego escribir el siguiente cdigo.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf8">
<title>formulario con Bootstrap y Jquery Validate</title>
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="formulario.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Formulario</h2>
<form class="form-horizontal" id="formulario">
<div class="control-group">
<label class="control-label" for="inputEmail">Nombre :</label>
<div class="controls">
<input type="text" name="txtNombre" placeholder="Nombre">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email :</label>
<div class="controls">
<input type="text" name="txtEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Titulo :</label>
<div class="controls">
<input type="text" name="txtTitulo" placeholder="Titulo">
 </div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescripcion">Descripcion
:</label>
<div class="controls">
<textarea name="txtDescripcion" ></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Enviar</button>
</div>
</div>
</form>
</div>
</body>
</html>

2.- Crear un archivo "style.css", luego escribir el siguiente cdigo.

/* # cambiar estilo a error

============================================*/
.controls > .error {
color: #b94a48;
display: inline-block;
*display: inline;
padding-left: 5px;
vertical-align: middle;
*zoom: 1;
}
/* # estilo de pagina
============================================*/
.container {
width: 650px;
margin: auto;
}
h2 {
text-align: center;
}

3.- Crear un archivo "formulario.js", luego escribir el siguiente cdigo.

/* # Validando Formulario
============================================*/
$(document).ready(function(){
$('#formulario').validate({
errorElement: "span",
 rules: {
txtNombre: {
minlength: 2,
required: true
},
txtEmail: {
required: true,
email: true
},
txtTitulo: {
minlength: 2,
required: true
},
txtDescripcion: {
minlength: 2,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group')
.removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('help-inline')
.closest('.control-group')
.removeClass('error').addClass('success');
}
});
});