Beruflich Dokumente
Kultur Dokumente
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 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.
code
header
footer
article
section
svg
canvas
audio
video
Nuevos apis:
Geolocalization
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.
Qu es CSS?
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.
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)
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?
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.
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.
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.
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.
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...
<!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>
/* # 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');
}
});
});