Diseño de Página Web

                                             Diseño Web


Ediseño web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. No es simplemente la implementación del diseño convencional ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como la navegabilidadinteractividadusabilidadarquitectura de la información; interacción de medios, entre los que podemos mencionar audiotextoimagenenlacesvideo y la optimización de motores de búsqueda. A menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de diseño, aunque existen algunos diseñadores independientes que trabajan solos.



Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML. 
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
Esquema etiqueta HTML
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacías son  <hr><img>, <input><link><meta><paran> y <sorce>.En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valoratributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.


                                                ETIQUETAS de HTML



  1. <DIV>:permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos y aplicarles estilos.                                   
  2. <HTML>: es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet.
  3. <body>:es la etiqueta usada para indicar el cuerpo de un documento HTML, es la parte donde se describe el contenido de la página (su estructura, su forma, sus colores, texto, y todo lo visual), su inicio lo indica la etiqueta <body> y su final con la etiqueta </body>
  4. <P>:es el apropiado para distribuir el texto en párrafos
  5. <head>provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos. La etiqueta de inicio puede ser omitida si lo primero dentro del elemento head es un elemento.
  6. <title>: .es el título en el cual se puede hacer clic en las páginas de resultados de los motores de búsqueda (SERPs).
  7. <h1>es el elemento HTML utilizado, de manera habitual, para identificar la cabecera más importante en una página web.
  8. <h2>:se utiliza para dividir el texto en subsecciones. Esta etiqueta es una herramienta muy potente para el SEO, al igual que la etiqueta <h1>
  9. <h3>:  e utiliza para definir títulos dentro de un subapartado encabezado por un <h2> . Esta etiqueta es una herramienta ya no es tan potente para el SEO, por lo que no es recomendable usarla. 
  10. <br>:produce un salto de línea en el texto Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.


                                              Página Web

Una página web, o página electrónicapágina digital, o ciberpágina​ es un documento o información electrónica capaz de contener texto, sonidovídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascadaguiones (scripts), imágenes digitales, entre otros.




Páginas web estáticas

Una página web estática es un sitio de Internet que muestra el mismo contenido para todos los usuarios, en vez de proporcionar contenido personalizado a la medida de cada usuario, y que no se actualiza a menudo. Las páginas web estáticas, que algunas veces se conocen como páginas planas, contrastan con las páginas web dinámicas que se actualizan frecuentemente y proporcionan información personalizada para usuarios individuales.
Ejemplos

 Herbalfarma

Captura de pantalla de la web Herbalfarma
Tipo de página: Tienda de venta on-line especializada en productos naturales y ecológicos.
Nombre: Herbalfarma
¿Qué piensan en Herbalfarma de Jimdo?: «Jimdo es una herramienta muy fácil de usar, puedes añadir diversos elementos integrados ya en Jimdo o widgets personalizados. El servicio de ayuda es genial. La nota negativa es que hay algunas cosas que no se pueden hacer y el estilo del blog está anticuado y es demasiado básico.»

Instaprint

Página de inicio de la web Instaprint
InstaPrint fue creada y se gestiona con Webnode fue la plataforma elegida.
Tipo de página: Imprenta digital con sede en Barcelona, dispone de una tienda online.
Nombre: Instaprint

Savia Bruta

Savi Bruta, taller floral
Tipo de página: Taller floral de Madrid con bellas creaciones florales.
                           Páginas web dinámicas
Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, noticiarios, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ... donde el administrador dispone la opción de gestionar dichos apartados, agregando, editando o eliminando contenidos.
La gran ventaja de los sitio web dinámicos es la versatilidad, apunta a la personalización de la información mostrada. Permite la toma de decisiones y muestra selectiva de información en función de criterios deseados.
Ejemplos

Chat

Este sistema permite la comunicación instantánea entre participantes y es muy útil para una comunicación rápida y efectiva.
Ahora tienes la oportunidad de proveer un Chat en tu sitio web para que los usuarios puedan unirse y tener conversaciones de varios temas y salas de chat. También puedes moderar cada conversación y administrar a los usuarios.

Foros

Foro de mensajes, de opinión o de discusión. Es una aplicación web que apoya los debates en línea y opiniones. Genera gran cantidad de actividad entre usuarios, quienes en retorno estarán encantados de contribuir con tu proyecto, al igual que ayudar al responder, comentar o dar su opinión sobre temas de interés. Esta estrategia es útil para aumentar la lealtad de los usuarios.
Agrega un Foro a tu sitio web con las más avanzadas características como categorías, ranking de puntuación, cargar archivos e imágenes, búsqueda avanzada, publicidad, subscripciones, encuestas, entre otras y logra transformar tu Foro en un perfecto lugar de reunión.

Catálogos electrónicos

Posicione sus productos y servicios con su imagen, especificaciones y método de pago y comience a venderlos a través del mercado que deseas. ¡Monta tu catálogo online ahora mismo!

Galerías de fotos

Incluye una galería de fotos en tu sitio web y administra su contenido directamente. Esta herramienta permite la publicación organizada de imágenes por tema e incluso puedes configurar una gran cantidad de fotos de forma automática. El acceso a la galería de fotografías puede estar restringido o público, además de muchas otras características fácilmente personalizables.

                                       Protocolo IP

El protocolo de internet (en inglés Internet protocol o IP) es un protocolo de comunicación de datos digitales clasificado funcionalmente en la capa de red según el modelo internacional OSI.
Su función principal es el uso bidireccional en origen o destino de comunicación para transmitir datos mediante un protocolo no orientado a conexión que transfiere paquetes conmutados a través de distintas redes físicas previamente enlazadas según la norma OSI de enlace de datos.
l diseño del protocolo IP se realizó presuponiendo que la entrega de los paquetes de datos sería no confiable. Por ello, IP tratará de realizarla del mejor modo posible, mediante técnicas de enrutamiento, sin garantías de alcanzar el destino final pero tratando de buscar la mejor ruta entre las conocidas por la máquina que esté usando IP.
Los datos en una red basada en IP son enviados en bloques conocidos como paquetes o datagramas (en el protocolo IP estos términos se suelen usar indistintamente). En particular, en IP no se necesita ningún intercambio de información de control previa a la carga útil (datos), como sí que ocurre, por ejemplo, con TCP.
IP provee un servicio de datagramas no fiable (también llamado del "mejor esfuerzo": lo hará lo mejor posible, pero garantizando poco). IP no provee ningún mecanismo para determinar si un paquete alcanza o no su destino y únicamente proporciona seguridad (mediante checksums o sumas de comprobación) de sus cabeceras y no de los datos transmitidos. Por ejemplo, al no garantizar nada sobre la recepción del paquete, éste podría llegar dañado, en otro orden con respecto a otros paquetes, duplicado o simplemente no llegar. Si se necesita fiabilidad, ésta es proporcionada por los protocolos de la capa de transporte, como TCP. Las cabeceras IP contienen las direcciones de las máquinas de origen y destino (direcciones IP), direcciones que serán usadas por los enrutadores (routers) para decidir el tramo de red por el que reenviarán los paquetes.


Navegadores Web
Un navegador web (en inglés, web browser) es un softwareaplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).
Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

Ejemplos
.

Google Chrome

Es uno de los más conocidos y más usados, básicamente porque es el que asegura una velocidad mayor. Saltó al escenario a principios de 2008. Desde entonces ha conseguido pasar de una cuota de mercado del 0% al actual 25% del mes pasado. Se inicia rápidamente desde el escritorio, carga las páginas de forma instantánea y ejecuta aplicaciones web complejas a gran velocidad. Su gran ventaja respecto a su competencia es también su principal inconveniente: Google.
Google le asegura financiación permanente y estar siempre a la última en cuanto a mejoras y novedades; sin embargo, también es una de las empresas multinacionales más influyentes y con más beneficios del mundo, y como tal, su objetivo final es el ánimo de lucro, y no todo el mundo se siente cómodo dejándoles sus datos, tanto personales como no personales.
A parte de esto, la ventana del navegador de Chrome es intuitiva y sencilla. Está diseñado para ofrecer una mayor seguridad en la web, al actualizarse automáticamente para que siempre tengamos las últimas mejoras en este campo. Si es tu navegador preferido para el PC, Google Chrome será también el favorito para hacerlo a través de la tableta, al presentar versiones igual de potentes tanto en Android como en iOS.

Mozilla Firefox

Para mucha gente es el navegador que le transmite más confianza, seguramente porque, aparte de ser uno de los más veteranos (salió en el año 2003) es sólido, estable y presenta muy pocos errores. Firefox, el segundo navegador más utilizado en Internet, se caracteriza por ser un programa independiente, y para muchos es su favorito porque no tiene ánimo de lucro. Ha sido desarrollado a lo largo de los años por decenas de programadores que lo van mejorando en cada actualización.
Además, es un navegador altamente personalizable, ya que cuenta con un amplio abanico de temas y complementos. Pero lo mejor de todo son las extensiones, pequeñas adiciones gratuitas elaboradas por cientos de desarrolladores alrededor del mundo que cumplen todas las labores y funciones imaginables.

Opera

Es el navegador web alternativo por excelencia. Es también uno de los más veteranos y, durante muchos años, ha sido de los más utilizados en los teléfonos móviles, hasta la popularización de los smartphones. Está desarrollado por una compañía noruega y, al igual que Firefox, no tiene ánimo de lucro.
Su última versión, el Opera 15, usa el mismo motor que Google Chrome, por lo que se pueden utilizar en él las mismas extensionse disponibles para el navegador de Google. Además, incorpora una novedad muy interesante, lo que ellos llaman el “Estante“, una reinvención de los marcadores o favoritos que permite ir guardando páginas que interesan para leerlas posteriormente.
Opera es también altamente personalizable; contiene una amplia variedad de temas y su velocidad no tiene nada que envidiar a los más populares Chrome o Firefox.


¿Qué es una Hoja de estilo?

Una Hoja de estilo es un archivo que suele acompañar al fichero principal de cualquier página web, con la extensión css, y que se encarga de definir diferentes aspectos relacionados con el formato y el diseño de la web, estableciendo los parámetros que definen las etiquetas utilizadas en el código fuente de la misma.
Una Hoja de estilos sirve para dar coherencia al diseño de una web y mantener un estilo uniforme y homogéneo, sin secciones que usen fuentes distintas ni nada que rompa con la imagen que se desea transmitir al visitante. Esta unicidad resulta cómoda y atractiva estéticamente para cualquier usuario, lo que permite que permanezca más tiempo en la web.



¿Que son tablas o plantillas ?
Las tablas se pueden integrar dentro del Gestor de Contenidos Vualà de la misma forma que se venía haciendo hasta ahora en Composer. Sin embargo, debemos limitar su uso exclusivamente a la tabulación de datos y evitar su utilización para maquetar la información de nuestra web.


Vualà además incorpora algunas plantillas que permite maquetar la información en varias columnas. El número de plantillas se iran aumentando progresivamente con la evolución de la herramienta. Se pueden consultar las plantillas disponibles en la documentación de Vualà.


¿Qué son marcos(frames)?
Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Los navegadores que lo implementan son a partir del Netscape 2.0, y el Explorer 2.0 en adelante.
Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.




¿Qué es un software de edición de sitios web?                                                                                                 
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.


¿Qué es un publicador de sitios web ?

El Publicador es una herramienta que creamos que permite modificar contenidos dentro del Sitio Web. Dicha herramienta permite la adaptación de acuerdo a las necesidades de cada cliente, pudiendo así actualizar los sectores que usted necesite modificar asiduamente, siendo estos fotos, imágenes, textos y otros

No hay comentarios.:

Publicar un comentario

                                                          ETIQUETAS DE HTML Las etiquetas (marcas) delimitan cada uno de los elem...