Introducción a la programación web.

HTML 5:
¿Qué significa?
• HyperText, cuyo significado es hipertexto, que no es más que un texto que
enlaza con otros contenidos, que pueden ser otro texto u otro archivo.
Esto es la base del funcionamiento de la web tal y como la conocemos,
que no es más que páginas y recursos interconectados.

• Markup, que significa marca o etiqueta, ya que todas las páginas web están
construidas en base a etiquetas, desde las primeras versiones hasta las
últimas etiquetas de HTML5. Un ejemplo de una etiqueta HTML es la que
identifica a un párrafo, que se compone de la etiqueta, el contenido de la
etiqueta y el cierre del párrafo: <p>HOLA</p>.

• Languaje, cuyo significado es lenguaje, porque HTML es un lenguaje, es

decir, tiene sus normas, tiene su estructura y una serie de
convenciones que nos sirven para definir tanto la estructura como el
contenido de una web.

Algo importante a tener en cuenta y con lo que no hay que confundirse, es

que porque HTML sea un lenguaje no quiere decir que sea un lenguaje
programación. HTML no lo es, ya que no tiene estructuras de lenguaje de
programación, como los bucles, las condiciones, las funciones, etcétera.

¿Para qué sirve HTML5? ¿Cuáles son los principales

usos que puedo darle?
el lenguaje HTML5 se usa para definir la estructura básica de una página
web. Sin embargo, una de sus más grandes adiciones en esta nueva
versión es poder añadir audio y video sin necesidad de usar Flash u otro
reproductor multimedia.
Por medio de las etiquetas <video>y <audio> de HTML5, ahora puedes añadir
videos o audio sin necesidad de usar Adobe Flash o cualquier otro plugin de
tercero. Toda la acción sucede desde el propio navegador, lo que puede
 ayudar a disminuir al tamaño del archivo final de tu página. Los desarrolladores
pueden tener acceso a una API que les permitirá determinar como estas
nuevas etiquetas son presentadas a los usuarios. En otras palabras, se pueden
incluir videos de presentación de algún producto, críticas en video, podcasts,
muestras de música, etc.

FUNCIONES DE GEOLOCALIZACIÓN
La geolocalización permite al sitio detectar la ubicación de cada usuario que
ingresa al sitio web. Esto puede tener diversos usos, por ejemplo, para ofrecer
opción de idiomas según el lugar de ubicación del usuario o para enlazarlo a la
página oficial de la marca en el país en el que se encuentra, entre otras
opciones útiles que, dependiendo como se use, pueden mejorar la experiencia
de usuario.

ANIMACIONES
Gracias a la etiqueta <canvas>. La API para esta etiqueta permite dibujar
elementos en 2D y animarlos. El resultado final se podría incluir en la
página de inicio del sitio web pues la API te da bastante control sobre los
elementos.

Pero no es todo, la API también permite añadir eventos de teclado, ratón y

cualquier otro mando que se desee incluir.

APLICACIONES WEB

La gran ventaja de desarrollar aplicaciones HTML5 es que el resultado es

completamente accesible, es decir, se puede acceder a esta aplicación
desde un ordenador, tablet o móvil. Incluso al cambiar de dispositivo, se
podría acceder a la aplicación web mediante la URL respectiva, cosa que
no sucede con una aplicación móvil.

La gran parte de aplicaciones web funcionan desde la nube. Un ejemplo

común son los clientes de correo como Gmail, que también cuenta con una
aplicación móvil. Es probable que muchos usuarios probablemente
prefieran la aplicación móvil, pero se le da la facilidad a sus usuarios de
elegir la opción que les atraiga más.
VENTAJAS DE USAR HTML5

CODIGO MÁS ORDENADO

Debido a la adición de nuevas etiquetas que ayudan a nombrar

partes de la estructura básica de toda página web (como <header>,
por ejemplo), así como la eliminación de ciertas etiquetas, el código
HTML se puede separar fácilmente entre etiquetas y contenido,
permitiendo así que el desarrollador pueda trabajar de manera más
efectiva y detectar errores de manera más rápida.

Las etiquetas son claras y descriptivas, de modo que el desarrollador

puede comenzar a codificar sin ningún problema. Es realmente un
lenguaje bastante sencillo de comprender en esta nueva versión.

COMPATIBILIDAD EN NAVEGADORES

Los navegadores modernos y populares como Chrome, Firefox,

Safari y Opera) soportan HTML5, es decir, sin importar qué
navegador empleen tus usuarios el contenido se puede visualizar
correctamente. El único problema sería considerar a usuarios que
emplean navegadores más antiguos, ya que en éstos no todas las
nuevas funciones y etiquetas de HTML5 están disponibles.

ALMACENAMIENTO MEJORADO

Otra nueva adición en HTML5 ha sido el almacenamiento local que

se define a sí mismo como “mejor que las cookies” pues la
información nunca se transfiere al servidor. De esta manera, la
información se mantiene segura. Asimismo, esta nueva característica
permite que la información se mantenga almacenada incluso
después de haber cerrado el navegador y como funciona desde el
lado de cliente, la información se mantiene a salvo incluso si el
usuario decide borrar sus cookies.

Ya que la información se guarda en el navegador del usuario, da

muchas más posibilidades a las aplicaciones web como por ejemplo
el uso de caché que mejora el tiempo de respuesta de la aplicación.
HTML Y SU DISEÑO ADAPTATIVO

HTML5 es compatible con los navegadores móviles, de modo que cada

página realizada en HTML5 que se ve en ordenadores, también se puede
adaptar a los dispositivos móviles. Esta especificación para móviles puedes
hacerla desde el mismo documento HTML o se puede emplear una
framework especializada.

CCS

SINTAXIS

CSS tiene una sintaxis simple y usa un conjunto de palabras clave en

inglés para especificar los nombres de varias propiedades de estilo.
Una hoja de estilos consiste en una serie de reglas. Cada regla, o
conjunto de reglas consisten en uno o más selectores, y un bloque
de declaración.
SELECTORES
Los selectores declaran qué etiquetas se le aplican a los estilos que
coincidan con la etiqueta o atributo señalados en la regla.
Los selectores pueden aplicarse a:

• Todos los elementos de un tipo, como los párrafos <p> .

• Elementos seguidos de un atributo, en particular:
o id: identificador, un identificador único para la etiqueta.
o class: clase, un identificador para anotar múltiples elementos.
Las clases y los identificadores son sensibles a las mayúsculas,
comienzan con letras, y pueden incluir caracteres alfanuméricos y
guiones bajos. Una clase se aplica a cualquier número de elementos.
Un identificador se aplica a un solo elemento.
Las pseudoclases son usadas en los selectores CSS para permitir el
formateo usando información que no está incluida en el documento.
Un ejemplo de una pseudoclase muy usada es :hover , que identifica
el contenido que está siendo apuntado por un puntero, como el
cursor del ratón. Este nombre se añade al selector, de esta
manera: a:hover o #elementid:hover . Una pseudoclase clasifica
elementos, como :link o :visited , mientras que un pseudoelemento
 hace una selección de elementos parciales, como ::first-line o ::first-
letter .
Los selectores pueden ser combinados de muchas maneras para
obtener una mayor flexibilidad y precisión. Múltiples selectores
pueden ser unidos en una misma línea para especificar elementos
por su ubicación, tipo de elemento, identificador, clase, o cualquier
combinación de estos. El orden de los selectores es importante. Por
ejemplo, div.myClass {color: red;} aplica a todos los
elementos <div> con la clase myClass, mientras que .myClass div
{color: red;} aplica a todos los elementos <div> que estén dentro de
cualquier elemento con la clase myClass

BLOQUE DE DECLARACIONES
Un bloque de declaraciones consiste en una lista de declaraciones
unidas. Cada declaración consiste en una propiedad, dos puntos ( : ),
y un valor. Si hay muchas declaraciones en un bloque, un punto y
coma ( ; ) es insertado para separar cada declaración.
Las propiedades son insertadas en el estándar CSS. Cada propiedad
tiene un conjunto de posibles valores. Algunas propiedades afectan a
cualquier elemento, otras solo a un grupo particular de elementos.
Los valores pueden ser palabras clave, como "center" o "inherit", o
valores numéricos, como 200px (200 píxeles) o 80% (80 por ciento
del ancho de la ventana). Los valores de colores son especificados
por medio de una palabra clave (ej. "red"), de valores hexadecimales
(ej. #FF0000, pudiéndose abreviar como #F00), valores RGB en una
escala del 0 al 255 (ej. rgb(255, 0, 0) ), valores RGBA igual que los
valores RGB pero con soporte para el canal alfa de transparencias
(ej. rgba(255, 0, 0, 0.8) ), y valores HSL o HSLA (ej. hsl(000, 100%,
50%) , hsla(000, 100%, 50%, 80%) ).

USO
Antes del desarrollo de CSS, toda la información presentacional de
los documentos HTML era incluida en el código HTML. Los colores
de las fuentes, los estilos de fondo, la alineación de los elementos,
los bordes y tamaños eran descritos explícitamente, a veces de
manera redundante, dentro del HTML. CSS permite a los
diseñadores mover toda la información presentacional a otro archivo,
la hoja de estilos, resultando en un código HTML notablemente más
simple.
 Por ejemplo, las cabeceras ( h1 ), sub-cabeceras ( h2 ), sub-sub-
cabeceras ( h3 ), etc., son definidas estructuralmente usando HTML.
En la impresión y las pantallas, la elección de la fuente, tamaño, color
y énfasis para esos elementos es presentacional.
Antes de CSS, los diseñadores que deseaban asignar características
tipográficas, por ejemplo, a todos los elementos h2 tenían que
repetir el código presentacional HTML por cada elemento al que se le
deseaba aplicar ese estilo. Esto creaba documentos más complejos,
largos, más propensos a errores y difíciles de mantener. CSS permite
la separación entre la presentación y la estructura. CSS puede definir
el color, fuente, alineación del texto, tamaño, bordes, espaciado,
capas y muchas otras características tipográficas, y pueden aplicarse
distintos estilos de impresión y de pantalla. CSS también define
estilos no visuales, como la velocidad de lectura y énfasis en los
lectores de textos aurales. El W3C ha declarado obsoleto el uso de
las etiquetas presentacionales HTML.
Por ejemplo, aplicando estilos mediante etiquetas presentacionales
HTML, un elemento h1 definido con texto rojo se puede representar
como:

<h1><span style="color:red;"> Capítulo 1. </span></h1>

Usando CSS, el mismo elemento puede escribirse usando

propiedades de estilo inline en vez de atributos y etiquetas de
presentación:

<h1 style="color: red;"> Capítulo 1. </h1>

Una hoja de estilos CSS externa, descrita abajo, puede enlazarse

con un documento HTML usando la sintaxis siguiente:

<link href="hojadeestilos.css" rel="stylesheet"

type="text/css" />

El código CSS se puede incluir en el código HTML en la etiqueta <style>

dentro de la etiqueta <head> del documento:

<style>
h1 {color: red}
</style>

FUENTES

Los estilos CSS puede ser provistos desde varias fuentes. Esas
fuentes pueden ser el navegador web, el usuario y el diseñador. La
información del diseñador puede ser clasificada de las siguientes
formas: inline, media type, importancia, especificidad del selector,
orden de reglas, herencia y definición de propiedades. La información
de los estilos CSS puede estar en un documento separado o puede
estar embebido dentro de un documento HTML. Múltiples hojas de
estilos pueden ser importadas al mismo tiempo. Los diferentes estilos
pueden ser aplicados dependiendo de la salida del dispositivo usado
en ese momento; por ejemplo, la versión para monitores puede ser
diferente de la versión impresa, así que los diseñadores pueden
aplicar diferentes estilos dependiendo del dispositivo usado.
La hoja de estilos con la máxima prioridad controla la visualización
del contenido. Las declaraciones no establecidas en la fuente con
máxima prioridad son sobreeescritas, como las hojas de estilos del
agente de usuario. Este proceso es llamado cascading, o cascada.6
Una de las metas de CSS es permitir a los usuarios un mayor control
sobre la presentación. Algunas personas que encuentran a los
encabezados rojos en itálicas difíciles de leer pueden aplicar una
hoja de estilos diferente. Dependiendo del navegador y del sitio web,
un usuario puede escoger entre varias hojas de estilo provistas por
los diseñadores, o pueden remover todas las hojas de estilos
añadidas y ver el sitio usando los estilos por defecto del navegador, o
pueden sobreescribir solo el estilo de los encabezados rojos en
itálica sin alterar otros atributos.

ESPECIFICIDAD
La especificidad se refiere a los pesos relativos de varias reglas.
Determina qué estilos se aplican a un elemento cuando más de una
regla intentan aplicar estilos a ella. Basándose en la especificación,
un simple selector ( h1 , por ejemplo) tiene una especificidad de 1, los
selectores de clase tienen una especificidad de 1,0, y los selectores
de id una especificidad de 1,0,0. Porque los valores de especificidad
no se acarrean como en el sistema decimal, las comas son usadas
para separar los "dígitos" (una regla CSS que tiene 11 elementos y
11 clases tiene una especificidad de 11,11, no 121).
HERENCIA

La herencia es una característica clave en CSS; basada en la

relación ancestro-descendiente para operar. La herencia es el
mecanismo por el cual las propiedades no solo se aplican a un solo
elemento, sino también a sus descendientes. La herencia se basa en
el árbol del documento, el cual es la jerarquía de los elementos
XHTML en una página basada en el anidamiento. Los elementos
descendientes pueden heredar los valores de las propiedades CSS
de un elemento ancestro. En general, los elementos descendientes
heredan las propiedades relacionadas al texto, pero las propiedades
relacionadas con la caja no. Las propiedades que pueden ser
heredadas son el color, fuente, espaciado, el peso de la línea,
propiedades de lista, alineación del texto, identado, visibilidad,
espaciado de espacios and y espaciado entre palabras. Las
propiedades que no pueden ser heredadas son el fondo, bordes,
visualización, posicionamiento, tamaño, márgenes, tamaño mínimo y
máximo, outline, desbordamiento, relleno, posición, alineación
vertical y z-index.
La herencia previene que algunas propiedades sean declaradas una
y otra vez en la hoja de estilos, permitiendo a los diseñadores escribir
menos código CSS. Mejora la carga rápida de los sitios por los
usuarios, y permite a los clientes ahorrar dinero en los costos de
desarrollo y ancho de banda.

POSICIONAMIENTO

NORMAL

Los elementos inline, o de línea, son dispuestos de la misma

manera que las letras en las palabras de un texto, una vez que
ya no hay más espacio en una línea, entonces se empieza una
nueva línea abajo. Los elementos block, o de bloque, son
dispuestos verticalmente, como los párrafos.

FLOTANTE

Un elemento float está fuera del flujo normal y puesto lo más

posible a la derecha o izquierda en el espacio disponible. Los
demás elementos fluyen alrededor del elemento float.
 ABSOLUTO

Un elemento posicionado absolutamente no tiene un lugar, y

no afecta al flujo normal de los elementos. Ocupa el espacio
que se le ha asignado independientemente de los demás
elementos.

PROPIEDADES DE POSICIONAMIENTO
Hay 4 posibles valores para la propiedad position . Si un elemento está
posicionado de una manera diferente a static , hay cuatro subpropiedades
usadas para especificar posiciones y offsets: top , bottom , left y right

STATIC
El valor por defecto a los elementos en el flujo normal.

RELATIVE
El elemento el posicionado en el flujo normal, y luego movido
relativamente a su posición normal. Los demás elementos son
independientes del elemento movido relativamente.

ABSOLUTE
Especifica el posicionamiento absoluto. El elemento es posicionado en
relación a su antecesor no estático más cercano.

FIXED
El elemento es posicionado absolutamente en una posición fija de la
pantalla aunque el resto del documento se mueva.

FLOAT Y CLEAR
La propiedad float puede tener 3 valores diferentes. Los elementos
posicionados absolutamente o de manera fija no pueden ser aplicados
a esta propiedad. Los demás elementos flotan normalmente alrededor
de los elementos flotantes, a menos que se establezcan alguna de las
propiedades clear .

LEFT
Los elementos float flotan a la izquierda y los otros elementos fluyen a
la derecha de este elemento.de los elementos flotantes, a menos que
se establezcan alguna de las propiedades clear .
 RIGHT
Los elementos float flotan a la derecha y los otros elementos fluyen a la
izquierda de este elemento.

CLEAR
Fuerza al elemento a no fluir alrededor de los elementos que flotan a la
izquierda ( clear: left ), a la derecha ( clear: right ) o a ambos
lados ( clear: both ).

WEB RESPONSIVE
Responsive Web Design (o diseño web adaptativo) se trata de una técnica
de diseño y desarrollo web por el que se consigue que un único sitio se
adapte perfectamente a todos los dispositivos que puedan consumirlo,
desde ordenadores de escritorio a netbooks, tablets, teléfonos móviles,
televisores, etc. En definitiva, se trata de construir una única web para que
se vea correctamente y aproveche las particularidades de todo dispositivo
que hoy exista, o pueda existir en el futuro, independientemente de la
pantalla en la que se muestre.

VENTAJAS
Con una sola versión en HTML y CSS se cubren todas
las resoluciones de pantalla, es decir, el sitio web
creado estará optimizado para todo tipo de
dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto
mejora la experiencia de usuario a diferencia de lo que
ocurre, por ejemplo, con sitios web de ancho fijo
cuando se acceden desde dispositivos móviles.

Reducción de costos. Se reducen los costes ya que

hasta hoy se debe hacer un portal para la Web y otro
para dispositivos móviles. Esto origina mayores costos
de creación y mantenimiento de la información.

Eficiencia en la actualización. El sitio solo se debe

actualizar una vez y se ve reflejada en todas las
plataformas. Cuando tenemos los portales
independientes para Web y Mobile se debe realizar la
actualización dos veces lo que crea la necesidad de
mayor cantidad de recursos y posibilidad de error.
 ELEMENTOS BÁSICOS
Una estructura flexible
Imágenes y multimedia flexible.

JAVASRIPT
IMPERATIVO Y ESTRUCTURADO
JavaScript es compatible con gran parte de la estructura de
programación de C (por ejemplo, sentencias if , bucles for ,
sentencias switch , etc.). Con una salvedad, en parte: en C,
el ámbito de las variables alcanza al bloque en el cual fueron
definidas; sin embargo JavaScript no es compatible con esto, puesto
que el ámbito de las variables es el de la función en la cual fueron
declaradas. Esto cambia con la versión de ECMAScript 2015, ya que
añade compatibilidad con block scoping por medio de la palabra
clave let . Como en C, JavaScript hace distinción
entre expresiones y sentencias. Una diferencia sintáctica con
respecto a C es la inserción automática de punto y coma, es decir, en
JavaScript los puntos y coma que finalizan una sentencia pueden ser
omitidos.

DINAMICO
TIPO DINAMICO
Como en la mayoría de lenguajes de scripting, el tipo está
asociado al valor, no a la variable. Por ejemplo, una
variable x en un momento dado puede estar ligada a un
número y más adelante, religada a una cadena. JavaScript es
compatible con varias formas de comprobar el tipo de un
objeto, incluyendo duck typing.25 Una forma de saberlo es por
medio de la palabra clave typeof.

OBJETUAL
JavaScript está formado casi en su totalidad por objetos. Los
objetos en JavaScript son arrays asociativos, mejorados con la
inclusión de prototipos (ver más adelante). Los nombres de las
propiedades de los objetos son claves de tipo
cadena: obj.x = 10 y obj['x'] = 10 son equivalentes,
siendo azúcar sintáctico la notación con punto. Las
 propiedades y sus valores pueden ser creados, cambiados o
eliminados en tiempo de ejecución. La mayoría de
propiedades de un objeto (y aquellas que son incluidas por la
cadena de la herencia prototípica) pueden ser enumeradas a
por medio de la instrucción de bucle for... in . JavaScript
tiene un pequeño número de objetos predefinidos como
son Function y Date .

EVALUACIÓN EN TIEMPO DE EJECUCIÓN

JavaScript incluye la función eval que permite evaluar
expresiones expresadas como cadenas en tiempo de
ejecución. Por ello se recomienda que eval sea utilizado con
precaución y que se opte por utilizar la
función JSON.parse() en la medida de lo posible, pues
puede resultar mucho más segura.

FUNCIONAL
FUNCIONES DE PRIMERA CLASE
A las funciones se les suele llamar ciudadanos de primera
clase; son objetos en sí mismos. Como tal, poseen
propiedades y métodos, como .call() y .bind() . Una
función anidada es una función definida dentro de otra. Esta
es creada cada vez que la función externa es invocada.
Además, cada función creada forma una clausura; es el
resultado de evaluar un ámbito conteniendo en una o más
variables dependientes de otro ámbito externo, incluyendo
constantes, variables locales y argumentos de la función
externa llamante. El resultado de la evaluación de dicha
clausura forma parte del estado interno de cada objeto
función, incluso después de que la función exterior concluya
su evaluación.

PROTOTÍPICO
PROTOTIPOS
JavaScript usa prototipos en vez de clases para el uso
de herencia Es posible llegar a emular muchas de las
características que proporcionan las clases en lenguajes
 orientados a objetos tradicionales por medio de prototipos en
JavaScript.

FUNCIONES COMO CONSTRUCTORES DE

OBJETOS
Las funciones también se comportan como constructores.
Prefijar una llamada a la función con la palabra
clave new crear una nueva instancia de un prototipo, que
heredan propiedades y métodos del constructor (incluidas las
propiedades del prototipo de Object ). ECMAScript 5 ofrece
el método Object.create , permitiendo la creación explícita
de una instancia sin tener que heredar automáticamente del
prototipo de Object (en entornos antiguos puede aparecer el
prototipo del objeto creado como null ). La
propiedad prototype del constructor determina el objeto
usado para el prototipo interno de los nuevos objetos creados.
Se pueden añadir nuevos métodos modificando el prototipo
del objeto usado como constructor. Constructores predefinidos
en JavaScript, como Array u Object , también tienen
prototipos que pueden ser modificados. Aunque esto sea
posible se considera una mala práctica modificar el prototipo
de Object ya que la mayoría de los objetos en Javascript
heredan los métodos y propiedades del objeto prototype,
objetos los cuales pueden esperar que estos no hayan sido
modificados.

OTRAS CARACTERÍSTICAS
ENTORNO DE EJECUCIÓN
JavaScript normalmente depende del entorno en el que se
ejecute (por ejemplo, en un navegador web) para ofrecer
objetos y métodos por los que los scripts pueden interactuar
con el "mundo exterior". De hecho, depende del entorno para
ser capaz de proporcionar la capacidad de incluir o importar
scripts (por ejemplo, en HTML por medio del tag <script> ).
(Esto no es una característica del lenguaje, pero es común en
la mayoría de las implementaciones de JavaScript.)

FUNCIONES VARIÁDICAS
 Un número indefinido de parámetros pueden ser pasados a la
función. La función puede acceder a ellos a través de los
parámetros o también a través del objeto local arguments .
Las funciones variádicas también pueden ser creadas usando
el método .apply() .

FUNCIONES COMO MÉTODOS

A diferencia de muchos lenguajes orientados a objetos, no hay
distinción entre la definición de función y la definición
de método. Más bien, la distinción se produce durante la
llamada a la función; una función puede ser llamada como un
método. Cuando una función es llamada como un método de
un objeto, la palabra clave this , que es una variable local a
la función, representa al objeto que invocó dicha función.

ARRAYS Y LA DEFINICIÓN LITERAL DE LOS

OBJETOS
Al igual que muchos lenguajes de script, arrays y objetos
(arrays asociativos en otros idiomas) pueden ser creados con
una sintaxis abreviada. De hecho, estos literales forman la
base del formato de datos JSON.

EXPRESIONES REGULARES
JavaScript también es compatible con expresiones
regulares de una manera similar a Perl, que proporcionan una
sintaxis concisa y poderosa para la manipulación de texto que
es más sofisticado que las funciones incorporadas a los
objetos de tipo string.

JQERY
¿QUÉ ES?
jQuery es una biblioteca multiplataforma de JavaScript, creada
inicialmente por John Resig, que permite simplificar la manera
de interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y
agregar interacción con la técnica AJAX a páginas web. Fue
presentada el 14 de enero de 2006 en el BarCamp NYC. De
acuerdo a un análisis de la Web (realizado en 2017) JQuery
 es la biblioteca de JavaScript más utilizada, por un amplio
margen.
jQuery es software libre y de código abierto, posee un doble
licenciamiento bajo la Licencia MIT y la Licencia Pública
General de GNU v2, permitiendo su uso en
proyectos libres y privados. jQuery, al igual que otras
bibliotecas, ofrece una serie de funcionalidades basadas en
JavaScript que de otra manera requerirían de mucho más
código, es decir, con las funciones propias de esta biblioteca
se logran grandes resultados en menos tiempo y espacio.
La sintaxis de JQuery está diseñada para facilitar la
navegación por un documento, seleccionar elementos DOM,
crear animaciones, manejar eventos y desarrollar
aplicaciones AJAX. JQuery también proporciona capacidades
para que los desarrolladores creen complementos en la parte
superior de la biblioteca de JavaScript. Esto permite a los
desarrolladores crear abstracciones para interacción y
animación de bajo nivel, efectos avanzados y widgets
temáticos de alto nivel. El enfoque modular de la biblioteca
jQuery permite la creación de poderosas páginas web
dinámicas y aplicaciones web.
El conjunto de características principales de jQuery
(selecciones de elementos DOM, recorrido y manipulación)
habilitados por su motor de selección (denominado "Sizzle" de
v1.3), crearon un nuevo "estilo de programación", algoritmos
de fusión y estructuras de datos DOM. Este estilo influyó en la
arquitectura de otros marcos de JavaScript como YUI
v3 y Dojo, lo que más tarde estimuló la creación de las API de
selectores estándar.
Las empresas Microsoft y Nokia anunciaron que incluirán la
biblioteca en sus plataformas. Microsoft la añadirá en
su IDE Visual Studio y la usará junto con
los frameworks ASP.NET AJAX y ASP.NET MVC, mientras
que Nokia los integrará con su plataforma Web Run-Time.

CARÁCTERÍSTICAS
o Selección de elementos DOM utilizando el motor
de selección de código abierto de múltiples
navegadores Sizzle , un spin-off del proyecto
jQuery.
o Interactividad y modificaciones del árbol DOM,
incluyendo soporte para CSS 1-3 y
un plugin básico de XPath.
 o Eventos.
o Manipulación de la hoja de estilos CSS.
o Efectos y animaciones.
o Animaciones personalizadas.
o AJAX.
o Objetos diferidos y de promesa para controlar el
procesamiento asíncrono
o Soporta extensiones (JSON).
o Utilidades varias como obtener información
del navegador, operar con objetos y vectores,
funciones para rutinas comunes, etc.
o Métodos de compatibilidad que están
disponibles de forma nativa con los
navegadores Mozilla Firefox 2.0+, Internet
Explorer 6+, Safari 3+, Opera 10.6+ y Google
Chrome 8+.
o Soporte para múltiples navegadores

USO
jQuery consiste en un único fichero JavaScript
que contiene las funcionalidades comunes de
DOM, eventos, efectos y AJAX.
La característica principal de la biblioteca es que
permite cambiar el contenido de una página web
sin necesidad de recargarla, mediante la
manipulación del árbol DOM y peticiones AJAX.
Para ello utiliza las funciones $() o jQuery() .

BOOTSTRAP
¿QUÉ ES?
Bootstrap es una biblioteca multiplataforma o conjunto de
herramientas de código abierto para diseño de sitios y aplicaciones
web. Contiene plantillas de diseño con tipografía, formularios,
botones, cuadros, menús de navegación y otros elementos de diseño
basado en HTML y CSS, así como extensiones
de JavaScript adicionales. A diferencia de muchos frameworks web,
solo se ocupa del desarrollo front-end.
Bootstrap es el segundo proyecto más destacado en GitHub y es
usado por la NASA y la MSNBC entre otras organizaciones.
CARACTERÍSTICAS
Bootstrap tiene un soporte relativamente incompleto
para HTML5 y CSS3, pero es compatible con la mayoría de los
navegadores web. La información básica de compatibilidad de sitios
web o aplicaciones está disponible para todos los dispositivos y
navegadores. Existe un concepto de compatibilidad parcial que hace
disponible la información básica de un sitio web para todos los
dispositivos y navegadores. Por ejemplo, las propiedades
introducidas en CSS3 para las esquinas redondeadas, gradientes y
sombras son usadas por Bootstrap a pesar de la falta de soporte de
navegadores antiguos. Esto extiende la funcionalidad de la
herramienta, pero no es requerida para su uso.
Desde la versión 2.0 también soporta diseños web adaptables. Esto
significa que el diseño gráfico de la página se ajusta dinámicamente,
tomando en cuenta las características del dispositivo usado
(Computadoras, tabletas, teléfonos móviles).

FUNCIÓN Y ESTRUCTURA
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.

USO
Para usar Bootstrap en una página HTML, el desarrollador solo debe
descargar la hoja de estilo Bootstrap CSS y enlazarla en el
 archivo HTML. Otra opción sería compilar el archivo CSS desde la
hoja de estilo LESS o SASS descargada. Esto puede realizarse con
un compilador especial.
Si el desarrollador también quiere usar los componentes de
JavaScript, éstos deben estar referenciados junto con la
librería jQuery en el documento HTML.
El siguiente ejemplo ilustra como funciona. El código HTML define un
simple formulario de búsqueda y una lista de resultados en un
formulario tabular. La página consiste en elementos regulares y
semánticos de HTML 5, y alguna información adicional de la clase de
CSS de acuerdo con la documentación de Bootstrap. La figura
muestra la representación del documento en Mozilla Firefox 10.

PHP
SINTAXIS
La sintaxis de PHP, se fundamenta en los principios de programación
de C.
El intérprete de PHP solo ejecuta el código que se encuentra entre
sus delimitadores. Los delimitadores más comunes son <?php para
abrir una sección PHP y ?> para cerrarla. El propósito de estos
delimitadores es separar el código PHP del resto de código, como
por ejemplo el HTML. En los archivos que contienen solo código
PHP, el delimitador ?> se puede omitir. De hecho, PHP-FIG a través
de sus PHP Standard Recomendación (recomendaciones estándar
para PHP) recomienda omitir el delimitador ?> , ya que así no se
envía contenido HTML de manera accidental. Por ejemplo, si se
envía un carácter "no PHP" (que no es procesado por el intérprete de
PHP), no se podrán ejecutar ciertas acciones como enviar
encabezados HTTP a través de la función header() , ya que el
proceso de respuesta ya ha comenzado.
Las variables se prefijan con el símbolo del dólar ( $ ) y no es
necesario indicar su tipo. Las variables, a diferencia de las funciones,
distinguen entre mayúsculas y minúsculas. Las cadenas de
caracteres pueden ser encapsuladas tanto en dobles comillas como
en comillas simples, aunque en el caso de las primeras, se pueden
insertar variables en la cadena directamente, sin necesidad de
concatenación.
Los comentarios se pueden escribir bien con dos barras al principio
de la línea, o con una almohadilla. También permite comentarios
multi-línea encapsulados en /* */ .
 En cuanto a las palabras clave, PHP comparte con la mayoría de
otros lenguajes con sintaxis C las condiciones con if , los bucles
con for y while y los retornos de funciones. Como es habitual en
este tipo de lenguajes, las sentencias deben acabar con punto y
coma ( ; )

BASE DE DATOS (MySQL).

PHP puede combinarse con MySQL para trabajar con bases de
datos, aunque también se pueden utilizar otros motores de base de
datos como Microsoft SQL Server, PostgreSQL, MongoDB, entre
otros.
En el siguiente ejemplo se muestra un simple inicio de sesión con
usuario y contraseña utilizando MySQL y PHP con el estilo orientado
a objetos

CARACTERÍSTICAS
• Orientado al desarrollo de aplicaciones web dinámicas con acceso a
información almacenada en una base de datos.
• Es considerado un lenguaje fácil de aprender, ya que en su
desarrollo se simplificaron distintas especificaciones, como es el caso
de la definición de las variables primitivas, ejemplo que se hace
evidente en el uso de php arrays.
• El código fuente escrito en PHP es invisible al navegador web y al
cliente, ya que es el servidor el que se encarga de ejecutar el código
y enviar su resultado HTML al navegador.
• Capacidad de conexión con la mayoría de los motores de base de
datos que se utilizan en la actualidad, destaca su conectividad
con MySQL y PostgreSQL.
• Capacidad de expandir su potencial utilizando módulos (llamados
extensiones).
• Posee una amplia documentación en su sitio web oficial, entre la cual
se destaca que todas las funciones del sistema están explicadas y
ejemplificadas en un único archivo de ayuda.
• Es libre, por lo que se presenta como una alternativa de fácil acceso
para todos.
• Permite aplicar técnicas de programación orientada a objetos.
• No requiere definición de tipos de variables aunque sus variables se
pueden evaluar también por el tipo que estén manejando en tiempo
de ejecución.
• Tiene manejo de excepciones (desde PHP5).
• Si bien PHP no obliga a quien lo usa a seguir una determinada
metodología a la hora de programar, aun haciéndolo, el programador
 puede aplicar en su trabajo cualquier técnica de programación o de
desarrollo que le permita escribir código ordenado, estructurado y
manejable. Un ejemplo de esto son los desarrollos que en PHP se
han hecho del patrón de diseño Modelo Vista Controlador (MVC),
que permiten separar el tratamiento y acceso a los datos, la lógica de
control y la interfaz de usuario en tres componentes independientes.
• Debido a su flexibilidad ha tenido una gran acogida como lenguaje
base para las aplicaciones WEB de manejo de contenido, y es su uso
principal.

INCONVENIENTES
• Como es un lenguaje que se interpreta en ejecución, para ciertos
usos puede resultar un inconveniente que el código fuente no pueda
ser ocultado. La ofuscación es una técnica que puede dificultar la
lectura del código pero no necesariamente impide que el código sea
examinado.
• Debido a que es un lenguaje interpretado, un script en PHP suele
funcionar considerablemente más lento que su equivalente en un
lenguaje de bajo nivel, sin embargo este inconveniente se puede
minimizar con técnicas de caché tanto en archivos como en
memoria.
• En las versiones previas a la 7, las variables no son tipificadas, lo
cual dificulta a los diferentes IDEs ofrecer asistencias para el
tipificado del código, aunque esto no es realmente un inconveniente
del lenguaje en sí. Esto es solventado por algunos IDEs añadiendo
un comentario con el tipo a la declaración de la variable.

XAMPP, LAMP, WAMP, MAMP, UwAMP

XAMPP es un servidor independiente de plataforma, software libre,
que consiste principalmente en la base de datos MySQL, el servidor
Web Apache y los intérpretes para lenguajes de script: PHP y Perl. El
nombre proviene del acrónimo de X (para cualquiera de los
diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El
programa está liberado bajo la licencia GNU y actúa como un
servidor Web libre, fácil de usar y capaz de interpretar páginas
dinámicas. Actualmente XAMPP está disponible para Microsoft
Windows, GNU/Linux, Solaris, y MacOS X.
Es un software "liviano" que se puede utilizar en cualquier PC. No
necesita muchos recursos.
LAMP presenta una funcionalidad parecida a XAMPP, pero enfocada
en Linux, WAMP lo hace enfocado en Windows, y MAMP para
MacOS X. UwAmp es muy idéntico a WAMP y se destaca en que se
puede ejecutar desde una memoria USB.