SlideShare una empresa de Scribd logo
1 de 11
INTRODUCCION AL
DISEÑO WEB
En informática, la Word Wide Web
(WWW) o Red informática mundial
es un sistema de distribución de información
basado en hipertexto o hipermedios enlazados
y accesibles a través de Internet.
Con un navegador web, un usuario visualiza
sitios web compuestos de páginas web
que pueden contener texto, imágenes, vídeos u otros
contenidos multimedia, y navega a través de esas páginas
usando hiperenlaces
¿Qué esWord wide web?
El hipertexto es una herramienta de
software con estructura no secuencial
que permite crear, agregar, enlazar
y compartir información de diversas
fuentes por medio de enlaces asociativos.
La forma más habitual de hipertexto en
informática es la de hipervínculos o referencias cruzadas automáticas
que van a otros documentos (lexías). Si el usuario selecciona un
hipervínculo, el programa muestra el documento enlazado
¿Qué es un documento hipertexto?
Hipermedia es el término con el que se designa al conjunto de métodos o
procedimientos para escribir, diseñar o componer contenidos que integren
soportes tales como: texto, imagen, video, audio, mapas y otros soportes de
información emergentes, de tal modo que el resultado obtenido, además
tenga la posibilidad de interactuar con los usuarios.
La estructura hipermedia de estos contenidos,
califica especialmente al conjunto de los mismos,
como herramienta de comunicación
e interacción humanas. En este sentido, un espacio
hipermedia es un ámbito, sin dimensiones físicas,
que alberga, potencia y estructura las actividades de las personas, como
puede verse en casos como, entre otros: Redes sociales, Plataformas de
colaboración online, Plataformas de enseñanza online, etc.
¿Qué es un documento hipermedia?
Una página web (o página electrónica, según el término recomendado por
la R.A.E.) es el nombre de un documento o información
electrónica adaptada para la Word Wide Web y que puede ser accedida
mediante un navegador .
Esta información se encuentra
generalmente en formato HTML o XHTML,
y puede proporcionar navegación a otras
páginas web mediante enlaces de hipertexto.
Las páginas web frecuentemente
incluyen otros recursos como
hojas de estilo en cascada, guiones (scripts)
e imágenes digitales, entre otros.
¿Que es un documento o pagina web?
Una página web está compuesta principalmente
por información (sólo texto y/o módulos multimedia)
así como por hiperenlaces;
además puede contener o asociar Hoja de estilo,
datos de estilo para especificar cómo
debe visualizarse, y también Aplicación
informática aplicaciones embebidas para
así hacerla interactiva.
Las páginas web son escritas en un lenguaje
de marcado que provee la capacidad de manejar e insertar hiperenlaces,
generalmente HTML.
¿Qué contiene una página web?
En inglés website o web site, un sitio web es un sitio (localización) en la
Word Wide Web que contiene documentos (páginas web) organizados
jerárquicamente.
Cada documento (página web) contiene texto y o gráficos que aparecen
como información digital en la pantalla de un ordenador.
Un sitio puede contener
una combinación de gráficos,
texto, audio, vídeo,
y otros materiales
dinámicos o estáticos.
¿Qué es un sitio web?
Son aplicaciones de software, que sirven para desarrollar paginas web
Hay varios editores:
Editores de texto sin formato.
Editor de texto con ventanas desdobladas.
EditoresWYSIWYG.
¿Editores de páginas web?
Un nombre de dominio. Es algo así como nuestro nombre en Internet (por
ejemplo: menosdiez.com). Este nombre lo usaremos en nuestra
web (www.menosdiez.com), en nuestras direcciones de correo electrónico o
email(info@menosdiez.com), etc. Hay varios tipos de dominio (".COM",
".NET", ".info", ".es", etc.). Independientemente del que elijas, tu web se verá
igual.
Un alojamiento. Para que tu web sea accesible a los usuarios de Internet es
necesario que esté instalada (o alojada) en un ordenador potente conectado
permanentemente a Internet a una gran velocidad (hacen falta más cosas,
pero la idea es ésta).
¿Qué necesita para tener una página en
internet?
Páginas Web Estáticas
Son páginas enfocadas principalmente a mostrar información permanente,
se crean mediante el lenguaje HTML, que no permite grandes libertades
para crear efectos o funcionalidades más allá de los enlaces, pero que
haciendo uso de otros recursos se pueden obtener muy buenos resultados
llegando a ser páginas muy similares a las dinámicas en cuanto a su
visualización se refiere.
Páginas Web Dinámicas
Se construyen haciendo uso de otros lenguajes de programación, siendo el
más utilizado de todos el PHP, con lo cual se pueden definir las funciones y
características que se deben cumplir de acuerdo a las necesidades.
¿Qué diferencia hay entre una página
web estática y una dinámica?
Un lenguaje de programación es el conjunto de sentencias que sirven para
decirle a una computadora qué es lo que tiene que hacer.
Las computadoras sólo entienden un lenguaje de programación llamado
binario, por lo que es necesario crear lenguajes que sean cercanos al del
humano y que permita la comunicación entre el programador y la
computadora, facilitando la tarea de programación.
Existen diversos lenguajes de programación
que se dividen en dos grandes tipos,
los lenguajes interpretados
y los lenguajes compilados.
¿Qué es un lenguaje de programación?

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño web
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WED
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
DISEÑO WEB
DISEÑO WEBDISEÑO WEB
DISEÑO WEB
 
Ppt construcción de un sitio web
Ppt construcción de un sitio webPpt construcción de un sitio web
Ppt construcción de un sitio web
 
Diseño web inclusivo
Diseño web inclusivoDiseño web inclusivo
Diseño web inclusivo
 
Internet y páginas web
Internet y páginas webInternet y páginas web
Internet y páginas web
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front end
 
Diseño y Maquetacion
Diseño y MaquetacionDiseño y Maquetacion
Diseño y Maquetacion
 
Joomla Cms
Joomla CmsJoomla Cms
Joomla Cms
 
Tipos de páginas web
Tipos  de páginas webTipos  de páginas web
Tipos de páginas web
 
Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013
 
Paginas web
Paginas webPaginas web
Paginas web
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
 
Fundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivosFundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivos
 

Destacado

Clase 1 - Diseño gráfico, proyecto y diseño digital
Clase 1 - Diseño gráfico, proyecto y diseño digitalClase 1 - Diseño gráfico, proyecto y diseño digital
Clase 1 - Diseño gráfico, proyecto y diseño digitalIvan Pianciola
 
Introduccion al diseño grafico
Introduccion al diseño graficoIntroduccion al diseño grafico
Introduccion al diseño graficoAnailil Abbate
 
Introduccion al Diseño Gráfico
Introduccion al Diseño GráficoIntroduccion al Diseño Gráfico
Introduccion al Diseño Gráficogambitguille
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Diego Casso
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digitalsalolaya
 
Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008
Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008
Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008faadudp
 
Charla Introducción al Diseño Gráfico
Charla Introducción al Diseño GráficoCharla Introducción al Diseño Gráfico
Charla Introducción al Diseño GráficoJose Luis Lopez Pino
 
Bloque 1 concepto de diseño, diseño digital y mensaje visual
Bloque 1  concepto de diseño, diseño digital y mensaje visualBloque 1  concepto de diseño, diseño digital y mensaje visual
Bloque 1 concepto de diseño, diseño digital y mensaje visualcarlosteni
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño WebRebelBangarang
 
Fundamentos del diseño RESUMEN
Fundamentos del diseño RESUMENFundamentos del diseño RESUMEN
Fundamentos del diseño RESUMENalexabarrero
 
Unidad 1 - Fundamentos del diseño gráfico
Unidad 1  - Fundamentos del diseño gráficoUnidad 1  - Fundamentos del diseño gráfico
Unidad 1 - Fundamentos del diseño gráficoFidel Romero
 
Modulo - Fundamentos del Diseño
Modulo - Fundamentos del DiseñoModulo - Fundamentos del Diseño
Modulo - Fundamentos del DiseñoUNIVA
 
Introducción al diseño de sitios web con dreamweaber
Introducción al diseño de sitios web con dreamweaberIntroducción al diseño de sitios web con dreamweaber
Introducción al diseño de sitios web con dreamweaberEducaweb
 
Clase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño GráficoClase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño GráficoDania Hernandez Moreno
 
Introducción al Diseño Gráfico
Introducción al Diseño GráficoIntroducción al Diseño Gráfico
Introducción al Diseño GráficoDiego Rodríguez
 

Destacado (17)

Clase 1 - Diseño gráfico, proyecto y diseño digital
Clase 1 - Diseño gráfico, proyecto y diseño digitalClase 1 - Diseño gráfico, proyecto y diseño digital
Clase 1 - Diseño gráfico, proyecto y diseño digital
 
Introduccion al diseño grafico
Introduccion al diseño graficoIntroduccion al diseño grafico
Introduccion al diseño grafico
 
Introduccion al Diseño Gráfico
Introduccion al Diseño GráficoIntroduccion al Diseño Gráfico
Introduccion al Diseño Gráfico
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Fundamentos para el diseño digital
Fundamentos para el diseño digitalFundamentos para el diseño digital
Fundamentos para el diseño digital
 
Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008
Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008
Taller Introducción al Diseño Gráfico II - Segundo Semestre 2008
 
Charla Introducción al Diseño Gráfico
Charla Introducción al Diseño GráficoCharla Introducción al Diseño Gráfico
Charla Introducción al Diseño Gráfico
 
Diseño digital y multimedia
Diseño digital y multimediaDiseño digital y multimedia
Diseño digital y multimedia
 
Bloque 1 concepto de diseño, diseño digital y mensaje visual
Bloque 1  concepto de diseño, diseño digital y mensaje visualBloque 1  concepto de diseño, diseño digital y mensaje visual
Bloque 1 concepto de diseño, diseño digital y mensaje visual
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 
Fundamentos del diseño RESUMEN
Fundamentos del diseño RESUMENFundamentos del diseño RESUMEN
Fundamentos del diseño RESUMEN
 
Unidad 1 - Fundamentos del diseño gráfico
Unidad 1  - Fundamentos del diseño gráficoUnidad 1  - Fundamentos del diseño gráfico
Unidad 1 - Fundamentos del diseño gráfico
 
Modulo - Fundamentos del Diseño
Modulo - Fundamentos del DiseñoModulo - Fundamentos del Diseño
Modulo - Fundamentos del Diseño
 
Introducción al diseño de sitios web con dreamweaber
Introducción al diseño de sitios web con dreamweaberIntroducción al diseño de sitios web con dreamweaber
Introducción al diseño de sitios web con dreamweaber
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Clase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño GráficoClase 1. Introducción al Diseño Gráfico
Clase 1. Introducción al Diseño Gráfico
 
Introducción al Diseño Gráfico
Introducción al Diseño GráficoIntroducción al Diseño Gráfico
Introducción al Diseño Gráfico
 

Similar a Introduccion al diseño web

El diseño de la web
El diseño de la webEl diseño de la web
El diseño de la websilviaxi21
 
Cristian presentacion
Cristian presentacionCristian presentacion
Cristian presentacionCristanCamilo
 
Qué es world wide web
Qué es world wide webQué es world wide web
Qué es world wide webLauJaim
 
Presentacion de informatica
Presentacion de informaticaPresentacion de informatica
Presentacion de informaticaalejaflorez
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina webanaangel33
 
Diseño de pagina web
Diseño de pagina web Diseño de pagina web
Diseño de pagina web anaangel33
 
Silvana castellanos 10 4
Silvana castellanos 10 4Silvana castellanos 10 4
Silvana castellanos 10 4castellanossl
 
Silvana castellanos 10 4
Silvana castellanos 10 4Silvana castellanos 10 4
Silvana castellanos 10 4castellanossl
 
Briggitti 2013 informatica 10 4
Briggitti 2013  informatica 10 4Briggitti 2013  informatica 10 4
Briggitti 2013 informatica 10 4briggitti
 
PRESENTACION ONLINE
PRESENTACION ONLINEPRESENTACION ONLINE
PRESENTACION ONLINElajulieth
 
Diseño web ladys padilla
Diseño web ladys padillaDiseño web ladys padilla
Diseño web ladys padillaLadysP
 
zaida polentino/DISEÑO WEB
zaida polentino/DISEÑO WEB zaida polentino/DISEÑO WEB
zaida polentino/DISEÑO WEB zaidapolentino
 
Presentación online
Presentación onlinePresentación online
Presentación onlinejazminl
 
Presentacion Pagina Web
Presentacion Pagina Web Presentacion Pagina Web
Presentacion Pagina Web Julieth Ortiz
 

Similar a Introduccion al diseño web (20)

El diseño de la web
El diseño de la webEl diseño de la web
El diseño de la web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Cristian presentacion
Cristian presentacionCristian presentacion
Cristian presentacion
 
Qué es world wide web
Qué es world wide webQué es world wide web
Qué es world wide web
 
Melissa presentacion
Melissa presentacionMelissa presentacion
Melissa presentacion
 
Presentacion de informatica
Presentacion de informaticaPresentacion de informatica
Presentacion de informatica
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina web
 
Diseño de pagina web
Diseño de pagina web Diseño de pagina web
Diseño de pagina web
 
Silvana castellanos 10 4
Silvana castellanos 10 4Silvana castellanos 10 4
Silvana castellanos 10 4
 
Silvana castellanos 10 4
Silvana castellanos 10 4Silvana castellanos 10 4
Silvana castellanos 10 4
 
Comunicación.. lucimar
Comunicación.. lucimarComunicación.. lucimar
Comunicación.. lucimar
 
Briggitti 2013 informatica 10 4
Briggitti 2013  informatica 10 4Briggitti 2013  informatica 10 4
Briggitti 2013 informatica 10 4
 
Referente conceptual
Referente conceptualReferente conceptual
Referente conceptual
 
PRESENTACION ONLINE
PRESENTACION ONLINEPRESENTACION ONLINE
PRESENTACION ONLINE
 
Diseño web ladys padilla
Diseño web ladys padillaDiseño web ladys padilla
Diseño web ladys padilla
 
Diseño web
Diseño webDiseño web
Diseño web
 
zaida polentino/DISEÑO WEB
zaida polentino/DISEÑO WEB zaida polentino/DISEÑO WEB
zaida polentino/DISEÑO WEB
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina web
 
Presentación online
Presentación onlinePresentación online
Presentación online
 
Presentacion Pagina Web
Presentacion Pagina Web Presentacion Pagina Web
Presentacion Pagina Web
 

Introduccion al diseño web

  • 2. En informática, la Word Wide Web (WWW) o Red informática mundial es un sistema de distribución de información basado en hipertexto o hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces ¿Qué esWord wide web?
  • 3. El hipertexto es una herramienta de software con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos. La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexías). Si el usuario selecciona un hipervínculo, el programa muestra el documento enlazado ¿Qué es un documento hipertexto?
  • 4. Hipermedia es el término con el que se designa al conjunto de métodos o procedimientos para escribir, diseñar o componer contenidos que integren soportes tales como: texto, imagen, video, audio, mapas y otros soportes de información emergentes, de tal modo que el resultado obtenido, además tenga la posibilidad de interactuar con los usuarios. La estructura hipermedia de estos contenidos, califica especialmente al conjunto de los mismos, como herramienta de comunicación e interacción humanas. En este sentido, un espacio hipermedia es un ámbito, sin dimensiones físicas, que alberga, potencia y estructura las actividades de las personas, como puede verse en casos como, entre otros: Redes sociales, Plataformas de colaboración online, Plataformas de enseñanza online, etc. ¿Qué es un documento hipermedia?
  • 5. Una página web (o página electrónica, según el término recomendado por la R.A.E.) es el nombre de un documento o información electrónica adaptada para la Word Wide Web y que puede ser accedida mediante un navegador . Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imágenes digitales, entre otros. ¿Que es un documento o pagina web?
  • 6. Una página web está compuesta principalmente por información (sólo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o asociar Hoja de estilo, datos de estilo para especificar cómo debe visualizarse, y también Aplicación informática aplicaciones embebidas para así hacerla interactiva. Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML. ¿Qué contiene una página web?
  • 7. En inglés website o web site, un sitio web es un sitio (localización) en la Word Wide Web que contiene documentos (páginas web) organizados jerárquicamente. Cada documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos. ¿Qué es un sitio web?
  • 8. Son aplicaciones de software, que sirven para desarrollar paginas web Hay varios editores: Editores de texto sin formato. Editor de texto con ventanas desdobladas. EditoresWYSIWYG. ¿Editores de páginas web?
  • 9. Un nombre de dominio. Es algo así como nuestro nombre en Internet (por ejemplo: menosdiez.com). Este nombre lo usaremos en nuestra web (www.menosdiez.com), en nuestras direcciones de correo electrónico o email(info@menosdiez.com), etc. Hay varios tipos de dominio (".COM", ".NET", ".info", ".es", etc.). Independientemente del que elijas, tu web se verá igual. Un alojamiento. Para que tu web sea accesible a los usuarios de Internet es necesario que esté instalada (o alojada) en un ordenador potente conectado permanentemente a Internet a una gran velocidad (hacen falta más cosas, pero la idea es ésta). ¿Qué necesita para tener una página en internet?
  • 10. Páginas Web Estáticas Son páginas enfocadas principalmente a mostrar información permanente, se crean mediante el lenguaje HTML, que no permite grandes libertades para crear efectos o funcionalidades más allá de los enlaces, pero que haciendo uso de otros recursos se pueden obtener muy buenos resultados llegando a ser páginas muy similares a las dinámicas en cuanto a su visualización se refiere. Páginas Web Dinámicas Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP, con lo cual se pueden definir las funciones y características que se deben cumplir de acuerdo a las necesidades. ¿Qué diferencia hay entre una página web estática y una dinámica?
  • 11. Un lenguaje de programación es el conjunto de sentencias que sirven para decirle a una computadora qué es lo que tiene que hacer. Las computadoras sólo entienden un lenguaje de programación llamado binario, por lo que es necesario crear lenguajes que sean cercanos al del humano y que permita la comunicación entre el programador y la computadora, facilitando la tarea de programación. Existen diversos lenguajes de programación que se dividen en dos grandes tipos, los lenguajes interpretados y los lenguajes compilados. ¿Qué es un lenguaje de programación?