CURSO DE DISEÑO Y DESARROLLO WEB SEMANA 3

CONTENIDOS:

  • Contenido para la Web
  • Componentes básicos WP
  • Tareas

Contenidos para la Web:

Textos

Introducción

En la web leemos de distinta forma que cuando leemos en papel. La resolución tan baja de las pantallas hace que no percibamos el texto con la misma claridad que en un medio escrito. Por eso el usuario no lee textos largos, sino que miran rápido lo que ven.

Las principales consecuencias de la poca resolución de las pantallas son

  • La velocidad de lectura disminuye un 25%
  • Los usuarios son incapaces de centrar su atención en trozos de texto largos
  • La atención se dispersa
  • La vista salta de un lado a otro sin centrarse en los detalles.

El usuario entra en nuestra página buscando información y es necesario ofrecérsela claramente. Las páginas están compuestas por elementos informativos de distintos tipos (menús, enlaces, texto normal, etc.) que es necesario coordinar para acabar guiando al usuario a la información que busca.

Queremos dar una serie de consejos básicos para adaptar nuestra escritura a la web y mejorar la capacidad de captar la atención de los usuarios.

Recomendaciones de estilo

  • Reduce a longitud del texto

Recorta todo lo posible el texto. Los grandes bloques de texto asustan al usuario, que no los leerá. Con textos más cortos se siente menos intimidado. Como media piensa que debes reducir un 50% la longitud del texto pensado para papel.

  • Una idea por párrafo

Al ser breves y estar organizados visualmente, de un vistazo se obtiene mucha más información. Dos o tres líneas pueden ser pocas para el papel, pero pueden ser suficientes en una web.

Nota: utiliza las etiquetas <p></p>

  • Utiliza un estilo directo

No des vueltas innecesarias. Olvídate de tus días de estudiante en donde la nota de los trabajos se medía por el peso del taco de folios que entregabas.

Evita las oraciones en pasiva.

No utilices dobles negaciones. Acuérdate de la frase del abogado que decía «No es verdad que no es mentira que…» y piensa en lo difícil que es descifrarla.

  • Estilo periodístico

Comienza con la conclusión y ve desarrollando el argumento a medida que avances.

Recomendaciones para orientar al usuario

Evita que los usuarios se pierdan en la estructura de tu sitio web. Los usuarios pueden llegar a nuestra página por muchos caminos (desde buscadores a enlaces de otras páginas). Si le ayudamos a situarse en nuestra web, le haremos sentir más cómodo y habrá menos posibilidades de que abandone la página.

  • Coloca enlaces para situar al usuario en contexto

Ofrece enlaces con acceso a información que apoye lo que ofreces en la página. Antecedentes, enlaces a otras webs que traten el mismo tema.

  • Escoge títulos explicativos para las páginas

El título es el texto de presentación de tu página, ayuda a que la gente se fije en tu página en los listados de los buscadores, favoritos, historiales de navegación y pestañas.

Debería explicar lo mejor posible en contenido de la página, pero de forma concisa.

  • Encabezados de 2 ó 3 niveles

Utiliza los encabezados para establecer una jerarquía visual clara. Más grande = más importante. De esta forma facilitamos la búsqueda rápida de información por la página.

  • Encabezados significativos

Escoje frases descriptivas para que sea fácil saber si la información que viene debajo es importante o te la puedes saltar sin perder el tiempo leyendo el párrafo.

  • Resalta las palabras clave

Utiliza negrita para hacer más visible las palabras clave. El texto en pantalla se ve como una masa gris en la que es difícil distinguir palabras que puedan dar una idea del contenido del párrafo. Utilizando palabras en negrita podemos dirigir la mirada al lugar que nos interesa.

Utilizar bien el hipertexto

  • Coloca los enlaces al final de la frase

Por ir subrayados en color azul (recomendado), los enlaces atraen mucho la atención. Si los colocamos en mitad de una frase, pueden frenar la fluidez y desorientar al usuario. Procura colocarlos al final de la frase.

  • Los enlaces y destinos deben parecerse

Haz que el texto del enlace coincida con el título de la página que refiere o con el texto de su encabezado principal. No siempre es posible, pero cuanto más se parezcan el usuario se sentirá más seguro de que ha hecho clic en el lugar correcto.

  • Enlaces con pocas palabras

No utilices textos largos en los enlaces. Añaden mucho ruido y son difíciles de leer. Aunque pienses que por llevar más palabras clave en un enlace vas a subir en los buscadores, si tu página es difícil de utilizar, las probabilidades de que alguien te enlace disminuyen.

Comentario Final

Esto no es una guía extensiva de cómo escribir para la web. Lo ideal sería contar con periodistas especializados que se encargasen de la redacción de textos para la web, pero sabemos que eso sólo está al alcance de grandes empresas. Pero si sigues estos consejos, verás que con un poco de práctica tus textos van a mejorar considerablemente.

Imágenes :

Las imágenes pueden ser de muchos formatos diferentes: bmp (no recomendado ni utilizado) , gif, jpg, png, tiff, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados para web son el JPG, el PNG y el GIF, que a pesar de ser imágenes de menor calidad que las imágenes JPG, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

• Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para dibujos con grandes áreas de un mismo color o de tonos no continuos. También si se muestra texto.

Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación.

En cambio, no están recomendados para fotografías, ya que se perderían colores, y al no tener áreas de color continuo, el archivo final sería mayor que por ejemplo un JPG.

• Formato JPG:

Estas imágenes pueden contener millones de colores, en un archivo comprimido de tamaño razonable. Por ejemplo, las imágenes que obtenemos de una cámara digital suelen estar en este formato.

Por tanto, son especialmente indicadas para fotografías, o gráficos complejos, obteniendo mejores resultados que el GIF.

En cambio, en gráficos con pocos colores y continuos, generará un archivo mayor que el GIF, y podremos apreciar pérdida de calidad.

• Formato PNG.

Se trata de un formato de compresión sin perdida. Tiene varias versiones:

PNG 8 es un formato de 256 colores muy similar al GIF, que en teoría obtiene archivos algo menores. También admite transparencias.

PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea un archivo de tamaño algo mayor. Admite canal de transparencia alfa, lo que quiere decir que puede obtener distintos niveles de transparencia, a diferencia de PNG 8 o GIF que pueden ser totalmente transparentes o no. El resultado es el de mayor calidad, pero también de mayor tamaño. Este formato es el más adecuado cuando necesitamos distintos niveles de transparencia, o requerimos que una imagen muestre correctamente todos sus colores y detalles, evitando la pérdida de calidad que puede producir JPG.

Lo habitual es utilizar GIF o PNG para pequeños gráficos, normalmente elementos del diseño o imágenes simples, y JPG para fotografías.

Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo hacen todos. Y hemos de asegurarnos de que cualquier visitante de nuestra página pueda ver las imágenes.

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, o incluso desde el propio Dreamweaver, como veremos en el siguiente avanzado.

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

Enlaces

Un enlace o link es texto o imágenes en un sitio web que un usuario puede hacer click para tener acceso o conectar con otro documento. Los enlaces son como la tecnología que conecta dos sitios web o dos páginas web. En el navegador se ven como palabras subrayadas (como Ir al índice de FAQ’s al final de ésta página).

Una vez que hace click en un enlace, puede poner en acción varios acontecimientos:

  • Podría «saltar» a otra página o a otro lugar en la misma página.
  • Podría estar enlazado a un archivo que comenzará a descargarse a tu ordenador.
  • Podría producir el lanzamiento de una aplicación de ayuda que entonces procesará el archivo en el que has hecho click.
  • Podría abrir tu programa de gestión  de correo electrónico  para que puedas enviar un mensaje, etcétera.

Lo que realmente ocurre cuando das click en un enlace esta determinado por los archivos MIME y por la forma en la que está configurado tu ordenador. Por ejemplo, los navegadores se configuran para mostrar todos los archivos que tengan HTML en su extensión MIME.

Los enlaces también son llamados hyperlinks, hiperenlace, hypertext, hipertexto, vínculo, y se codifican en HTML por los autores o los programadores de los sitios web.

Más información sobre enlace en Wikipedia
Videos
Sonidos
Otros
 
Componente básicos de WP
 
Entradas (post)
Paginas
Comentarios
Usuarios
 
 

Los CMS (WordPress, Joomla y Drupal) y Servidores – Semana 2

CONTENIDOS:

  1. Tipos de Servidores de Alojamiento Web (Web hosting)
  2. Servidores y Servicios
  3. Los CMS más relevantes
  4. Infografías de Gestores de Contenidos
  5. Instalación y Configuración de los CMS.

 


TIPOS DE SERVIDORES ALOJAMIENTO WEB (WEB HOSTING)

El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de «hospedaje o alojamiento en hoteles o habitaciones» donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en Internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

Las compañías que proporcionan espacio de un servidor a sus clientes se suelen denominar con el término en inglés web host.

El hospedaje web aunque no es necesariamente un servicio, se ha convertido en un lucrativo negocio para las compañías de internet alrededor del mundo.

Se puede definir como «un lugar para tu página web o correos electrónicos», aunque esta definición simplifica de manera conceptual el hecho de que el alojamiento web es en realidad espacio en Internet para prácticamente cualquier tipo de información, sea archivos, sistemas, correos electrónicos, videos etc.

ALOJAMIENTO GRATUITO

Es un alojamiento que no se paga, pero esta super limitado en cuanto a herramientas y recursos, también la compañía suele llenarlo de publicidad que en algunos casos no tiene nada que ver con la filosofía de la compañía.

ALOJAMIENTO COMPARTIDO

Como el nombre lo especifica son varios clientes compartiendo el mismo servidor, es aconsejable para las PYMES si comparamos costos y rendimiento.   Se puede destacar que una desventaja es que al compartir con miles de usuario los recursos del servidor baja mucho su desempeño, una falla de seguridad de un usuario puede repercutir en todo el servidor.

ALOJAMIENTO REVENDEDOR (RESELLER)

Bueno son cuentas para compañías que revenden tanto el servicio de registro de dominio como los servicios de hospedaje.

ALOJAMIENTO EN SERVIDORES VIRTUALES (VPS – VIRTUAL PRIVATE SERVER)

La principal ventaja es que aunque sea virtualizada tienes el control de casi todas las opciones del servidor, aunque muchas veces tienes que pagar por instalaciones de paquetes o aplicaciones. Resulta la mejor opción o el tipo de producto recomendado para empresas de diseño y programación web.

SERVIDOR DEDICADO

Un servidor dedicado es una computadora comprada o arrendada que se utiliza para prestar servicios dedicados, generalmente relacionados con el alojamiento web y otros servicios en red. A diferencia de lo que ocurre con el alojamiento compartido, en donde los recursos de la máquina son compartidos entre un número indeterminado de clientes, en el caso de los servidores dedicados, generalmente es un sólo cliente el que dispone de todos los recursos de la máquina para los fines por los cuales haya contratado el servicio.


 

SERVIDORES Y SERVICIO

Un alojamiento web se puede diferenciar de otro por el tipo de sistema operativo ente los que se encuentran  basada en WINDOWS o  LINUX, bases de datos y motor de generación de sitios web que exista en él. La combinación más conocida y extendida es la del tipo LAMP (LinuxApacheMySQL y PHP), aunque se está comenzando a usar una combinación con Java por la gran demanda de este lenguaje de programación entre la comunidad de programadores.

Los servicios más comunes que se pueden incluidos en un hosting son los siguientes:

  • Alojamiento de ficheros y acceso vía web a los ficheros para subidas, descargas, edición, borrado, etc.
  • Acceso a ficheros vía FTP.
  • Creación de bases de datos, típicamente MySQL en el caso de alojamientos basados en Linux y administración vía web de las base de datos con herramientas web como phpMyAdmin.
  • Cuentas de correo electrónico con dominio propio, gestión de listas de correo, acceso vía clientes de sobremesa (tipo MS Outlook, etc.) y acceso vía webmail a estas cuentas. Reenvía del correo a otras cuentas (incluso externas).
  • Discos duros virtuales que se pueden configurar como unidad de red en un equipo local vía protocolos como WebDav
  • Copias de seguridad
  • Gestión de dominios y subdominios
  • Estadísticas de tráfico
  • Asistentes para la instalación rápida de paquetes software libre populares como WordPress, Joomla, etc.

LOS GESTORES DE CONTENIDO MAS RELEVANTES

¿Qué es un CMS?

Los CMS (Content Management System), o sistemas de gestión de contenidos, son sistemas que se encuentra en una computadora remota o servidor y permiten a un usuario normal crear contenidos en una página web, modificarlos, y eliminarlos con los conocimientos básicos de informática.

A partir de la Web 2.0 cuando los usuarios empiezan a crear contenido, surge un problema,  que no poseían los conocimientos necesarios para colocar contenido en la web, por esta y por otras razones surgen los CMS.

Una lista de los CMS que se están utilizando actualmente en la WEB:

  • Textpattern es muy sencillo y flexible, se encuentra escrito en PHP y utiliza mysql para la base de datos.
  • Drupal posee todas las funcionalidades básicas de un CMS pero además permite tener ambientes colaborativos, foros, Newsletters, Podcasting y galerías de imágenes. Drupal está escrito en PHP y SQL.
  • WordPress es uno de los software open source que puede utilizarse como CMS más conocido.
  • Joomla es uno de los CMS más reconocidos y nos permite crear sitios web y aplicaciones online muy poderosas.
  • Nucleus está escrito en PHP y MySql y nos da la posibilidad de manejar múltiples blogs para múltiples autores.
  • dotCMS se encuentra construido en Java, incluye ciertas funcionalidades como soporte para hosting virtual, contenido estructurado, clustering y funciona en múltiples bases de datos. Incluye RSS feeds, calendario AJAX, noticias, blogs, foros, motor de búsqueda incorporado, etc.
  • Alfresco es para Microsoft Windows y Unix. Está diseñado para usuarios que necesitan muchas funciones y escalabilidad. Se encuentra escrito en Java y posee integración de escritorio y administración completa de documentos.
  • Plone se encuentra escrito en Python. Todas sus funcionalidades son personalizables y en su sitio web hay extensiones gratuitas disponibles.
  • e107 está construido con PHP y soporte de base de datos via MySQL.  e107 posee caching de alta performance, noticias, RSS feed, sistema de template y foro.
  • eZ Publish posee una interesante función para importar/exportar documentos de texto. Incluso puede traducir tu contenido a otros lenguajes. Incluye galería de imágenes, publicación de videos y un bonito control de administración de usuario.
  • Mambo está orientado a los negocios y es muy fácil de instalar y utilizar. Es completamente personalizable. Incluye noticias, secciones de servicios o productos completamente editables, editor de contenido WYSIWYG y administración de publicidades.
  • Diferior es un CMS multipropósito que nos provee de todas las herramientas necesarias para publicar y organizar nuestro contenido. Es capaz de distribuir archives vía protocolos BitTorrent, HTTP y FTP, posee foros incorporados y sistema de blogs.
  • Symphony es un CMS hecho para desarrolladores web, utiliza XSLT para proveer a los desarrolladores de gran flexibilidad.
  • Frog CMS es un CMS simplificado que utiliza PHP 5 y MySQL 4. Posee las capacidades de arrastrar y soltar, contenido de páginas flexible y menú de navegación muy personalizable. Además se lo puede personalizar con distintos temas y plugins.
  • xpressionEngine es un CMS flexible que requiere PHP 4+ y Mysql 3+. Es muy personalizable y fácil de utilizar. Posee una gran función de cache incorporada y hasta incluye un simple carrito de compra.

 

INFOGRAFIAS DE GESTORES DE CONTENIDOS

INSTALACION DE LOS CMS

 

Curso de Diseño y Desarrollo Web – Semana 1

INDICE :

Recomendamos leer este artículo
Composición de un Website

Secciones:

Curso de diseño y desarrollo web1. Header (cabecera)
2. Navegación (MEnu)
3. SlideShow
4. Body (cuerpo)
5. Banner (publicidad)
6. Footer (pie de página)
Qué es un Dominio?

Es la parte principal de una dirección en la web que indica la organización o compañía que administra dicha página.

 
 
 
 
 
 
 
Taxonomía de un Website (Estándar)

Lo que define el diseño de una página web es la forma de organizar los elementos que la componen. Hay miles de formas diferentes, pero son pocas las que funcionan y adquieren el sentido que necesitamos para nuestro trabajo.

Tipos de Dominios que existen:

curso de diseño y desarrollo web webmaster
 

Qué es un Hosting?

Es un espacio dentro de una servidor o PC que mantiene un espacio disponible 24/7

Requisitos para hacer un Website:

1. La idea (que deseas hacer)
2. Nombre (como se llamara lo que vas hacer)
3. Disponibilidad (esta disponible el nombre que elegiste para tu negocio)
4. Hosting (donde deberás hospedar el nombre de tu compañía)
5. Ante proyecto:

  • Objetivos (cual es tu visión, misión, historia, tu meta, etc).
  • Target  (a cuales usuarios desea llegarle, que tipo de publico deseas llegarle).
  • BenchMarketing (como mercadearas tu compañía para que se de a conocer).
  • Requerimiento ( Hosting, Dominio, formularios,…).
  • Análisis SEO (como ocuparas el primer lugar en los motores de búsqueda de google, que buscan las personas, cuales son las palabras claves).
  • Estrategia SEM (cual es el presupuesto para aparecer de primer lugar en caso de tener gran cantidad de competencia).
  • Presupuesto (cual será el monto total en que me saldrá hacer todo lo antes ya mencionado).


[box]
TAREA:
Hacer un Ante-Proyecto para la semana que viene con lo siguiente requisitos:

  • Objetivos
  • Target (usaurios)
  • BenchMarketing
  • Requerimiento
  • Análisis SEO
  • Estrategia SEM
  • Presupuesto

Debe enviarse a un cursos@webmaster.com.do en un documento.  formato: AnteProyecto-Nombredelproyecto

[/box]

//webmaster.com.do/wp-content/uploads/2019/03/BannerWMLite.png