Destacada

Bienvenida al blog

¡Bienvenido o bienvenida al Blog MEGAWEB EXPRÉS sobre diseño y desarrollo Web!
Eres oficialmente nuestro visitante favorito.

Nos encanta recibir retroalimentación y esperamos que participes en nuestro Sitio Web.

Por favor, tómate tiempo para considerar:

  • Formar parte de los usuarios registrados que tienen acceso a Lecciones y DESCARGAS gratis.
  • Seguirnos en el RSS Feed:
  1. De la página de inicio.
  2. Del Blog.

– ¡Gracias por tu interés en MEGAWEB EXPRÉS!,
– LDG Janik Ma. C.

P.D.: Recuerda que MEGAWEB EXPRÉS es el primer el VideoTaller con el método más rápido para el desarrollo de Portales Web a partir de tu propio diseño, garantizado. Reembolso del 100% si puedes diseñar un Portal Web con más rapidez con otro método.

Publicada originalmente el 

Destacada

Métodos de diseño

Introducción.

El diseño tiene fundamentos racionales y es la metodología el puente entre los principios para llevar a cabo el diseño y la investigación necesaria para completar y justificar el proyecto de forma objetiva.

Si no sabes por donde empezar a Diseñar tu Sitio Web

Esta es una guía metodológica para el desarrollo del proyecto de Diseño Web siguiendo los siguientes puntos:

  1. Análisis del proyecto de diseño.
  2. Investigación.
  3. Desarrollo gráfico de la propuesta.
  4. Desarrollo Web.
  5. Lanzamiento y mantenimiento del Sitio Web en línea.
  6. Evaluación del impacto social.

Fuente: metodología basada en la Guía metodológica para el desarrollo de proyectos gráficos de IADA-UACJ.

Usabilidad Web

Usabilidad Web.
Usabilidad Web, parte primordial de la eXperiencia del Usuario (UX).

Se le llama usabilidad Web a la capacidad de un Sitio Web de ser:

  • comprendido,
  • aprendido,
  • usado y
  • ser atractivo para el usuario.

en condiciones específicas de uso.

Son beneficios de implementar la usabilidad Web:

  • Un aumento o mejora de:

  1. La tasa de conversión de visitantes a clientes del sitio Web.
  2. Satisfacción del usuario.
  3. Mejora la imagen y renombre.
  4. Optimización de los costes de diseño, rediseño y mantenimiento Web.
  5. La calidad de vida de los usuarios, reduciendo su estrés, incrementando su satisfacción y en consecuencia aumentando su productividad.

  • Una disminución de:

  1. Los costes de aprendizaje y esfuerzos.
  2. Los costes de asistencia y ayuda al usuario.
  3. La tasa de errores cometidos por el usuario y
  4. del retrabajo.

Fuente:

Definición por La Organización Internacional para la Estandarización (ISO) ISO/IEC 9126.

Elementos visuales que conforman una página Web.

Los elementos visuales, en términos de diseño, integran la composición de una página Web con una jerarquía de elementos que debe de tomar en cuenta la usabilidad y objetivo específico de cada página del Sitio (conversión).

Actualmente, una página de un Sitio Web, sea empresarial o personal, está conformada en similitud con los elementos de una página de un libro o revista (diseño editorial):

  1. Encabezado, mejor conocido como: header.
    Es la parte superior de una página Web, que usualmente consta de uno o más o más imágenes que pueden tratarse de banners publicitarios, fotografías y/o ilustraciones.
  2. Menú superior o barra de navegación.
    Se trata de un grupo de hipervínculos a las secciones más importantes y puede ubicarse arriba del header o sobre él.
  3. Contenido o cuerpo de texto.
    Como su nombre lo indica, se trata del contenido, que usualmente es texto complementado por imágenes, videos o audio.
    Dentro de él pueden colocarse también banners publicitarios estáticos o animados, formularios, botones, etc.
  4. Menú lateral.
    Muchas páginas Web actualmente cuentan con un menú lateral izquierdo o derecho, que en dispositivos móviles puede ser ocultado para otorgarle más espacio al contenido y su navegación.
  5. Pie, también llamado: footer.
    Es la última parte de una página ubicada debajo de todos los demás elementos, donde se coloca el colofón que consiste en el nombre y derechos de autor, fecha , datos de contacto como: la dirección, teléfono y redes sociales además de la información legal (términos y condiciones de uso) y avisos pertinentes (de privacidad, cookies).

Roles y niveles de acceso a usuarios

Los niveles de acceso a usuarios son restringidos según su rol.

Roles.

Un Rol define el conjunto de tareas que se le permite realizar a las usuarios que lo tengan asignado.

Todos los usuarios del blog tienen un Rol asignado. El rol pre-asignado a los nuevos usuarios del sitio es usualmente el de Suscriptor, pero puede puede pre-definirse como cualquier otro rol y/o ser modificado manualmente por el Super Admin y Administrador.

  • Super Admin: 
    Cuenta con acceso a la administración completa de un sitio o blog o una de la red de blogs. Es la cuenta creada automáticamente por defecto.
  • Administrador:
    Tiene acceso a todas las características de administración de un sitio o blog.
  • Editor:
    Puede publicar y editar entradas propias y de otros usuarios.
  • Autor:
    Puede publicar y editar sus propias entradas.
  • Colaborador:
    Puede escribir y editar sus propias entradas pero no publicarlas.
  • Subscriptor:
    Solamente puede editar su perfil.

 

Consideraciones generales del diseño adaptable a dispositivos móviles

Hace no tanto tiempo, en los inicios de la Word Wide Web la única forma de acceder a un Sitio Web era a través de una computadora de escritorio, con monitores que hasta hoy aumentan de resolución y tamaño año tras año.

Ahora, podemos visitar toda clase de Sitios Web desde laptops, tabletas y celulares (smartphones), que a la inversa, han reducido los monitores a los cuales se debe adaptar nuestro diseño y contenido, lo que es llamado en inglés responsive design o responsive layout.

En un Sitio Web adaptable a dispositivos, la Hoja de Estilo en Cascada (CSS) que controla la apariencia del Sitio Web indica distintas medidas y atributos según el tamaño del ancho del navegador.

Interpretación de las páginas.

Para una mejor experiencia del usuario el diseño debe ser flexible al tamaño del monitor:

  • A mayor tamaño: más contenido e imágenes de mayor tamaño.
  • A menor tamaño: el contenido e imágenes reducen y se ajustan.

Recomendaciones para diseñar un Sitio Web adaptable a dispositivos móviles.

Para una buena experiencia de usuario (UX) y usabilidad, las consideraciones generales del comportamiento del Sitio Web (según la W3C) son:

  • Consistencia en la dirección y la página Web:
    El visitante debe poder acceder con la misma dirección URI a exactamente la misma página Web en su computadora de escritorio y en cualquier dispositivo móvil aunque su contenido varíe ligeramente.
  • Explotar las capacidades del dispositivo:
    Se debe mostrar el mismo contenido a través de todos los dispositivos, a la vez que se aprovechen las capacidades de dispositivos que pueden proveer mejoras sobre otros.
  • Evitar implementaciones deficientes:
    Hay navegadores que no interpretarán el contenido de acuerdo a lo planificado y hay deficiencias en la implementación. Si un dispositivo es conocido por tener limitaciones particulares, el diseñador y/o desarrollador debe ajustarse a las Mejores Prácticas para evitar en la medida de lo posible, restringir su contenido solo a ciertos dispositivos.
  • Pruebas:
    Al realizarse pruebas, se debe procurar utilizar el dispositivo real en la versión que se estima utilizará el mercado objetivo.
    De utilizarse un emulador, es preferible utilizar el de la empresa que lo manufactura.

Otras consideraciones son:

Navegación y enlaces:

  • Permitir el acceso desde direcciones cortas.
  • Barra de navegación superior de una sola línea.
  • Estructura balanceada evitando el exceso de hiperenlaces.
  • Navegación consistente agrupada y proveer un enlace hacia arriba (el principio de la página).
  • Permitir el uso de las flechas del teclado.
  • Identificación clara del destino de un hiperenlace.
  • Evitar el uso de Image Maps a menos que se conozca que se soporte efectivamente por el dispositivo.
  • Actualización, redireccion y apertura de ventanas nuevas:
    • No causar que se abran pop-ups, ventanas nuevas, ni el cambio de ventana sin informar previamente al usuario.
    • No auto-actualizar una ventana, sin proveer al usuario de una forma de detenerla.
    • No usar re-dirección automática a través del HTML, de ser necesaria implementarla mendiante  HTTP 3xx (como la redirección 301 o 302).
  • Mantener el número de enlaces a recursos (Como CSS, imágenes, etc.) externos al mínimo.

Diseño de página y contenido:

  • Evitar las barras de desplazamiento horizontales.
  • Optimizar el peso de las imágenes y otros recursos.

Definiciones en la página:

  • Evitar el uso de iFrames.
  • Usar el elemento Table solo para tablas.
  • Evitar el uso de texto imágenes para sustituir texto real (que puede ser seleccionado y copiado).

Datos introducidos por el usuario (formularios):

  •  Minimizar el trabajo del usuario, especialmente la escritura mediante el teclado.
  • Habilitar la navegación en el formulario mediante las flechas y números del teclado.

Exportar como HTML

Los 3 editores gráficos Illustrator, Photoshop y Gimp de los que ya se ha hablado en este blog, cuentan con herramientas para subdividir una imagen basándose en las guías de la imagen; el primer paso para exportar imágenes, texto y crear un documento HTML de la manera más práctica.

  • Gimp

En Gimp, la herramienta Gillotina corta la imagen a lo largo de cada guía, de manera similar a cortar documentos reales con una guillotina para papel, creando imágenes nuevas con sus piezas.

  • Photoshop

En una imagen con guías, seleccione la herramienta Slice o en español, Sector, haz clic en Slices Guides o Sectores guías en la barra de opcion.

  • Illustrator

En una imagen con guías, seleccione del menú Objeto > Slice o en español, Sector > Crear a partir de Guías.

Para cambiar el tipo de Sector a uno de imagen, texto o espacio sin imagen, haz clic sobre la placa o icono sobre ella, al hacerlo aparecerán opciones que te permitirán definir el tipo adecuado, agregar etiquetas, cambiar su nombre, agregar el texto y enlaces que se van a exportar.

Toma en cuenta que al seguir este procedimiento todas los Sectores o Slices creados anteriormente, son borrados y recuerda iniciar cada enlace con «http://» para evitar errores de vinculación..

Exportar como HTML

Exportar como HTML creará automáticamente un documento HTML y una carpeta con las imágenes a partir de las imágenes nuevas creadas a partir de los Sectores de la imagen abierta.

Para esto es importante considerar los formatos de imagen más adecuados para su función:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

  • Gimp

El filtro: http://docs.gimp.org/es/python-fu-slice.html exporta como varios formatos, entre ellos html.

  • Illustrator o Photoshop

En Illustrator o Photoshop puedes Guardar para Web en el menú Archivo > Guardar para Web.

Con MEGAWEB EXPRÉS aprenderás a usar estos archivos para desarrollar un Sitio Web dinámico compatible con dispositivos móviles  y más diseñando un portal Web.

Regístrate hoy en el VideoTaller: MEGAWEB EXPRÉS.

 

¿El negro es propiamente un color?

El negro no es en sí un color, sino la ausencia de color y/o de luz.

Puede proyectar vacío, muerte, degradación a la vez que en psicología es reflejo de sabiduría y prudencia.

El negro simboliza las fuerzas subterráneas y el abandono, por ejemplo, un pájaro negro es signo del inconsciente en vigilia.

La tonalidad gris oscuro representa la potencia contenida y algunos negros son las imágenes de la renuncia o de la rebelión y la violencia.

CSS Sprites e interactividad

CSS Sprites

Es una forma de reducir el tiempo de carga de una página Web ahorrando también el uso de ancho de banda al llamar a una sola imagen que contiene a todas o varias imágenes del Sitio Web, mostrando con CSS únicamente las partes necesarias.

Interactividad

Al colocar el mouse o hacer clic sobre cualquier enlace, ya sea imagen, botón o texto, algo llamado conocido en inglés como hover y al hacer clic, es posible, cambiar sus características:

  • En el caso del texto, cambiar su color, decoración, peso, tamaño, etc.
  • En el caso de imágenes, cambiar una por otra, cambiar su opacidad, tamaño, etc.

Aprende esto y más diseñando un portal Web. Regístrate hoy en el VideoTaller: MEGAWEB EXPRÉS.

Crear imágenes con animación

Crear imágenes con animación como gifs animados para banners publicitarios, MEMES, botones, divisores y para otros usos es muy sencillo.

Es recomendable usar la menor cantidad de colores posibles para optimizar su tamaño y evite alternar colores muy contrastantes y rápidos que puedan causar mareo, convulsiones y cualquier molestia al usuario.

En Gimp:

Usar GIMP para animar, requiere pensar en cada Capa como un Cuadro que conforma la animación.

Duración de cada cuadro:

Si fuera distinta para algún cuadro, tendríamos que indicarla junto al nombre de la capa en milisegundos y entre paréntesis, por ejemplo si queremos que un cuadro dure un segundo pondríamos al lado del nombre de la capa (1000ms).

Animaciones con transparencias:

Combinar y reemplazar.

Si nuestra imagen está compuesta por capas con transparencias tenemos dos métodos para manejar nuestros cuadros:

  1. Combinar: Yuxtapone las capas mostrando que hay debajo de aquellas con transparencia.
  2. Reemplazar: Reemplaza por completo una capa o cuadro con otro.

Se señala colocando combine para combinar o replace para reemplazar en la capa entre paréntesis al lado del tiempo:

Nombre de la capa(xxxxms)(combine) ó (replace)

Degradados.

Para evitar perder la suavidad en degradados de color sólido a transparencia es recomendable simularla con capas en las que el degradado sea de color sólido al color de fondo.

Previsualizar la animación:

Mediante el Previsualizador podemos en cualquier momento ver como va quedando nuestra animación, abriéndolo en: Filtros > Animación > Reproducir Animación.

Al guardar una animación a color es necesario indexarla, ésto puede hacerse automáticamente al exportar o manualmente en: Imagen > Modo > Indexado (Alt+I).

Exportar gif:

Por último hay que recordar guardar la animación final en: Archivo > Guardar, señalando la extensión .gif y marcando la casilla de «Guardar como animación» y la casilla «Convertir a tonos de gris» si es en blanco y negro o «Convertir a indexada…» si usa todo tipo de colores.

Al exportar se presentan las opciones de:

  • Entrelazar: Carga la imagen de forma progresiva, mostrando distintos niveles de definición o calidad visual con cada pasada, hasta que se completa.
  • Comentario GIF: Espacio para comentar la imagen.
  • Repetir eternamente: reinicia la animación cuando finaliza.
  • Pausa entre cuadro cuando no se especifique: Cuando no se especifica en el nombre de capa ninguna duración todas tomarán la que se especifique aquí.
  • Colocación de cuadros cuando no se especifique: Igual que la anterior pero para elegir entre «Combinar o Reemplazar».

Optimizar y exportar fotografías y otras imágenes en mapa de bits

Importar las imágenes

Al importar imágenes en mapa de bits a Photoshop o Gimp para incluirlas en un Sitio o diseño Web, es recomendable empezar por:

  • Escanear la fotografía revelada,
  • Escanear los negativos o
  • Importar los archivos de las fotografías desde la cámara digital.

Optimizar imágenes en mapa de bits

Es importante contar con fotografías que cuya corrección de color, contaste y retoque fotográfico sean innecesarios o ya hayan sido aplicados, para como diseñadores Web, enfocarnos en optimización del modelo de color, resolución, ajuste del tamaño y tipo de archivo para Web.

Encuadre

  • Recorte en Gimp:

Para elegir la herramienta de Recorte. Has clic en el botón  en la caja de herramientas o en el menú: Herramientas > Herramientas de transformación > Recortar en la ventana de la imagen.

Cuando cambie el cursor, has clic y arrastra formando un rectángulo que cubra únicamente las partes de la imagen que desees conservar, si tu primera selección no fue de tu agrado, puedes arrastrar las esquinas o bordes del rectángulo para cambiar las dimensiones del área seleccionada y hacer doble clic sobre la imagen para aplicar el recorte.

Sus dimensiones y proporción se muestran en la barra de estado.

Exportar para Web.

  • En Gimp:

Archivo > Exportar como… > Seleccione el tipo de archivo.

  • En Photoshop:

Archivo > Exportar para  Web, seleccione el tipo de archivo desde el menú en la parte superior de la nueva ventana.

Las extensiones recomendadas para publicar las fotografías en Internet son:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

Extensiones recomendadas para compartir originales:

  • PSD: Imágenes a editar en Adobe Photoshop.
  • EPS
  • XCF: Imágenes a editar en Gimp.

Es recomendable que los archivos de imágenes se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Fuente: http://docs.gimp.org/es/