Introduccion al Desarrollo web - slides

29
Desarrollo WEB Pequeña Introducción

Transcript of Introduccion al Desarrollo web - slides

Page 1: Introduccion al Desarrollo web - slides

Desarrollo WEBPequeña Introducción

Page 2: Introduccion al Desarrollo web - slides

HTML 5HyperText 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.

Page 3: Introduccion al Desarrollo web - slides
Page 4: Introduccion al Desarrollo web - slides
Page 5: Introduccion al Desarrollo web - slides

Comportamiento

EstructuraEstilo

Page 6: Introduccion al Desarrollo web - slides

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.

Page 7: Introduccion al Desarrollo web - slides

Clase CSS

Page 8: Introduccion al Desarrollo web - slides

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/

Page 9: Introduccion al Desarrollo web - slides

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/

Page 11: Introduccion al Desarrollo web - slides

Front-End

Page 12: Introduccion al Desarrollo web - slides
Page 13: Introduccion al Desarrollo web - slides
Page 14: Introduccion al Desarrollo web - slides
Page 15: Introduccion al Desarrollo web - slides

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

Page 16: Introduccion al Desarrollo web - slides

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.jshttps://nodejs.org

Page 17: Introduccion al Desarrollo web - slides

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

Page 18: Introduccion al Desarrollo web - slides

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

Page 19: Introduccion al Desarrollo web - slides

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.

Page 20: Introduccion al Desarrollo web - slides
Page 21: Introduccion al Desarrollo web - slides
Page 22: Introduccion al Desarrollo web - slides
Page 23: Introduccion al Desarrollo web - slides

FIN

Page 24: Introduccion al Desarrollo web - slides
Page 25: Introduccion al Desarrollo web - slides
Page 26: Introduccion al Desarrollo web - slides
Page 27: Introduccion al Desarrollo web - slides
Page 28: Introduccion al Desarrollo web - slides