FANDOM


oltsDiseño Web.

Disenoweb

Diseños de Páginas Web

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios weby páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la informacióny la interacción de medios como el audio, texto, imageny vídeo. Se lo considera dentro del Diseño Multimedial.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicacióne intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidorde contenidos, característica destacable del medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.

Diseño web aplicado

El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, enA papel, en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

Etapas

Para el diseño de páginas web debemos tener en cuenta tres etapas:

  • La primera es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculosa otros documentos y otros objetos multimediaque se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
  • La segunda, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertextoo HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipediason ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada.
  • La tercera, etapa consiste en el posicionamiento en buscadoreso SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, por que a diferencia del texto, aún para el año 2009 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

El HTMLconsta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuarioo navegadores. Esto se puede hacer con un simple editor de textos(debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPagey Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.

Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario.

Fundamentos

Un correcto diseño web implica conocer cómo se deben utilizar cada una de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándaresestablecidos por la W3Cy en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.

La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento para marcar párrafos, y

para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización. De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSSpara indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una pantallade computadora, un teléfono móvil, impreso en papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidaddel documento. También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un Panel de Controlde administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma Accesibilidad El diseño web debe seguir unos requerimientos mínimos de accesibilidad webque haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidadse han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

Lenguaje HTMLEditar

Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML. Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español Lenguaje de Marcas Hipertextuales). Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener las extensiones (htm, html)

Ventajas:

  • Sencillo que permite describir hipertexto.
  • Texto presentado de forma estructurada y agradable.
  • No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web o WYSIWYG.
  • Archivos pequeños.
  • Despliegue rápido.
  • Lenguaje de fácil aprendizaje.
  • Lo admiten todos los exploradores

Desventajas:

  • Lenguaje estático.
  • La interpretación de cada navegador puede ser diferente.
  • Guarda muchas etiquetas que pueden convertirse en “basura” y dificultan la corrección.
  • El diseño es más lento.
  • Las etiquetas son muy limitadas.
Para ver el manual de HTML visita http://roble.pntic.mec.es/apuente/html/

Lenguaje JavascriptEditar

Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript.

El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM(en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento)

Ventajas:

  • Lenguaje de scripting seguro y fiable.
  • Los script tienen capacidades limitadas, por razones de seguridad.
  • El código Javascript se ejecuta en el cliente

Desventajas:Editar

  • Código visible por cualquier usuario.
  • El código debe descargarse completamente.
  • Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en inglés Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS)
para descargarlo visita http://www.softonic.com/s/descarga-java-script-gratis

Lenguaje PHPEditar

Es un lenguaje de programación utilizado para la creación de sitio web. PHPes un acrónimo recursivo que significa “PHP Hypertext Pre-processor”, (inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado por PHP Group.

PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php

Ventajas:Editar

  • Muy fácil de aprender.
  • Se caracteriza por ser un lenguaje muy rápido.
  • Soporta en cierta medida la orientación a objeto. Clases y herencia.
  • Es un lenguaje multiplataforma: Linux, Windows, entre otros.
  • Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.
  • Capacidad de expandir su potencial utilizando módulos.
  • Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus funciones.
  • Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
  • Incluye gran cantidad de funciones.
  • No requiere definición de tipos de variables ni manejo detallado del bajo nivel.

Desventajas:Editar

  • Se necesita instalar un servidor web.
  • Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente a medida que las solicitudes aumenten de número.
  • La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.
  • La programación orientada a objetos es aún muy deficiente para aplicaciones grandes.
  • Dificulta la modularización.
  • Dificulta la organización por capas de la aplicación.

Seguridad:Editar

PHP es un poderoso lenguaje e intérprete, ya sea incluido como parte de un servidor web en forma de módulo o ejecutado como un binario CGI separado, es capaz de acceder a archivos, ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que cualquier cosa que sea ejecutada en un servidor web sea insegura por naturaleza.

PHP está diseñado específicamente para ser un lenguaje más seguro para escribir programas CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos de compilación y ejecución, y siguiendo algunas prácticas correctas de programación.

Para descargar PHP visita http://www.portalprogramas.com/gratis/php

Lenguaje ASPEditar

Es una tecnología del lado de servidor desarrollada por Microsoftpara el desarrollo de sitio web dinámicos. ASPsignifica en inglés (Active Server Pages), fue liberado por Microsoft en 1996. Las páginas web desarrolladas bajo este lenguaje es necesario tener instalado Internet Information Server (IIS).

ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden utilizar para crear páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el código HTML. Los archivos cuentan con la extensión (asp).

Ventajas:Editar

  • Usa Visual Basic Script, siendo fácil para los usuarios.
  • Comunicación óptima con SQL Server.
  • Soporta el lenguaje JScript (Javascript de Microsoft).

Desventajas:Editar

  • Código desorganizado.
  • Se necesita escribir mucho código para realizar funciones sencillas.
  • Tecnología propietaria.
  • Hospedaje de sitios web costosos.
Para descargar este programa visita http://www.portalprogramas.com/gratis/asp

Lenguaje ASP.NETEditar

Este es un lenguaje comercializado por Microsoft, y usado por programadores para desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al mercado mediante una estrategia de mercado denominada .NET.

El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP. Creado para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con la extensión (aspx). Para su funcionamiento de las páginas se necesita tener instalado IIS con el Framework .Net. Microsft Windows 2003 incluye este framework, solo se necesitará instalarlo en versiones anteriores.

Ventajas:Editar

  • Completamente orientado a objetos.
  • Controles de usuario y personalizados.
  • División entre la capa de aplicación o diseño y el código.
  • Facilita el mantenimiento de grandes aplicaciones.
  • Incremento de velocidad de respuesta del servidor.
  • Mayor velocidad.
  • Mayor seguridad.

Desventajas:Editar

  • Mayor consumo de recursos.

Lenguaje JSPEditar

Es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages. Está orientado a desarrollar páginas web en Java. JSP es un lenguaje multiplataforma. Creado para ejecutarse del lado del servidor.

JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las de ASP.NET, desarrollado para la creación de aplicaciones web potentes. Posee un motor de páginas basado en los servlets de Java. Para su funcionamiento se necesita tener instalado un servidor Tomcat.

Características:Editar

  • Código separado de la lógica del programa.
  • Las páginas son compiladas en la primera petición.
  • Permite separar la parte dinámica de la estática en las páginas web.
  • Los archivos se encuentran con la extensión (jsp).
  • El código JSP puede ser incrustado en código HTML.

Elementos de JSPEditar

Los elementos que pueden ser insertados en las páginas JSP son los siguientes:

  • Código:se puede incrustar código “Java”.
  • Directivas:permite controlar parámetros del servlet.
  • Acciones:permite alterar el flujo normal de ejecución de una página.

Ventajas:Editar

  • Ejecución rápida del servlets.
  • Crear páginas del lado del servidor.
  • Multiplataforma.
  • Código bien estructurado.
  • Integridad con los módulos de Java.
  • La parte dinámica está escrita en Java.
  • Permite la utilización se servlets.

Desventajas:Editar

  • Complejidad de aprendizaje.
Para descargar este programa visita http://www.softonic.com/s/jsp

Lenguaje PythonEditar

Es un lenguaje de programación creado en el año 1990 por Guido van Rossum, es el sucesor del lenguaje de programación ABC. Pythones comparado habitualmente con Perl. Los usuarios lo consideran como un lenguaje más limpio para programar. Permite la creación de todo tipo de programas incluyendo los sitios web.

Su código no necesita ser compilado, por lo que se llama que el código es interpretado. Es un lenguaje de programación multiparadigma, lo cual fuerza a que los programadores adopten por un estilo de programación particular:

  • Programación orientada a objetos.
  • Programación estructurada.
  • Programación funcional.
  • Programación orientada a aspectos.

Ventajas:Editar

  • Libre y fuente abierta.
  • Lenguaje de propósito general.
  • Gran cantidad de funciones y librerías.
  • Sencillo y rápido de programar.
  • Multiplataforma.
  • Licencia de código abierto (Opensource).
  • Orientado a Objetos.
  • Portable.

Desventajas:Editar

  • Lentitud por ser un lenguaje interpretado.
Para descargar este programa visita http://www.portalprogramas.com/gratis/python

Lenguaje RubyEditar

Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el 1993 por el programador japonés Yukihiro “Matz” Matsumoto. Su sintaxis está inspirada en Phyton, Perl. Es distribuido bajo licencia de software libre(Opensource).

Ruby es un lenguaje dinámico para una programación orientada a objetos rápida y sencilla. Para los que deseen iniciarse en este lenguaje pueden encontrar un tutorial interactivo de ruby. Se encuentra también a disposición de estos usuarios un sitio con informaciones y cursos en español.

Características:Editar

  • Existe diferencia entre mayúsculas y minúsculas.
  • Múltiples expresiones por líneas, separadas por punto y coma “;”.
  • Dispone de manejo de excepciones.
  • Ruby puede cargar librerías de extensiones dinámicamente si el (Sistema Operativo) lo permite.
  • Portátil.

Ventajas:Editar

  • Permite desarrollar soluciones a bajo Costo.
  • Software libre.
  • Multiplataforma.


http://ruby.softonic.com/descargar
Si deseas ver la primera foto publicada en la web visita http://mangasverdes.es/2007/01/15/la-primera-foto-de-internet/

Para conocer más de la historia de la web visita http://www.tufuncion.com/historia-pagina-internet

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.