SlideShare una empresa de Scribd logo
1 de 18
Modelado de Optimización I
 En el pasado la creación de páginas web
resultaba una tarea solo accesible a expertos,
pero en la actualidad, gracias al desarrollo de
las tecnologías y nuevas aplicaciones es cada
vez una realidad más para los usuarios básicos
de la red de redes.
 EL LENGAJE WEB: HTML
 El lenguaje utilizado en el WWW para el correcto funcionamiento de
la misma es el HTML. Este lenguaje, acrónimo inglés de Hypertext
Markup Language (lenguaje de etiquetado de documentos
hipertextual), es un lenguaje de marcación diseñado para
estructurar textos y presentarlos en forma de hipertexto, que es el
formato estándar de las páginas web. Gracias a Internet y a los
navegadores del tipo Internet Explorer, Opera, Firefox o Netscape,
el HTML se ha convertido en uno de los formatos más populares que
existen para la construcción de documentos.
 El protocolo de comunicación web: HTTP
 El protocolo de transferencia de hipertexto (HTTP,
HyperText Transfer Protocol) es el protocolo usado en
cada transacción de la Web. El hipertexto es el
contenido de las páginas web, y el protocolo de
transferencia es el sistema mediante el cual se envían
las peticiones de acceder a una página web, y la
respuesta de esa web, remitiendo la información que
se verá en pantalla. También sirve el protocolo para
enviar información adicional en ambos sentidos, como
formularios con mensajes y otros similares.
 HTTP dispone de una variante cifrada
mediante SSL llamada HTTPS.
 El protocolo de transferencia de ficheros: FTP
 El protocolo FTP (del inglés File Transfer Protocol,
protocolo de transferencia de ficheros) es el ideal
para transferir grandes bloques de datos por la red. Y
es la herramienta más ampliamente utilizada para
conectar la estructura local con la estructura remota
de la WWW y depositar allí los documentos y/o
archivos que más tarde deberan verse publicados la
Web (ver imagen).
 La mayoría de las páginas web a nivel
mundial son subidas a los respectivos
servidores mediante este protocolo.
INTERNET
 El color es uno de los elementos más
poderosos de que disponemos a la hora de
comunicar emociones en un sitio web. La
mayoría de estas emociones son percibidas
de un modo sutil e inconsciente.
 El color es subjetivo: cada persona,
dependiendo de sus rasgos culturales o
sociales, su estado de ánimo u otras
circunstancias personales, lo va a
interpretar de manera distinta.
 Herramientas que podemos utilizar para
diseñar una página web con excelentes
resultados.
› Dreamweaver
› Eclipse
› Netbeans, etc.
 Software de Diseño Gráfico
› Software que combina retoque fotográfico y dibujo
vectorial
 Software FTP
› Externo
› Interno
 Servidor Web
› IIS
› Apache
 Base de Datos
› MySql
› Sql Server
› Access, etc.
 Los princiapales problemas que nos podemos encontrar a la hora
de decidir el diseño para nuestra web.
 Uso de Flash
Las Facilidades y Utilidades que presenta flash son innumerables a
la hora de interactividad, e impacto visual. Desafortunadamente
las webs 100% flash pueden traer algunos problemas en la
incorporación a buscadores.
Interactividad
Principales problemas que se presenta en la interactividad, es la
complejidad que el diseñador le agrega al site, logrando así que el
usuario navegue secciones de subsecciones y quede perdido
dentro de la página. Una página deberá ser lo que se llama APT (a
prueba de tontos) así logra el objetivo deseado, que el usuario
encuentre su búsqueda.
 Incompatibilidad
Hay que tener mucho cuidado cuando se hacen páginas
dinámicas, con php, asp, etc... Y también con los CSS que se va a
incluir en la hoja de estilo, esto puede traer algunos dolores de
cabeza ya que los exploradores interpretan diferente y algunos
dejan pasar de largo código y otros no, o definen código diferente.
 Disputa no solo con el cliente
 Formularios Web
Estos mismos si bien son útiles, pueden lograr que un usuario deje de
hacer su consulta y se retire del sitio. En mi opinión estos formularios
deben ser absolutamente claros y concisos, y por supuesto evitar
hacer preguntas inútiles, sin olvidar que el formulario debe ser corto.
 Uso desconsiderado de Ventanas
Actualmente nos encontramos invadidos por las
publicidades en pop-ups, evite el uso de pop-ups en el sitio,
primero porque ya los exploradores más vendidos traen una
herramienta para bloquearlos y resulta molesto para el
visitante tener que activarlo para ver el
 El desarrollo de HTML junto con ciertos
elementos JavaScript y PHP, JSP o ASP puede facilitar en
gran medida su mantenimiento y permitir la
implementación de funcionalidad sencilla (e.g. Un
formulario de contacto).
 Gestor de Contenidos
 Definición: Sistema que forma la estructura de soporte para la
creación y administración de información en un sitio web
(también conocidos como CMS – “Content Management
System”)
 Es un sistema que se instala en el servidor y genera las páginas
web cuando los internautas las solicitan, se puede por tanto
generar contenido dinámico dependiendo del usuario. Disponen
de una parte pública que ven todos los internautas y de una
sección privada o panel de control
 La funcionalidad del sitio Web
 Su facilidad de mantenimiento y
actualización de contenidos
 Las necesidades (y por tanto precio) del
servidor donde se alojará la web
 Disponibilidad de actualizaciones de
seguridad.
 Velocidad de carga de la web.
 La usabilidad de los distintos elementos
 Visibilidad en los buscadores.
 Proyecto Web
› Documento proyecto
 Caratula
 Objetivo del Proyecto
 Objetivos específicos
 Alcance del Proyecto
 Analisis UML –
 Casos de Uso, Modelo Entidad Relacion
› Sistema Web
 http://www.aspnetya.com.ar/
 http://tejedoresdelweb.com
 http://msdn.microsoft.com/es-bo

Más contenido relacionado

La actualidad más candente (20)

pagina web
pagina webpagina web
pagina web
 
Tecnologias web
Tecnologias webTecnologias web
Tecnologias web
 
Examen del segundo parcial (Programacion web 1) - Erick Lozada
Examen del segundo parcial (Programacion web 1) - Erick LozadaExamen del segundo parcial (Programacion web 1) - Erick Lozada
Examen del segundo parcial (Programacion web 1) - Erick Lozada
 
introducción tecnologías web
introducción tecnologías webintroducción tecnologías web
introducción tecnologías web
 
Andres vaca rivas_dg
Andres vaca rivas_dgAndres vaca rivas_dg
Andres vaca rivas_dg
 
Dias positivas de dai
Dias positivas de daiDias positivas de dai
Dias positivas de dai
 
Wed 2.0 y 3.0
Wed 2.0 y 3.0Wed 2.0 y 3.0
Wed 2.0 y 3.0
 
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la WebHerramientas y Tecnologías para la Web
Herramientas y Tecnologías para la Web
 
Paginas web
Paginas webPaginas web
Paginas web
 
CONCEPTOS WEB
CONCEPTOS WEBCONCEPTOS WEB
CONCEPTOS WEB
 
Elemento1
Elemento1Elemento1
Elemento1
 
Elemento1
Elemento1Elemento1
Elemento1
 
Proyecto de web
Proyecto de webProyecto de web
Proyecto de web
 
"Publicar en Internet"
"Publicar en Internet""Publicar en Internet"
"Publicar en Internet"
 
1 item
1 item1 item
1 item
 
Uso y administracion de paginas web
Uso y administracion de paginas webUso y administracion de paginas web
Uso y administracion de paginas web
 
presentacion de contenidos en web.
presentacion de contenidos en web.presentacion de contenidos en web.
presentacion de contenidos en web.
 
Diapositivasblog
DiapositivasblogDiapositivasblog
Diapositivasblog
 
2.2 lenguajes del lado cliente
2.2 lenguajes del lado cliente2.2 lenguajes del lado cliente
2.2 lenguajes del lado cliente
 
Desarrollo de aplicaciones web
Desarrollo de aplicaciones webDesarrollo de aplicaciones web
Desarrollo de aplicaciones web
 

Destacado

Diseño y comunicación para páginas web
Diseño y comunicación para páginas webDiseño y comunicación para páginas web
Diseño y comunicación para páginas webOrlando Carranza V.
 
Evaluación de la Usabilidad de un sitio web
Evaluación de la Usabilidad de un sitio webEvaluación de la Usabilidad de un sitio web
Evaluación de la Usabilidad de un sitio webRicardo Arce
 
Ej. logotipos óvalo y ovoide
 Ej. logotipos óvalo y ovoide Ej. logotipos óvalo y ovoide
Ej. logotipos óvalo y ovoide3Raquel
 
Bases Geométricas del Universo
Bases Geométricas del UniversoBases Geométricas del Universo
Bases Geométricas del UniversoDaniDofinet
 
Teoría de el imaginario colectivo rubén ramírez sandra goméz liliana silveti
Teoría de el imaginario colectivo rubén ramírez sandra goméz liliana silvetiTeoría de el imaginario colectivo rubén ramírez sandra goméz liliana silveti
Teoría de el imaginario colectivo rubén ramírez sandra goméz liliana silvetiSandy Gómez
 
Jung, carl gustav arquetipos e inconsciente colectivo
Jung, carl gustav   arquetipos e inconsciente colectivoJung, carl gustav   arquetipos e inconsciente colectivo
Jung, carl gustav arquetipos e inconsciente colectivoIngrid Carolina Olivas
 
Logo Miguel Angel SáNchez
Logo Miguel Angel SáNchezLogo Miguel Angel SáNchez
Logo Miguel Angel SáNchezdibujotecnicoin
 
Arquetipos e inconsciente colectivo en las artes plásticas
Arquetipos e inconsciente colectivo en las artes plásticasArquetipos e inconsciente colectivo en las artes plásticas
Arquetipos e inconsciente colectivo en las artes plásticasAnabel Ventura Palomino
 
00016 estrategia de publicidad-la redaccion publicitaria
00016 estrategia de publicidad-la redaccion publicitaria00016 estrategia de publicidad-la redaccion publicitaria
00016 estrategia de publicidad-la redaccion publicitariaUTP
 
Los arquetipos de Jung y la personalidad de nuestra marca
Los arquetipos de Jung y la personalidad de nuestra marcaLos arquetipos de Jung y la personalidad de nuestra marca
Los arquetipos de Jung y la personalidad de nuestra marcaVanesa Ortega
 
Logos y escudos con óvalos y ovoides
Logos y escudos con óvalos y ovoidesLogos y escudos con óvalos y ovoides
Logos y escudos con óvalos y ovoidesIES.Mónico Sánchez
 
Características de los 12 arquetipos de personalidad corporativa
Características de los 12 arquetipos de personalidad corporativaCaracterísticas de los 12 arquetipos de personalidad corporativa
Características de los 12 arquetipos de personalidad corporativaFreelance
 

Destacado (20)

Diseño y comunicación para páginas web
Diseño y comunicación para páginas webDiseño y comunicación para páginas web
Diseño y comunicación para páginas web
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Evaluación de la Usabilidad de un sitio web
Evaluación de la Usabilidad de un sitio webEvaluación de la Usabilidad de un sitio web
Evaluación de la Usabilidad de un sitio web
 
Ej. logotipos óvalo y ovoide
 Ej. logotipos óvalo y ovoide Ej. logotipos óvalo y ovoide
Ej. logotipos óvalo y ovoide
 
Bases Geométricas del Universo
Bases Geométricas del UniversoBases Geométricas del Universo
Bases Geométricas del Universo
 
Teoría de el imaginario colectivo rubén ramírez sandra goméz liliana silveti
Teoría de el imaginario colectivo rubén ramírez sandra goméz liliana silvetiTeoría de el imaginario colectivo rubén ramírez sandra goméz liliana silveti
Teoría de el imaginario colectivo rubén ramírez sandra goméz liliana silveti
 
El rito simbólico
El rito simbólicoEl rito simbólico
El rito simbólico
 
Jung, carl gustav arquetipos e inconsciente colectivo
Jung, carl gustav   arquetipos e inconsciente colectivoJung, carl gustav   arquetipos e inconsciente colectivo
Jung, carl gustav arquetipos e inconsciente colectivo
 
Logo Miguel Angel SáNchez
Logo Miguel Angel SáNchezLogo Miguel Angel SáNchez
Logo Miguel Angel SáNchez
 
Arquetipos e inconsciente colectivo en las artes plásticas
Arquetipos e inconsciente colectivo en las artes plásticasArquetipos e inconsciente colectivo en las artes plásticas
Arquetipos e inconsciente colectivo en las artes plásticas
 
E-commerce
E-commerceE-commerce
E-commerce
 
00016 estrategia de publicidad-la redaccion publicitaria
00016 estrategia de publicidad-la redaccion publicitaria00016 estrategia de publicidad-la redaccion publicitaria
00016 estrategia de publicidad-la redaccion publicitaria
 
Los arquetipos de Jung y la personalidad de nuestra marca
Los arquetipos de Jung y la personalidad de nuestra marcaLos arquetipos de Jung y la personalidad de nuestra marca
Los arquetipos de Jung y la personalidad de nuestra marca
 
Logos y escudos con óvalos y ovoides
Logos y escudos con óvalos y ovoidesLogos y escudos con óvalos y ovoides
Logos y escudos con óvalos y ovoides
 
Arquetipos
 Arquetipos Arquetipos
Arquetipos
 
40 arquetipos
40 arquetipos40 arquetipos
40 arquetipos
 
Características de los 12 arquetipos de personalidad corporativa
Características de los 12 arquetipos de personalidad corporativaCaracterísticas de los 12 arquetipos de personalidad corporativa
Características de los 12 arquetipos de personalidad corporativa
 
Arquetipos de Jung
Arquetipos de JungArquetipos de Jung
Arquetipos de Jung
 
Teoría crítica
Teoría críticaTeoría crítica
Teoría crítica
 
Arquetipo, estructura y función
Arquetipo, estructura y funciónArquetipo, estructura y función
Arquetipo, estructura y función
 

Similar a Diseño de páginas web

Similar a Diseño de páginas web (20)

Juan sebastian
Juan sebastianJuan sebastian
Juan sebastian
 
Michael steven
Michael stevenMichael steven
Michael steven
 
Jhohan nicolai
Jhohan nicolaiJhohan nicolai
Jhohan nicolai
 
Yeison fabian
Yeison fabianYeison fabian
Yeison fabian
 
4 ta bitacor aa
4 ta bitacor aa4 ta bitacor aa
4 ta bitacor aa
 
4 ta bitacora
4 ta bitacora4 ta bitacora
4 ta bitacora
 
Bitacora de la unidad 4
Bitacora de la unidad 4Bitacora de la unidad 4
Bitacora de la unidad 4
 
Unidad I ACTIVIDADES ACREDITABLES (PNFI-1er.SEMESTRE)
Unidad I ACTIVIDADES ACREDITABLES (PNFI-1er.SEMESTRE)Unidad I ACTIVIDADES ACREDITABLES (PNFI-1er.SEMESTRE)
Unidad I ACTIVIDADES ACREDITABLES (PNFI-1er.SEMESTRE)
 
Deberdp
DeberdpDeberdp
Deberdp
 
Herramientas web
Herramientas webHerramientas web
Herramientas web
 
Bitacora william
Bitacora williamBitacora william
Bitacora william
 
Recursos Web 2.0
Recursos Web 2.0Recursos Web 2.0
Recursos Web 2.0
 
Comercio electronico1
Comercio electronico1Comercio electronico1
Comercio electronico1
 
Comercio electronico1
Comercio electronico1Comercio electronico1
Comercio electronico1
 
Deberdp
DeberdpDeberdp
Deberdp
 
Aplicaciones web
Aplicaciones webAplicaciones web
Aplicaciones web
 
Diapositivasblog
DiapositivasblogDiapositivasblog
Diapositivasblog
 
Páginas Web
Páginas WebPáginas Web
Páginas Web
 
GOOGLE ESTANDARES EJEMPLOS
GOOGLE ESTANDARES EJEMPLOSGOOGLE ESTANDARES EJEMPLOS
GOOGLE ESTANDARES EJEMPLOS
 
paginas web
paginas webpaginas web
paginas web
 

Diseño de páginas web

  • 2.  En el pasado la creación de páginas web resultaba una tarea solo accesible a expertos, pero en la actualidad, gracias al desarrollo de las tecnologías y nuevas aplicaciones es cada vez una realidad más para los usuarios básicos de la red de redes.
  • 3.  EL LENGAJE WEB: HTML  El lenguaje utilizado en el WWW para el correcto funcionamiento de la misma es el HTML. Este lenguaje, acrónimo inglés de Hypertext Markup Language (lenguaje de etiquetado de documentos hipertextual), es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Gracias a Internet y a los navegadores del tipo Internet Explorer, Opera, Firefox o Netscape, el HTML se ha convertido en uno de los formatos más populares que existen para la construcción de documentos.
  • 4.  El protocolo de comunicación web: HTTP  El protocolo de transferencia de hipertexto (HTTP, HyperText Transfer Protocol) es el protocolo usado en cada transacción de la Web. El hipertexto es el contenido de las páginas web, y el protocolo de transferencia es el sistema mediante el cual se envían las peticiones de acceder a una página web, y la respuesta de esa web, remitiendo la información que se verá en pantalla. También sirve el protocolo para enviar información adicional en ambos sentidos, como formularios con mensajes y otros similares.  HTTP dispone de una variante cifrada mediante SSL llamada HTTPS.
  • 5.  El protocolo de transferencia de ficheros: FTP  El protocolo FTP (del inglés File Transfer Protocol, protocolo de transferencia de ficheros) es el ideal para transferir grandes bloques de datos por la red. Y es la herramienta más ampliamente utilizada para conectar la estructura local con la estructura remota de la WWW y depositar allí los documentos y/o archivos que más tarde deberan verse publicados la Web (ver imagen).
  • 6.
  • 7.  La mayoría de las páginas web a nivel mundial son subidas a los respectivos servidores mediante este protocolo. INTERNET
  • 8.  El color es uno de los elementos más poderosos de que disponemos a la hora de comunicar emociones en un sitio web. La mayoría de estas emociones son percibidas de un modo sutil e inconsciente.
  • 9.  El color es subjetivo: cada persona, dependiendo de sus rasgos culturales o sociales, su estado de ánimo u otras circunstancias personales, lo va a interpretar de manera distinta.
  • 10.  Herramientas que podemos utilizar para diseñar una página web con excelentes resultados. › Dreamweaver › Eclipse › Netbeans, etc.  Software de Diseño Gráfico › Software que combina retoque fotográfico y dibujo vectorial
  • 11.  Software FTP › Externo › Interno  Servidor Web › IIS › Apache  Base de Datos › MySql › Sql Server › Access, etc.
  • 12.  Los princiapales problemas que nos podemos encontrar a la hora de decidir el diseño para nuestra web.  Uso de Flash Las Facilidades y Utilidades que presenta flash son innumerables a la hora de interactividad, e impacto visual. Desafortunadamente las webs 100% flash pueden traer algunos problemas en la incorporación a buscadores. Interactividad Principales problemas que se presenta en la interactividad, es la complejidad que el diseñador le agrega al site, logrando así que el usuario navegue secciones de subsecciones y quede perdido dentro de la página. Una página deberá ser lo que se llama APT (a prueba de tontos) así logra el objetivo deseado, que el usuario encuentre su búsqueda.
  • 13.  Incompatibilidad Hay que tener mucho cuidado cuando se hacen páginas dinámicas, con php, asp, etc... Y también con los CSS que se va a incluir en la hoja de estilo, esto puede traer algunos dolores de cabeza ya que los exploradores interpretan diferente y algunos dejan pasar de largo código y otros no, o definen código diferente.  Disputa no solo con el cliente  Formularios Web Estos mismos si bien son útiles, pueden lograr que un usuario deje de hacer su consulta y se retire del sitio. En mi opinión estos formularios deben ser absolutamente claros y concisos, y por supuesto evitar hacer preguntas inútiles, sin olvidar que el formulario debe ser corto.
  • 14.  Uso desconsiderado de Ventanas Actualmente nos encontramos invadidos por las publicidades en pop-ups, evite el uso de pop-ups en el sitio, primero porque ya los exploradores más vendidos traen una herramienta para bloquearlos y resulta molesto para el visitante tener que activarlo para ver el
  • 15.  El desarrollo de HTML junto con ciertos elementos JavaScript y PHP, JSP o ASP puede facilitar en gran medida su mantenimiento y permitir la implementación de funcionalidad sencilla (e.g. Un formulario de contacto).  Gestor de Contenidos  Definición: Sistema que forma la estructura de soporte para la creación y administración de información en un sitio web (también conocidos como CMS – “Content Management System”)  Es un sistema que se instala en el servidor y genera las páginas web cuando los internautas las solicitan, se puede por tanto generar contenido dinámico dependiendo del usuario. Disponen de una parte pública que ven todos los internautas y de una sección privada o panel de control
  • 16.  La funcionalidad del sitio Web  Su facilidad de mantenimiento y actualización de contenidos  Las necesidades (y por tanto precio) del servidor donde se alojará la web  Disponibilidad de actualizaciones de seguridad.  Velocidad de carga de la web.  La usabilidad de los distintos elementos  Visibilidad en los buscadores.
  • 17.  Proyecto Web › Documento proyecto  Caratula  Objetivo del Proyecto  Objetivos específicos  Alcance del Proyecto  Analisis UML –  Casos de Uso, Modelo Entidad Relacion › Sistema Web