martes, 21 de junio de 2016

3.5 Otras herramientas de apoyo en el Desarrollo de Sitios Web


https://es.wikipedia.org/wiki/Joomla

Es un Sistema de Gestión de Contenidos que permite desarrollar Sitios Web dinámicos e interactivos; además de ser un software de
código abierto, programado o desarrollado en PHP y liberado bajo Licencia pública general GNU (GPL).  Permite crear, modificar o eliminar contenido de un sitio web de manera sencilla a través de un "panel de administración".

Este administrador de contenidos puede utilizarse en una computadora personal local (localhost), en una intranet o a través de Internet, y requiere para su funcionamiento una base de datos creada con un gestor de bases de datos (MySQL es lo más habitual), así como de un servidor HTTP Apache.

3.4 Gestores de Contenidos

¿Qué es un Gestor de Contenido?


Consiste en una interfaz que controla varias bases de datos donde se aloja el contenido de un Sitio Web. Permite manejar de manera independiente el contenido y el diseño además de permitir la fácil y controlada publicación en el sitio a varios editores.

Algunos Gestores de Contenido son:
  • WordPress
  • Magento
  • Blogger
  • Jomla
  • Prestashop
  • Drupal
  • LiveJournal


3.3 Editores 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.


 

3.2 Terminología WYSIWYG

Es el acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso.


UNIDAD 3 HERRAMIENTAS PARA LA CREACION WEB

3.1 Lenguaje HTML5 y CSS3

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.

Css3 es la continuación de ccs es la última versión en este momento, como vera el css antiguo era muy útil para los desarrolladores web ya que nos proporcionaba estilo a nuestra página web, esta versión nos trae elementos mucho más avanzados combinando con el html5 podemos desarrollar paginas interactivas



Animación en la Web

¿Qué formatos de animación podemos usar en un Sitio Web?


GIF, FLASH, Javascrip, jQuery y la novedad en html5 CANVAS 

¿Cuáles son los principales usos que se le da a la animación en un Sitio Web?
Generalmente se utiliza la animación para añadir publicidad, banner, detalles de diseño y efectos en algunas de las páginas.

Indique que animación usaría para:

  • Galería fotográfica: Javascrip y/o jQuery
  • Logotipo de empresa: Ninguna
  • Banner: Javascrip y/o jQuery

Imagen

¿Qué formato de imagen es el mas adecuado para los Sitios Web?


Las imagenes son muy importantes, juegan un papel decisivo para quien visita el sitio mostrando un ambiente agradable y atractivo, los formatos mas utilizados son GIF, JPG y PNG cada uno de ellos hace un papel específico.

¿Qué elementos debe considerar para elegir un formato de imagen?
Cada formato de imagen tiene sus ventajas e inconvenientes y dependiendo del uso que se le va a dar a la imagen es mejor utilizar uno u otro, partiendo del tipo de sitio que estemos desarrollando.

GIF: Ideal para dibujos, tiene una excelente comprensión, se le puede dar transparencia, podemos utilizar una paleta de 256 colores diferentes.

JPG: Ideal para guardar fotografías, utiliza 16 millones de colores diferentes.

PNG: Formato libre de derechos es utilizado para todo tipo de imagenes.
BMP: Es un archivo de mapa de bits, es decir, un archivo de imagen de gráficos, con píxeles almacenados en forma de tabla de puntos que administra los colores como colores reales o usando una paleta indexada.


Indique que formato de imagen usaría para:
  • Galería fotográfica
JPG porque es un formato liviano y permite cargar muchas fotografías.
  • Logotipo de empresa
BMP usualmente los logos llevan muchos colores.
  • Fondo de página
PNG este es el idoneo para los fondos ya que se adapta muy bien a las diferentes capas que posee un sitio.

Tipografía

¿Qué es la Tipografía?


Se refiere al tipo de letra usada en la World Wide Web. Cuando fue creado HTML, tanto la fuente tipográfica y como el estilo venían determinados exclusivamente por las preferencias del navegador Web utilizado. No existió ningún mecanismo para el control del tipo de letra en las páginas Web hasta que en 1995 Netscape introdujo la etiqueta <font></font>, la cual fue estandarizada para HTML 2. No obstante, la fuente especificada por esta etiqueta tenía que estar instalada en el ordenador del usuario o una tener una fuente de reserva, como la predeterminada para la Web, sans-serif o un tipo de letra monoespaciado. Las primera especificación de hojas de estilo en cascada (CSS en sus siglas en inglés) fue publicada en 1996 y proporcionaba las mismas prestaciones.


 ¿Cómo elegir la Tipografía adecuada para un Sitio Web?

Eso va a depender de los factores de mi sitio web por ejemplo, el logo, como quiero que se vea la tipografía, que tipo de sitio es, hay muchos tipos de tipografías parecidas pero ninguna es igual y en eso hay que tener mucho cuidado,  hay que elegir una tipografía amigable y legile.

 ¿Cúal es diferencia entre la tipografía Serif y Sans-Serif?

SERIF: Son letras con pequeños detalles adicionales en los border como colochos, ya que proporcionan firmeza, autoridad lo que le permite al ojo seguir la línea fácilmente, por ejemplo Georgia, Time Nwe Roman.



SANS-SERIF: Son letras que se caracterizan por no tener colochos en los bordes, exite poco conraste entre sus trazos gruesos y delgados, porporciona modernidad y alegría, son muy populares, por ejemplo Arial, Arial Narrow.

 ¿Cúantos estikos de fuentes es recomendable utilizar en un sitio web?

Los mas recomendable es utilizar dos tipos de letras para que el sitio se vea elegante y ordenado.

2.4 Colores, Tipografía, Imagen y Animación en la Web

¿Cúal es la importancia de los colores en el desarrollo web?

Al momento de diseñar un sitio web los colores juegan un papel fundamental ya que ellos pueden de alguna manera fortalecer la marca, conseguir ventas y guiar a las visitas a páginas o acciones concretas no sólo por la influencia en los sentimientos sino tambien por las preferencias de las personas.

¿Cómo elegir los colores o paleta de colores a utilizar en un sitio web?

Hay que saber elegir los colores a utilizar en una página o sitio web, la perfecta o mala combinación de los colores nos darán un buen o mal resultado, es necesario tener muy en cuenta que color o colores serían los mas indicados para el sitio que vamos a desarrollar, tener claro el objetivo que se busca y el signifado o meta que pretendemos alcanzar.

¿Cúantos colores es recomendable utilizar en un sitio web?

Mínimo 3 y máximo 5 colores podría ser el número de colores a utilizar dependiendo del sitio que se este desarrollando.

Indique que colores usaría, si tuviera que desarrollar un Sitio Web para:
  • Web de un Kinder
 Verde, amarillo y blanco, son colores alegres, enérgicos y vibrantes que generan un ambiente de confor y tranquilidad para los ninos y niñas que lo rodean.
  • Web de Panadería o Pastelería
 Amarillo, blanco y negro, son colores alegres, vivos, y generan apetito, por lo que son ideales para un tipo de negocio de pan como estos.
  • Web de Bufete de Abogados 
 Gris, negro y blanco, la combinación de estos colores dan un toque de profesionalismo, formalidad y carácter fuerte.
  • Web de Perfumería y Artículos de Belleza
 Púrpura, rosa, blanco y negro, representan innovación, romance, y sinceridad son ideales para las mujeres y jóvenes.
  • Web de Institución de Gobierno
 Azul, blanco y negro, porque son colores serios y van apegados a la naturaleza del sitio en cuestión.














2.3 Géneros de Sitios Web

Diseño Web

Ingresar a los siguientes sitios web y reflexionar sobre lo siguiente.

·         www.ugb.edu.sv
  •   Genero del Sitio: Educativo
  •  Elementos de diseño: Información completa y verás, publicidad, logo de la institución.
  •  Análisis: Tiene el principio de la unidad pues todos sus elementos están relacionados entre sí mostrando una buena presentación en cada uno de los elementos que conforman el sitio.
·         www.scotiabank.com.sv

  • Género del Sitio: Comercial
  • Elementos de diseño: Menú desplegable, slider, imágenes, logo.
  • Análisis: Tiene el principio de secuencia porque sus elementos están ordenandos en forma ascendente y es fácil para dirigir la vista.

 
  • Género del Sitio: Comercial
  • Elementos de diseño: Imágenes grandes, menú desplegable.
  • Análisis: Carece del principio de contraste ya que solo posee imágenes muy grandes con mucha publicidad lo cual no hace interesante para navegar ese sitio.


  • Género del Sitio: Comercial
  • Elementos de diseño: Tiene logo, tiene varios menús, tiene información de diversos servicios.
  • Análisis: Es un sitio que no tiene el principio de equilibrio y se muestra poco elegante y vistoso al usuario.























2.2 Metodología para la Creación de Sitios Web

Herramientas que apoyan el desarrollo de Sitios Web

  • CMS 
    Son las siglas de Content Management System, o lo que viene a ser un sistema de gestión de contenidos. Un CMS es un programa desarrollado para que cualquier usuario pueda administrar y gestionar contenidos de una web con facilidad y sin conocimientos de programación Web

CSS 
Es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.


JQuery 
Es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.


Javascript 
Es un lenguaje de programación, al igual que PHP, si bien tiene diferencias importantes con éste. JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web.





2.1 Principios Básicos del Diseño

·         Unidad
Durante el diseño este es el principio en el cual se complementan todas las partes (logotipo, encabezado, texto, etc.) del sistema entre sí con el fin de producir un efecto general y unificado, es mejor un diseño completo y bien estructurado que la suma de todas sus partes.

·         Armonía
Se da mediante la selección idónea de cada uno de los elementos que serán parte del diseño de manera tal que combinen, puede ser tamaño, forma, textura, etc.

·         Secuencia
Es el orden lógico y ordenado que se da durante el diseño el cual permite poder leer de izquierda a derecha y de arriba hacia abajo con el objetivo de cumplir lo que se pretende con el sistema.

·         Énfasis
Va a depender de lo que se quiera resaltar en el diseño, puede ser el encabezado, el logo o lo que se estime conveniente con la finalidad de que sea lo mas atractivo posible ante la vista de los usuarios.

·         Contraste
Es la parte mas interesante del diseño ya que lleva inmersa ese toque esencial que haga muy interesante de modo que no permita que haya aburrimiento a la hora de explorar el sitio, se hace a través de tamaños, formas, tonos, etc.

·         Equilibrio
Es el control que se logra tener en cada uno de los elementos ya sea en peso, posición que lo constituyen.

-Equilibrio Formal: Los elementos están distribuidos equitativamente de lado a lado.


-Equilibrio Informal: A pesar que los elementos están colocados al azar tienen sentido lógico además tiene efectos que pueden ser distintivos o imaginativos.

UNIDAD 2 GENERALIDADES PARA EL DISEÑO DE SITIOS WEB

  • Página Web
Página electrónica o ciberpágina, es un documento o información electrónica capaz de contener texto, sonido, ví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.
  • Sitio Web
Es una colección de páginas de internet relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet. Una página web es un documento HTML/XHTML que es accesible generalmente mediante el protocolo HTTP de Internet. Algunos sitios web requieren una subscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripción incluyen algunos sitios de noticias, sitios de juegos, foros, etc.
  • Diseñ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 navegabilidad, interactividad, usabilidad, arquitectura de la información; interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, vídeo 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.

1.6 La Web e Internet

         La Web 2.0

El término Web 2.0 o Web Social comprende aquellos sitios web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración en la World Wide Web. Un sitio Web 2.0 permite a los usuarios interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de vídeos, las wikis, blog. Es la evolución de las aplicaciones estáticas a dinámicas donde la colaboración del usuario es necesaria.

         La Web 3.0 o Semántica

La web semántica (del inglés semantic web) es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium con tendencia a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas (máquinas en la terminología de la Web semántica). Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales que describen el contenido, el significado y la relación de los datos se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos.

         Web  4.0

La Web 4.0 propone un nuevo modelo de interacción con el usuario más completo y personalizado, no limitándose simplemente a mostrar información, sino comportándose como un espejo mágico que dé soluciones concretas a las necesidades del navegante. Es una capa de integración necesaria para la explotación de la Web semántica y sus enormes posibilidades. Es un nuevo modelo de Internet que nace con el objetivo de resolver las limitaciones de la Red a día de hoy.

         Internet 2

Internet 2 (I2) o UCAID (University Corporation for Advanced Internet Development) es un consorcio sin ánimo de lucro que desarrolla aplicaciones y tecnologías de redes avanzadas, la mayoría para transferir información a alta velocidad. Una red telemática desarrollada principalmente por universidades estadounidenses que utiliza fibra óptica y provee servicios de red para la investigación y la educación, otorgando una red de prueba segura y un ambiente de investigación. A finales de 2007, Internet 2 comenzó a operar su más reciente Red de Circuito Dinámico (DCN), el Internet2 DCN, una tecnología avanzada que permite la asignación de circuitos de datos en la red de fibra óptica basándose en el usuario. Estas tecnologías incluyen herramientas para la medición y gestión del rendimiento de redes de gran escala, identidad segura y herramientas para la gestión de accesos, así como capacidades para agendar circuitos de alto rendimiento y gran ancho de banda.

1.5 Origen y Como Funciona Internet


1.4 Direcciones de Internet

  • Dirección de E-Mail:
Es un servicio gratuito en el que puedes enviar y recibir mensajes de manera instantánea a través de Internet, incluiyendo fotografías o archivos de todo tipo, para crearlo necesitas donde el nombre de usuario que es un nombre elegido por una persona o entidad y el nombre de anfitrión es el proveedor de E-Mail, el símbolo del centro se llama arroba.


Ejemplos:

1- hugofp_@hotmail.com

  •  Dirección Web:
Una Dirección web es el nombre de un documento o información electrónica adaptada para la World Wide Web y que puede ser accedida mediante un navegador para mostrarse en un monitor de computadora o dispositivo móvil. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web mediante enlaces de hipertexto.

Ejemplos:

1- http://comporsolutions.com/
2- http://www.salud.gob.sv/
3- http://www.ugb.edu.sv/
4- https://www.payless.com/
5- http://www.isdemu.gob.sv/

  •  Dirección de Internet:
 Las direcciones de Internet pueden ser simbólicas o numéricas:

Las direcciones simbólicas son las que usualmente utilizamos los humanos porque son más fáciles de recordar que las numéricas. Estas direcciones son cadenas de caracteres separadas por puntos. 

 Ejemplos:

1- www.pizzahut.com
2- www.pollocampestre.com
3- www.dominospizza.com
4- www.coca-cola.com
5- www.pepsi.com 

Las direcciones numéricas son las que usualmente utiliza el software IP. La forma numérica es una secuencia de 32 bits. Para que sea más inteligible, habitualmente se expresa en forma de números decimales separados por puntos (dotted-decimal en inglés), donde cada decimal representa 8 bits (rango 0-255). Por ejemplo, la dirección binaria 10010011. 01010011. 00010100. 00000010 se puede expresar en notación decimal como 147.83.20.2 (que a su vez se corresponde con la dirección simbólica www.upc.es). 
    
 Ejemplos:

1- 23.39.137.33  
2- 192.241.208.213
3-  205.218.22.49
4-  179.51.50.233
5-  179.51.50.234


  • Estructura de una URL:
Un localizador de recursos uniforme (conocido por la sigla URL, del inglés Uniform Resource Locator). El URL es una cadena de caracteres con la cual se asigna una dirección única a cada uno de los recursos de información disponibles en Internet. Existe un URL único para cada página de cada uno de los documentos de la WWW, para todos los elementos de Gopher y todos los grupos de debate Usenet, y así sucesivamente.

Ejemplos:

1- https://www.siman.com/elsalvador/ 
2- http://www.superselectos.com/
3- https://shop.pricesmart.com/
4- http://www.walmart.com.mx/#/tecnologia-y-hogar
5- http://www.prismamoda.com/

  • Dominios de Nivel Superior:
Un dominio de nivel superior o TLD (del inglés top-level domain) es la más alta categoría de las FQDN que es traducida a direcciones IP por los DNS oficiales de Internet. Los nombres servidos por los DNS oficiales son administrados por la Internet Corporation for Assigned Names and Numbers (ICANN). Alternativamente a los DNS oficiales hay una serie de servicios de DNS alternativos, como es OpenNIC.

Ejemplos:

1- .org 
2- .edu  
3- .gob
4- .net
5- .tv