TP4 Parte 2 - Página web - Jorge Laura - Fernandez Laurato

TP4 - PARTE 2SITIO WEB

Lorem ipsum dolor sit amet

Alumnos: Jorge Laura - Fernandez Lautaro

ASPECTO TECNOLÓGICO

Home page o página inicial

Cuando hablamos de las partes de una página web, generalmente nos referimos a su estructura. Es decir, todo el conjunto de elementos o de diseño o funcionalidades, tales como secciones o menús, que hacen la página web navegable y funcional. Es importante ser preciso en el mensaje que se quiere comunicar, que se utilicen los recursos necesarios como fotografías o videos de buena calidad. El diseñador debe contemplar su propuesta en función a todas las resoluciones de las plataformas donde se pretende visualizar el contenido, enfrentando distintos procesos de estructuración.

Lorem ipsum dolor sit amet

SOFTWARES DE DISEÑO WEB

Se utilizan software de diseño web en lugar de diseñar desde cero. Es más fácil, rápido y se obtiene un mejor resultado. Hay una variedad de herramientas disponibles que han sido diseñadas para adaptarse a varios niveles de dominio. Estas son algunas de las mejores herramientas de software para el diseño de sitios web.

Adobe Dreamweaver

Es el software de diseño de sitios web clásico para expertos y para amateurs. Logra integrar el diseño visual con las herramientas de codificación. Proporciona a los usuarios control y personalización a lo largo de todo el proceso de diseño.Permite crear funciones interactivas avanzadas, como menús desplegables, diseños de la red de fluidos, aplicaciones sencillas para dispositivos móviles, imágenes de sustitución y paneles plegables. Es que fácil de usar, porque desarrolla el código HTML por uno. Ayuda a crear la estructura de la página web que sostendrá el resto de su contenido.

Amaya

Microsoft Expressions Web

Tiene funciones de edición híbrida en una configuración de doble panel, lo que permite a los usuarios diseñar en WYSIWYG y con el código manual al mismo tiempo. Se parece al Adobe Dreamweaver, en ese sentido, ya que tiene plantillas web integradas que hacen el diseño web mucho más rápido y fácil. No es para principiantes porque no existen herramientas de dibujo. Un punto relevante en esta herramienta de diseño son sus funciones de SEO, muy importante al momento de crear una página web efectiva, ya que ofrece ideas y sugerencias para optimizar mejor el rastreo y posicionar en los motores de búsqueda el sitio web a diseñar.

Bluefish

Es un editor de texto avanzado gratuito y de código abierto, compatible con diferentes plataformas, como Linux, Solaris, Mac OS X y Windows. Tiene una amplia gama de herramientas para programación en general y permite el desarrollo de HTML, XHTML, CSS, XML, PHP, C, C + +, JavaScript, Java, Google Go, SQL, Vala, Ada, Perl, C, ColdFusion, Python, JSP, entre otros. Es un programa de codificación inteligente, no es un WYSIWYG; por lo que hay que saber codificar. Es una de las mejores herramientas de diseño web gratuitas, pues es útil para el diseño web para móviles.

Amaya

Es una herramienta gratuita y de código abierto de WYSIWYG. Crea páginas web ejecutables en Linux, Mac y Windows. Amaya se encuentra en el mercado disponible desde 1996 y, desde el 2012, tienen una versión actualizada.Es ideal para neófito en la materia, sin mucha codificación y compatible con HTML, CSS y XML.

Google SketshUp

Es la plataforma para la creación de objetos en 3D. Lo particular es que no solo es de exclusividad de los diseñadores (web), porque es de gran importancia para ingenieros y en el mundo de la construcción, entre otros. Es una herramienta de mucha utilidad al momento de elaborar cualquier tipo de comunicación y modelado en 3D. Va más allá de un simple modelado, crea documentos con múltiples páginas con anotaciones, notas, gráficos vectoriales e imágenes. Es de fácil uso, porque su sencilla interfaz de usuario facilitan mucho su uso en poco tiempo y, lo mejor, es de descarga gratuita. Otro punto a favor es que SketchUp tiene acceso directo a la colección de datos geográficos de Google Maps. Y, como ningún software puede ser una isla, este programa se adapta a tu flujo de trabajo actual, con importadores para DXF, 3DS, JPG, DWG, DAE, TIF, PNG, KMZ, entre otros, y puedes introducir ilustraciones, imágenes, modelos a tu propio gusto. También, exporta a formatos PDF, MP4, AVI, WEBM, OBJ, FBX, XSI y VRML

8 características para una web funcional

1. Encabezados que llamen la atención. Comenzar el título con un número ayuda, también se pueden incluir palabras de gran alcance por ejemplo: «cómo» y «por qué», «fácil», «rápido / ahora», «sobresaliente», «oferta especial», «tiempo», «última oportunidad», «garantizado», «demostrado». 2. Llamadas a la acción. Como textos o botones que motivan a los usuarios a realizar una determinada acción. Por ejemplo, botón de “Ver más”, o enlaces clicables con algún mensaje seductor como “Compra aquí́”. 3. Contenido de calidad. El contenido debe brindarles algo de valor a los usuarios, información útil . 4. Botones y ligas de redes sociales. Es una estrategia de marketing digital, por eso es importante que el sitio web tenga maneras de llegar a tus redes sociales, o formas de compartir tu página en las mismas. 5. Navegación sencilla. Trata de que existan “atajos” en las páginas internas para seguir navegando dentro de cada una y que la barra de menú de tu página tenga la opción de desplegar los productos y servicios. 6. Información de la empresa. La misión, visión, valores, historia, etc, esto para darle más información y seguridad a los usuarios sobre la página que están visitando. 7. Información de contacto. Para que los visitantes confíen más en la página, se añaden teléfonos, correos, formas de contacto (de ser posible en todas las páginas) y nombres de contacto. 8. Responsiva. Un sitio responsivo es aquel que tiene la capacidad de adaptarse a cualquier tipo de pantalla, ya sea en tabletas electrónicas, teléfonos celulares, pantallas de televisión, al ser responsivo, tu sitio se acomodará de acuerdo a cada pantalla.

PARTES DE UNA PÁGINA WEBEN FUNCIÓN DE SU CONTENIDO

Distribución del contenido: partes de una página web según el contenido. - Inicio o home- Contacto - Productos y servicios - Blog - Política de privacidad

Home También conocido como landing page, la sección de inicio es uno de los elementos básicos de una página web. Es justamente el primer pantallazo que obtiene el usuario al ingresar al sitio y determina el resto del viaje digital. Si el visitante no encuentra lo que busca en pocos pasos, es muy probable que termine abandonando el intento. Estos son los aspectos que debes tener en cuenta para destacar una landing page: Crear un buen diseño web con el contenido bien estructurado. Revisar los tiempos de carga, deben ser rápidos. El diseño web responsive, es crucial en este punto ya que el uso de los móviles o tablets para navegar por Internet es el más utilizado en la actualidad. Motor de búsqueda Otro de los elementos de una página web es la barra del motor de búsquedas o simplemente el botón de la lupa. Hoy en día, los usuarios de internet lo quieren todo y lo quieren ya. Pocas veces cuentan con el tiempo de navegar tranquilos en la web, por lo cual se debe procurar una buena indexación del contenido (utiliza etiquetas). Menú Un elemento que hace a la estructura básica de una página web es el menú. Parece un poco obvio pero muchos sitios web fracasan en esta tarea. Se debe pensar en qué lugar se lo ubicará, también en su forma y contenido. Puede ser: un menú desplegable, menú fijo, que indique otras secciones o directamente partes de información.

Productos y servicios Si nos preguntamos cuáles son las partes de una página web, seguramente coincidamos en que el cuerpo es la sección más importante de todas. Por ejemplo, si lo que buscas es crear tu propio e-commerce, la sección en donde se encuentren los productos a la venta es crucial para determinar el éxito de la web. Piensa en lo que tu cliente necesita y hazlo realidad. Información de contacto y botones con link a redes sociales Por otro lado, a la hora de identificar partes de una página web, encontramos los famosos botones con acceso a las redes sociales del negocio que nos permitirán una continuación en el contacto con el usuario. Además, los datos necesarios de contacto como correo electrónico, número de teléfono, dirección y en algunos casos formularios para dejar consultas. Blog Entre las diferentes partes de una página web también encontramos la sección de “blog” o artículos relacionados que complementan a la perfección el contenido con objetivo de compra-venta del sitio. Ofrecer este tipo de información de calidad, que apunte a los pain points de tu buyer persona, te destacará de la competencia. Asimismo, este elemento es crucial para aumentar el posicionamiento SEO del sitio.

ASPECTO FUNCIONAL

Lectura de texto en pantalla

Conceptos de redacción para sitios web:

Patrón F: 1. el usuario escanea el comienzo de la página en sentido horizontal, incluyendo en este examen rápido el primer párrafo. Es así como se origina la línea superior de esta “F” imaginaria.2. la mirada hace un recorrido vertical por la parte izquierda del texto, durante el cual el usuario lee las primeras palabras de un párrafo y salta a la línea siguiente. 3. el usuario busca información relevante para él. Si identifica palabras clave, la mirada vuelve a girar a la derecha en sentido horizontal. 4. En lo siguiente, la mirada permanece en el lado izquierdo de la pantalla y continúa hacia el final de la página en sentido vertical de arriba abajo.

Patrón F: 1. el usuario escanea el comienzo de la página en sentido horizontal, incluyendo en este examen rápido el primer párrafo. Es así como se origina la línea superior de esta “F” imaginaria.2. la mirada hace un recorrido vertical por la parte izquierda del texto, durante el cual el usuario lee las primeras palabras de un párrafo y salta a la línea siguiente. 3. el usuario busca información relevante para él. Si identifica palabras clave, la mirada vuelve a girar a la derecha en sentido horizontal. 4. En lo siguiente, la mirada permanece en el lado izquierdo de la pantalla y continúa hacia el final de la página en sentido vertical de arriba abajo.

Relevancia del patrón de lectura en F para SEO: El patrón de lectura en F ayuda que el consumidor encuentre lo que busca lo más rápida y fácilmente posible y que pueda extraer la información relevante para su caso particular.

Papel del eyetracking: Este método basado en el seguimiento de los movimientos del ojo permite identificar el recorrido visual que efectúan las personas en un cierto contexto. Los seguidores de ojos o “eyetrackers”, en la mayoría de los casos basados en vídeo, registran estos movimientos y los plasman visualmente para poder analizarlos posteriormente.

clasificación de sitios web

Sitios institucionales o corporativos

Sirven para marcar presencia y mostrar información sobre la empresa. En estas webs se incluyen los valores de la compañía, a qué se dedica o sus ventajas frente a la competencia.

Blogs

Se sube contenido, generalmente de un tema concreto. Puede utilizarse de manera personal o profesional. En otras palabras, sería como un cuaderno de bitácora digital.

Tiendas online o e-commerce

Se comercializan productos o servicios. Actualmente son sitios con un gran tráfico, ya que muchos comercios tradicionales han diversificado sus canales.

Buscadores

Se trata se sitios web donde los usuarios realizan consultas. Entonces, el buscador arroja unos resultados en función de la búsqueda.

Comparadores

Se trata se sitios web donde los usuarios realizan consultas. Entonces, el buscador arroja unos resultados en función de la búsqueda.

ASPECTO FORMAL

PARTES DE UNA PÁGINA WEB

En función de su estructura (estrucutura web):- Cabecera o header - Cuerpo o body - Pie de página o footer Partes de una página web en función de la distribución del contenido: Inicio o home Contacto Productos y servicios Blog Política de privacidad

ASPECTO TECNOLÓGICO30

Lorem ipsum dolor sit amet

Estructura de una páina web

Cuando hablamos de la estructura de una página web, tenemos que diferenciar estas tres partes: la cabecera, el cuerpo y el pie de la página.

CABECERA O HEADER

CUERPO O BODY

Una de las partes principales de una página web es la cabecera o header, la cual aloja los elementos de identificación del sitio. Por ejemplo: - Logotipo o identificador de marca. - Llamada a la acción (CTA). - Texto o titular. - Elementos de navegación. - Búsqueda. En el diseño moderno, todo el espacio por encima del pliegue de la página de inicio se considera cabecera. Al ser la parte estratégica de la página que la gente ve en los primeros segundos de carga de un sitio web, un encabezado actúa como una especie de invitación, así que debe proporcionar información básica sobre el sitio para que los usuarios puedan entender lo que se ofrece en segundos.

La segunda de las partes de un sitio web se trata del cuerpo o body, el cual es el centro que contiene la mayor parte del contenido de una página. Por ejemplo, la galería de fotos que quieres mostrar, un artículo que quieres que tus visitantes lean. Es un área que cambia de una página a otra. Las distintas partes del cuerpo de una página web generalmente se estructuran basándose en las columnas que distinguen el nivel de importancia del contenido. Para identificar las partes una página web en lo que se refiere al cuerpo o body en HTML, puedes hacerlo rápidamente entre las siguientes etiquetas: <body>contenido del cuerpo</body>

Si hablamos de las partes de un sitio web en lenguaje HTML, la cabecera debe aparecer entre las siguientes etiquetas: <header>contenido de la cabecera</header>

PIE DE PÁGINA O FOOTER

Ejemplo de estrucutra web

El color verde es la cabecera. Incluye el logotipo de la marca y el menú de navegación. Se mantiene estática. El color rojo es el cuerpo, esta información es diferente en cada página del sitio web. El color amarillo es el footer, siempre se encuentra al final de cada página y el contenido es siempre el mismo. Puede incluir el logo, información de contacto, métodos de pago disponibles y también los iconos de redes sociales.

Un pie de página cumple la misma función que la cabecera o header, es decir, es el área del sitio web que es constante de una página a otra, excepto que un pie de página está en la parte inferior en vez de la parte superior. Puedes poner lo que quieras en el pie de página, pero lo que suele haber en esta parte es: Información de contacto. Política de privacidad. Condiciones de uso. Mapa del sitio. Íconos de redes sociales. Enlaces a otras páginas importantes del sitio. Como pudiste darte cuenta en las partes de una página web anteriores, el pie de página se en HTML encuentra entre estas etiquetas: <footer>el contenido del pie de página</footer>

ANÁLISIS

WEB CORPORATIVA

- La cabecera se encuentra más ordenada. - En general tiene una mejor jerarquización y distribución de elementos. - Tipogaría legible. - Tiene botones llamadores. - Navegación sencilla por sus atajos

WEB SIN FINES DE LUCRO

- La tipografía no es buena para pantalla, no dan ganas de leer.- La jerarquización de elementos no es la mejor. La cabecera tiene imágenes en baja opacidad lo cual dificulta la lectura. - La distribución de elementos en el campo no es buena, está todo muy junto y no hacen uso de los laterales.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non pharetra ante. Suspendisse potenti. Vivamus non augue scelerisque, auctor elit eu, condimentum enim. Sed et sollicitudin est. Donec vel nulla et erat tempor venenatis ultrices et diam.

ESCRIBE UN TÍTULO AQUÍ

ESCRIBE UN SUBTÍTULO

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+INFO

¡GRACIAS!