SlideShare una empresa de Scribd logo
Pequeña Introducción
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.
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
Comportamiento
Estructura Estilo
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.
Clase CSS
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/
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/
Introduccion al Desarrollo web - slides
Front-End
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
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
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
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
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
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.
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
FIN
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
Introduccion al Desarrollo web - slides
Grupo desarrollo web Facebook

Más contenido relacionado

PDF
Abrir acceso por red a xampp
PPT
Desarrollo web
PPTX
Partes de una pagina web
PPTX
Interfaz grafica de windows
PDF
Banco de Dados II Projeto Final de Banco de Dados
PDF
Wireframes para sites e dispositivos móveis
DOCX
Proyecto sitio web
PPTX
Recursos informaticos 1
Abrir acceso por red a xampp
Desarrollo web
Partes de una pagina web
Interfaz grafica de windows
Banco de Dados II Projeto Final de Banco de Dados
Wireframes para sites e dispositivos móveis
Proyecto sitio web
Recursos informaticos 1

La actualidad más candente (20)

PPT
2.- Tipos de sistemas operativos y funcionamiento del sistema
PDF
Sílabo de herramientas de desarrollo de software
PDF
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
PDF
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
PPTX
El software su naturaleza y cualidades
PPTX
Disciplina de desarrollo rup
PDF
Servidores web
PPTX
Herramientas de Internet
PPTX
Gestor de contenidos
PPT
DEFINICION DE Php
PDF
Ofimatica en linea
PPTX
Cuadro comparativo web 1.0 web 2.0 web 3.0
PDF
Estrutura de Dados - Aula 02 - Estrutura de Dados e TAD
PPTX
Introdução sobre desenvolvimento web
PPTX
Introdução a programação para a Internet
PPT
Programas de Microsoft office
PPTX
INTRODUCCIÓN A LA OFIMÁTICA.pptx
PDF
Curso Arquitetura de Informação @ iMasters Jan 2013
PPT
Web 2.0: Definición, descripción, ejemplos y avances
PDF
Introducción al Diseño web
2.- Tipos de sistemas operativos y funcionamiento del sistema
Sílabo de herramientas de desarrollo de software
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
El software su naturaleza y cualidades
Disciplina de desarrollo rup
Servidores web
Herramientas de Internet
Gestor de contenidos
DEFINICION DE Php
Ofimatica en linea
Cuadro comparativo web 1.0 web 2.0 web 3.0
Estrutura de Dados - Aula 02 - Estrutura de Dados e TAD
Introdução sobre desenvolvimento web
Introdução a programação para a Internet
Programas de Microsoft office
INTRODUCCIÓN A LA OFIMÁTICA.pptx
Curso Arquitetura de Informação @ iMasters Jan 2013
Web 2.0: Definición, descripción, ejemplos y avances
Introducción al Diseño web
Publicidad

Similar a Introduccion al Desarrollo web - slides (20)

PDF
Semana 2 HTML y CSS
PPTX
Tecnologías web.pptx
DOCX
introducción tecnologías web
PDF
Colegio de bachilleres del estado de oaxac1 (1)
PPTX
Ekipo 2
PPTX
Revision de tecnologias web
PPTX
Navegar por la web
PPTX
EQUIPO 2,LAS AGUILAS
PDF
Investigacion de pagina web
PPTX
DEBER DE PROGRAMACIÓN blogs blogger blogspot
PPTX
Herramientas para paginas web
PPTX
Conceptos de DREAMWEAVER.pptx
PDF
Arquitectura web 2
PPT
Fundamentos de Desarrollo Web
PDF
Clase 2 Lenguajes de Programación Web
PPTX
codigos Html y css
DOCX
Conceptos
PPTX
Lenguajes de Programación para Paginas Web
PPTX
Tecnologias de desarrollo web
DOCX
Estándares que utilizamos en nuestra aplicación web
Semana 2 HTML y CSS
Tecnologías web.pptx
introducción tecnologías web
Colegio de bachilleres del estado de oaxac1 (1)
Ekipo 2
Revision de tecnologias web
Navegar por la web
EQUIPO 2,LAS AGUILAS
Investigacion de pagina web
DEBER DE PROGRAMACIÓN blogs blogger blogspot
Herramientas para paginas web
Conceptos de DREAMWEAVER.pptx
Arquitectura web 2
Fundamentos de Desarrollo Web
Clase 2 Lenguajes de Programación Web
codigos Html y css
Conceptos
Lenguajes de Programación para Paginas Web
Tecnologias de desarrollo web
Estándares que utilizamos en nuestra aplicación web
Publicidad

Último (20)

PPTX
Presentación de Redes de Datos modelo osi
PPTX
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
PPTX
REDES INFORMATICAS REDES INFORMATICAS.pptx
PDF
clase auditoria informatica 2025.........
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PPTX
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
PDF
Estrategia de apoyo tecnología grado 9-3
PDF
Plantilla para Diseño de Narrativas Transmedia.pdf
PDF
SAP Transportation Management para LSP, TM140 Col18
PPTX
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
PPTX
Propuesta BKP servidores con Acronis1.pptx
PPTX
Power Point Nicolás Carrasco (disertación Roblox).pptx
PPTX
Sesion 1 de microsoft power point - Clase 1
PDF
MÓDULO DE CALOR DE GRADO DE MEDIO DE FORMACIÓN PROFESIONAL
PPTX
Presentación PASANTIAS AuditorioOO..pptx
PDF
Liceo departamental MICRO BIT (1) 2.pdfbbbnn
PDF
Maste clas de estructura metálica y arquitectura
PPT
El-Gobierno-Electrónico-En-El-Estado-Bolivia
PPTX
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
PDF
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
Presentación de Redes de Datos modelo osi
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
REDES INFORMATICAS REDES INFORMATICAS.pptx
clase auditoria informatica 2025.........
historia_web de la creacion de un navegador_presentacion.pptx
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
Estrategia de apoyo tecnología grado 9-3
Plantilla para Diseño de Narrativas Transmedia.pdf
SAP Transportation Management para LSP, TM140 Col18
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
Propuesta BKP servidores con Acronis1.pptx
Power Point Nicolás Carrasco (disertación Roblox).pptx
Sesion 1 de microsoft power point - Clase 1
MÓDULO DE CALOR DE GRADO DE MEDIO DE FORMACIÓN PROFESIONAL
Presentación PASANTIAS AuditorioOO..pptx
Liceo departamental MICRO BIT (1) 2.pdfbbbnn
Maste clas de estructura metálica y arquitectura
El-Gobierno-Electrónico-En-El-Estado-Bolivia
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN

Introduccion al Desarrollo web - slides

  • 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.
  • 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.
  • 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/
  • 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