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
Publicidad

Más contenido relacionado

La actualidad más candente (20)

CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating NavigationCSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
Vidya Ananthanarayanan
 
오픈소스가이드 win,c++
오픈소스가이드 win,c++오픈소스가이드 win,c++
오픈소스가이드 win,c++
jdo
 
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1  ドメイン駆動設計の基本を理解する3週連続DDDその1  ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
 
Redmineを快適に使うためのおすすめ初期設定
Redmineを快適に使うためのおすすめ初期設定Redmineを快適に使うためのおすすめ初期設定
Redmineを快適に使うためのおすすめ初期設定
Go Maeda
 
『自走プログラマー』 が我々に必要だった理由
『自走プログラマー』 が我々に必要だった理由『自走プログラマー』 が我々に必要だった理由
『自走プログラマー』 が我々に必要だった理由
Takayuki Shimizukawa
 
Mozilla firefox
Mozilla firefoxMozilla firefox
Mozilla firefox
Jesus_Antonio_Barragan
 
Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS
Alejandro Miguel
 
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
 
BillRun Docker Introduction
BillRun Docker IntroductionBillRun Docker Introduction
BillRun Docker Introduction
Ofer Cohen
 
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解するドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
増田 亨
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Tema 1 software libre y comercial
Tema 1 software libre y comercialTema 1 software libre y comercial
Tema 1 software libre y comercial
lucy pech quiab
 
Tutorial de Google Sites en PDF
Tutorial de Google Sites en PDFTutorial de Google Sites en PDF
Tutorial de Google Sites en PDF
Abrirllave
 
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
 
ドメイン駆動設計とは何か 【入門編】
ドメイン駆動設計とは何か 【入門編】ドメイン駆動設計とは何か 【入門編】
ドメイン駆動設計とは何か 【入門編】
増田 亨
 
Presentación: Todo acerca de slidebean
Presentación: Todo acerca de slidebean Presentación: Todo acerca de slidebean
Presentación: Todo acerca de slidebean
saraifernandez312
 
Google Sites Presentacion
Google Sites PresentacionGoogle Sites Presentacion
Google Sites Presentacion
Manuel López Caparrós
 
Lychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来についてLychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来について
agileware_jp
 
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating NavigationCSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
Vidya Ananthanarayanan
 
오픈소스가이드 win,c++
오픈소스가이드 win,c++오픈소스가이드 win,c++
오픈소스가이드 win,c++
jdo
 
3週連続DDDその1 ドメイン駆動設計の基本を理解する
3週連続DDDその1  ドメイン駆動設計の基本を理解する3週連続DDDその1  ドメイン駆動設計の基本を理解する
3週連続DDDその1 ドメイン駆動設計の基本を理解する
増田 亨
 
Redmineを快適に使うためのおすすめ初期設定
Redmineを快適に使うためのおすすめ初期設定Redmineを快適に使うためのおすすめ初期設定
Redmineを快適に使うためのおすすめ初期設定
Go Maeda
 
『自走プログラマー』 が我々に必要だった理由
『自走プログラマー』 が我々に必要だった理由『自走プログラマー』 が我々に必要だった理由
『自走プログラマー』 が我々に必要だった理由
Takayuki Shimizukawa
 
Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS
Alejandro Miguel
 
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
 
BillRun Docker Introduction
BillRun Docker IntroductionBillRun Docker Introduction
BillRun Docker Introduction
Ofer Cohen
 
ドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解するドメイン駆動設計 基本を理解する
ドメイン駆動設計 基本を理解する
増田 亨
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Tema 1 software libre y comercial
Tema 1 software libre y comercialTema 1 software libre y comercial
Tema 1 software libre y comercial
lucy pech quiab
 
Tutorial de Google Sites en PDF
Tutorial de Google Sites en PDFTutorial de Google Sites en PDF
Tutorial de Google Sites en PDF
Abrirllave
 
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
 
ドメイン駆動設計とは何か 【入門編】
ドメイン駆動設計とは何か 【入門編】ドメイン駆動設計とは何か 【入門編】
ドメイン駆動設計とは何か 【入門編】
増田 亨
 
Presentación: Todo acerca de slidebean
Presentación: Todo acerca de slidebean Presentación: Todo acerca de slidebean
Presentación: Todo acerca de slidebean
saraifernandez312
 
Lychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来についてLychee Redmine最新機能紹介とLycheeの未来について
Lychee Redmine最新機能紹介とLycheeの未来について
agileware_jp
 

Similar a Introduccion al Desarrollo web - slides (20)

Semana 2 HTML y CSS
Semana 2   HTML y CSSSemana 2   HTML y CSS
Semana 2 HTML y CSS
Richard Eliseo Mendoza Gafaro
 
Tecnologías web.pptx
Tecnologías web.pptxTecnologías web.pptx
Tecnologías web.pptx
GabrielCarbas
 
introducción tecnologías web
introducción tecnologías webintroducción tecnologías web
introducción tecnologías web
evelynfarro06
 
Colegio de bachilleres del estado de oaxac1 (1)
Colegio de bachilleres del estado de oaxac1 (1)Colegio de bachilleres del estado de oaxac1 (1)
Colegio de bachilleres del estado de oaxac1 (1)
Carlos Castillo Reyna
 
Revision de tecnologias web
Revision de tecnologias webRevision de tecnologias web
Revision de tecnologias web
FRISLY5
 
Ekipo 2
Ekipo 2Ekipo 2
Ekipo 2
handy.ale
 
Navegar por la web
Navegar por la webNavegar por la web
Navegar por la web
Jose Elias Duran Roa
 
EQUIPO 2,LAS AGUILAS
EQUIPO 2,LAS AGUILASEQUIPO 2,LAS AGUILAS
EQUIPO 2,LAS AGUILAS
UNIV DE CIENCIAS Y ARTES
 
Investigacion de pagina web
Investigacion de pagina webInvestigacion de pagina web
Investigacion de pagina web
Rosa Elena Diaz Ordaz
 
DEBER DE PROGRAMACIÓN blogs blogger blogspot
DEBER DE PROGRAMACIÓN blogs blogger blogspotDEBER DE PROGRAMACIÓN blogs blogger blogspot
DEBER DE PROGRAMACIÓN blogs blogger blogspot
KATHYALILIBETH
 
Herramientas para paginas web
Herramientas para  paginas webHerramientas para  paginas web
Herramientas para paginas web
Anita Serna Marin
 
Conceptos de DREAMWEAVER.pptx
Conceptos de DREAMWEAVER.pptxConceptos de DREAMWEAVER.pptx
Conceptos de DREAMWEAVER.pptx
danielaortizmonzon
 
Arquitectura web 2
Arquitectura web 2Arquitectura web 2
Arquitectura web 2
vekerly
 
Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web
Alexander
 
Clase 2 Lenguajes de Programación Web
Clase 2 Lenguajes de Programación WebClase 2 Lenguajes de Programación Web
Clase 2 Lenguajes de Programación Web
José Ricardo Tillero Giménez
 
codigos Html y css
codigos Html y csscodigos Html y css
codigos Html y css
Jesus Palomino
 
Conceptos
ConceptosConceptos
Conceptos
Juan Alvarez
 
Lenguajes de Programación para Paginas Web
Lenguajes de Programación para Paginas WebLenguajes de Programación para Paginas Web
Lenguajes de Programación para Paginas Web
Aramis Andrade
 
Tecnologias de desarrollo web
Tecnologias de desarrollo webTecnologias de desarrollo web
Tecnologias de desarrollo web
Jhon Alexander Atencio Perez
 
Estándares que utilizamos en nuestra aplicación web
Estándares que utilizamos en nuestra aplicación webEstándares que utilizamos en nuestra aplicación web
Estándares que utilizamos en nuestra aplicación web
luis20132014
 
Tecnologías web.pptx
Tecnologías web.pptxTecnologías web.pptx
Tecnologías web.pptx
GabrielCarbas
 
introducción tecnologías web
introducción tecnologías webintroducción tecnologías web
introducción tecnologías web
evelynfarro06
 
Colegio de bachilleres del estado de oaxac1 (1)
Colegio de bachilleres del estado de oaxac1 (1)Colegio de bachilleres del estado de oaxac1 (1)
Colegio de bachilleres del estado de oaxac1 (1)
Carlos Castillo Reyna
 
Revision de tecnologias web
Revision de tecnologias webRevision de tecnologias web
Revision de tecnologias web
FRISLY5
 
DEBER DE PROGRAMACIÓN blogs blogger blogspot
DEBER DE PROGRAMACIÓN blogs blogger blogspotDEBER DE PROGRAMACIÓN blogs blogger blogspot
DEBER DE PROGRAMACIÓN blogs blogger blogspot
KATHYALILIBETH
 
Herramientas para paginas web
Herramientas para  paginas webHerramientas para  paginas web
Herramientas para paginas web
Anita Serna Marin
 
Arquitectura web 2
Arquitectura web 2Arquitectura web 2
Arquitectura web 2
vekerly
 
Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web
Alexander
 
Lenguajes de Programación para Paginas Web
Lenguajes de Programación para Paginas WebLenguajes de Programación para Paginas Web
Lenguajes de Programación para Paginas Web
Aramis Andrade
 
Estándares que utilizamos en nuestra aplicación web
Estándares que utilizamos en nuestra aplicación webEstándares que utilizamos en nuestra aplicación web
Estándares que utilizamos en nuestra aplicación web
luis20132014
 
Publicidad

Último (20)

EDICIÓN DE VIDEO. CLASE DE TICS II. UNIREU
EDICIÓN DE VIDEO. CLASE DE TICS II. UNIREUEDICIÓN DE VIDEO. CLASE DE TICS II. UNIREU
EDICIÓN DE VIDEO. CLASE DE TICS II. UNIREU
AndrsCastro58
 
ciberseguridad habilidades Digitales.pdf
ciberseguridad habilidades Digitales.pdfciberseguridad habilidades Digitales.pdf
ciberseguridad habilidades Digitales.pdf
dayanacampos31
 
SISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIA
SISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIASISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIA
SISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIA
IVAN CAMPUZANO
 
MÓDULO I. (conceptos generales de higiene ocupacional)
MÓDULO I. (conceptos generales de higiene ocupacional)MÓDULO I. (conceptos generales de higiene ocupacional)
MÓDULO I. (conceptos generales de higiene ocupacional)
AimeeCoronel2
 
Presentación Proyecto de las Primeras Civilizaciones Mesopotamia – Egipto – ...
Presentación Proyecto de las Primeras Civilizaciones  Mesopotamia – Egipto – ...Presentación Proyecto de las Primeras Civilizaciones  Mesopotamia – Egipto – ...
Presentación Proyecto de las Primeras Civilizaciones Mesopotamia – Egipto – ...
DiosymarSuarez
 
Windows 12: El futuro PPTX and PDF file.pptx
Windows 12: El futuro PPTX and PDF file.pptxWindows 12: El futuro PPTX and PDF file.pptx
Windows 12: El futuro PPTX and PDF file.pptx
carloscubillos36
 
SeguridadCookiesInformacionLegalPresentación.pdf
SeguridadCookiesInformacionLegalPresentación.pdfSeguridadCookiesInformacionLegalPresentación.pdf
SeguridadCookiesInformacionLegalPresentación.pdf
SamuelMancebo2
 
Diseño de una red de comunicaciones en una vivienda.pptx
Diseño de una red de comunicaciones en una vivienda.pptxDiseño de una red de comunicaciones en una vivienda.pptx
Diseño de una red de comunicaciones en una vivienda.pptx
dvdgrcbd
 
Presentación de Héctor Orruño para Xeno Visual Studies II
Presentación de Héctor Orruño para Xeno Visual Studies IIPresentación de Héctor Orruño para Xeno Visual Studies II
Presentación de Héctor Orruño para Xeno Visual Studies II
hectororruno
 
presentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptxpresentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptx
CharlesBergeyre1
 
HABILIDADES DIGITALES - CIBERSEGURIDAD.pdf
HABILIDADES DIGITALES - CIBERSEGURIDAD.pdfHABILIDADES DIGITALES - CIBERSEGURIDAD.pdf
HABILIDADES DIGITALES - CIBERSEGURIDAD.pdf
jairocaviedes1
 
Recurso educativo digital videos educativos
Recurso educativo digital  videos educativosRecurso educativo digital  videos educativos
Recurso educativo digital videos educativos
KARLAKARINABALDARRAG
 
Análisis de pagina web. Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...
Análisis de pagina web.  Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...Análisis de pagina web.  Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...
Análisis de pagina web. Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...
alondramedina2025
 
presentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptxpresentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptx
CharlesBergeyre1
 
Redes industriales yde instrumentacion.pptx
Redes industriales yde instrumentacion.pptxRedes industriales yde instrumentacion.pptx
Redes industriales yde instrumentacion.pptx
TeresitaXalapa
 
StacksTecnológicosInformaciónPresentación.pdf
StacksTecnológicosInformaciónPresentación.pdfStacksTecnológicosInformaciónPresentación.pdf
StacksTecnológicosInformaciónPresentación.pdf
SamuelMancebo2
 
Cavada PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdf
Cavada  PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdfCavada  PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdf
Cavada PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdf
brueghel
 
taller 5 ciberseguridad habilidades digitales
taller 5 ciberseguridad habilidades digitalestaller 5 ciberseguridad habilidades digitales
taller 5 ciberseguridad habilidades digitales
juancardenaslosada
 
Windows 11 25H2 PPTX file: PDF y PPTX.pptx
Windows 11 25H2 PPTX file: PDF y PPTX.pptxWindows 11 25H2 PPTX file: PDF y PPTX.pptx
Windows 11 25H2 PPTX file: PDF y PPTX.pptx
carloscubillos36
 
Riesgos Ergonómicos y Riesgos Psicosociales
Riesgos Ergonómicos y Riesgos PsicosocialesRiesgos Ergonómicos y Riesgos Psicosociales
Riesgos Ergonómicos y Riesgos Psicosociales
AimeeCoronel2
 
EDICIÓN DE VIDEO. CLASE DE TICS II. UNIREU
EDICIÓN DE VIDEO. CLASE DE TICS II. UNIREUEDICIÓN DE VIDEO. CLASE DE TICS II. UNIREU
EDICIÓN DE VIDEO. CLASE DE TICS II. UNIREU
AndrsCastro58
 
ciberseguridad habilidades Digitales.pdf
ciberseguridad habilidades Digitales.pdfciberseguridad habilidades Digitales.pdf
ciberseguridad habilidades Digitales.pdf
dayanacampos31
 
SISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIA
SISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIASISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIA
SISTEMAS OPERATIVOS, LA MAGIA DE LA TECNOLOGIA
IVAN CAMPUZANO
 
MÓDULO I. (conceptos generales de higiene ocupacional)
MÓDULO I. (conceptos generales de higiene ocupacional)MÓDULO I. (conceptos generales de higiene ocupacional)
MÓDULO I. (conceptos generales de higiene ocupacional)
AimeeCoronel2
 
Presentación Proyecto de las Primeras Civilizaciones Mesopotamia – Egipto – ...
Presentación Proyecto de las Primeras Civilizaciones  Mesopotamia – Egipto – ...Presentación Proyecto de las Primeras Civilizaciones  Mesopotamia – Egipto – ...
Presentación Proyecto de las Primeras Civilizaciones Mesopotamia – Egipto – ...
DiosymarSuarez
 
Windows 12: El futuro PPTX and PDF file.pptx
Windows 12: El futuro PPTX and PDF file.pptxWindows 12: El futuro PPTX and PDF file.pptx
Windows 12: El futuro PPTX and PDF file.pptx
carloscubillos36
 
SeguridadCookiesInformacionLegalPresentación.pdf
SeguridadCookiesInformacionLegalPresentación.pdfSeguridadCookiesInformacionLegalPresentación.pdf
SeguridadCookiesInformacionLegalPresentación.pdf
SamuelMancebo2
 
Diseño de una red de comunicaciones en una vivienda.pptx
Diseño de una red de comunicaciones en una vivienda.pptxDiseño de una red de comunicaciones en una vivienda.pptx
Diseño de una red de comunicaciones en una vivienda.pptx
dvdgrcbd
 
Presentación de Héctor Orruño para Xeno Visual Studies II
Presentación de Héctor Orruño para Xeno Visual Studies IIPresentación de Héctor Orruño para Xeno Visual Studies II
Presentación de Héctor Orruño para Xeno Visual Studies II
hectororruno
 
presentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptxpresentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptx
CharlesBergeyre1
 
HABILIDADES DIGITALES - CIBERSEGURIDAD.pdf
HABILIDADES DIGITALES - CIBERSEGURIDAD.pdfHABILIDADES DIGITALES - CIBERSEGURIDAD.pdf
HABILIDADES DIGITALES - CIBERSEGURIDAD.pdf
jairocaviedes1
 
Recurso educativo digital videos educativos
Recurso educativo digital  videos educativosRecurso educativo digital  videos educativos
Recurso educativo digital videos educativos
KARLAKARINABALDARRAG
 
Análisis de pagina web. Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...
Análisis de pagina web.  Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...Análisis de pagina web.  Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...
Análisis de pagina web. Caso: D&D Inn Tibana Caracas, Catalonia Hotels & Res...
alondramedina2025
 
presentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptxpresentacion-baterias-y-acumuladores-redox.pptx
presentacion-baterias-y-acumuladores-redox.pptx
CharlesBergeyre1
 
Redes industriales yde instrumentacion.pptx
Redes industriales yde instrumentacion.pptxRedes industriales yde instrumentacion.pptx
Redes industriales yde instrumentacion.pptx
TeresitaXalapa
 
StacksTecnológicosInformaciónPresentación.pdf
StacksTecnológicosInformaciónPresentación.pdfStacksTecnológicosInformaciónPresentación.pdf
StacksTecnológicosInformaciónPresentación.pdf
SamuelMancebo2
 
Cavada PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdf
Cavada  PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdfCavada  PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdf
Cavada PROCESO DE INTEGRACIÓN DE LA COLONIA FLAMENCA 01.pdf
brueghel
 
taller 5 ciberseguridad habilidades digitales
taller 5 ciberseguridad habilidades digitalestaller 5 ciberseguridad habilidades digitales
taller 5 ciberseguridad habilidades digitales
juancardenaslosada
 
Windows 11 25H2 PPTX file: PDF y PPTX.pptx
Windows 11 25H2 PPTX file: PDF y PPTX.pptxWindows 11 25H2 PPTX file: PDF y PPTX.pptx
Windows 11 25H2 PPTX file: PDF y PPTX.pptx
carloscubillos36
 
Riesgos Ergonómicos y Riesgos Psicosociales
Riesgos Ergonómicos y Riesgos PsicosocialesRiesgos Ergonómicos y Riesgos Psicosociales
Riesgos Ergonómicos y Riesgos Psicosociales
AimeeCoronel2
 
Publicidad

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