El documento proporciona una introducción a varias tecnologías web clave como HTML5, CSS3, JavaScript, jQuery, PHP, Node.js y Bootstrap para el desarrollo frontend. También cubre tecnologías de preprocesamiento como Sass/Less y diseño responsivo. El objetivo es brindar una referencia básica sobre las principales herramientas y lenguajes utilizados en el desarrollo moderno de sitios y aplicaciones web.

1. Pequeña Introducción

2. HTML 5
HyperText Markup Language, hace
referencia al lenguaje de marcado para la
elaboración de páginas web.
Es un estándar que sirve de referencia para
la elaboración de páginas web en sus
diferentes versiones, define una estructura
básica y un código (denominado código
HTML) para la definición de contenido de
una página web, como texto, imágenes,
videos, entre otros.
Lenguaje de Etiquetas.

5. Comportamiento
Estructura Estilo

6. CSS 3
 Hoja de estilo en cascada o CSS (siglas
en inglés de cascading style sheets) es
un lenguaje usado para definir y crear
la presentación de un documento
estructurado escrito en HTML o XML2 (y
por extensión en XHTML).
 El World Wide Web Consortium (W3C)
es el encargado de formular la
especificación de las hojas de estilo que
servirán de estándar para los agentes de
usuario o navegadores.

7. Clase CSS

8. JavaScript
 JavaScript (abreviado comúnmente "JS") es un lenguaje de
programación interpretado, dialecto del estándar
ECMAScript. Se define como orientado a objetos,3 basado
en prototipos, imperativo, débilmente tipado y dinámico.
 Se utiliza principalmente en su forma del lado del cliente
(client-side), implementado como parte de un navegador
web permitiendo mejoras en la interfaz de usuario y
páginas web dinámicas4 aunque existe una forma de
JavaScript del lado del servidor (Server-side JavaScript o
SSJS).
 Su uso en aplicaciones externas a la web, por ejemplo en
documentos PDF, aplicaciones de escritorio
(mayoritariamente widgets) es también significativo.
http://jsfiddle.net/kmA9v/7/

9. Jquery
 jQuery es una biblioteca 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.
 https://jquery.com/

11. Front-End

15. PHP
 PHP es un lenguaje de programación de uso general de código
del lado del servidor originalmente diseñado para el desarrollo
web de contenido dinámico. Fue uno de los primeros lenguajes
de programación del lado del servidor que se podían incorporar
directamente en el documento HTML en lugar de llamar a un
archivo externo que procese los datos. El código es interpretado
por un servidor web con un módulo de procesador de PHP que
genera la página Web resultante.
 PHP se considera uno de los lenguajes más flexibles, potentes y
de alto rendimiento conocidos hasta el día de hoy[cita
requerida], lo que ha atraído el interés de múltiples sitios con
gran demanda de tráfico, como Facebook, para optar por el
mismo como tecnología de servidor.
 http://es.wikipedia.org/wiki/PHP
 php.net

16. Node Js
Node.js es un entorno de programación en la
capa del servidor (pero no limitándose a ello)
basado en el lenguaje de programación
ECMAScript, asíncrono, con I/O de datos en
una arquitectura orientada a eventos y
basado en el motor V8 de Google.
Fue creado con el enfoque de ser útil en la
creación de programas de red altamente
escalables, como por ejemplo, servidores
web.
http://es.wikipedia.org/wiki/Node.js
https://nodejs.org

17. Bootstrap
 Bootstrap es un framework o conjunto de herramientas de software libre 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 opcionales adicionales.
 getbootstrap.com

18. Sass {less}
 Sass es un metalenguaje de Hojas de Estilo en Cascada (CSS). Es un lenguaje de script que es traducido a CSS.
SassScript es el lenguaje de script en sí mismo. Sass consiste en dos sintaxis.
 La sintaxis original, llamada indented syntax («sintaxis indentada») que usa una sintaxis similar al Haml.3 Éste
usa la indentación para separar bloques de código y el carácter nueva línea para separar reglas.
 La sintaxis más reciente, SCSS, usa el formato de bloques como CSS. Éste usa llaves para denotar bloques de
código y punto y coma (;) para separar las líneas dentro de un bloque. La sintaxis indentada y los ficheros SCSS
tienen las extensiones .sass y .scss respectivamente.
 CSS3 consiste en una serie de selectores y pseudo-selectores que agrupan las reglas que son aplicadas. Sass (en
el amplio contexto de ambas sintaxis) extiende CSS proveyendo de varios mecanismos que están presentes en los
lenguajes de programación tradicionales, particularmente lenguajes orientados a objetos,
 LESS CSS es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás funciona como un
lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras,
para acelerar y enriquecer los estilos en un sitio web.
 LESS CSS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y
compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable si
quieres ahorrar tiempo de desarrollo, utilizar caracteristicas avanzadas de estilos y para ahorrarte trabajo —de
allí su nombre: less css (menos css).
 http://lesscss.org/
 http://ivanmendoza.net/diseno-web-2/introduccion-less-css

19. Diseño Responsivo
 El diseño web adaptable o adaptativo, conocido
por las siglas RWD (del inglés, Responsive Web
Design), es una filosofía de diseño y desarrollo
cuyo objetivo es adaptar la apariencia de las
páginas web al dispositivo que se esté utilizando
para visualizarla.
 Hoy día las páginas web se visualizan en multitud
de tipos de dispositivos como tabletas, teléfonos
inteligentes, libros electrónicos, portátiles, PC,...
Además, aún dentro de cada tipo, cada dispositivo
tiene sus características concretas: tamaño de
pantalla, resolución, potencia de CPU, capacidad
de memoria,...
 Esta tecnología pretende que con un solo diseño
web, tengamos una visualización adecuada en
cualquier dispositivo.

23. FIN

29. Grupo desarrollo web Facebook