Cuestionario

Para acceder al cuestionario sólo debes hacer click en el enlace:

 http://www.proyectosalonhogar.com/que_estudiar/testvoc3.HTML 

Luego de observar el siguiente video haciendo doble click sobre el mismo 
realice un brebe comentario de su contenido.

En esta imagen podrás ver los códigos de manera más clara, trabajados en el video que está a continuación.

 

Introducción  a HTML.5

Qué es el diseño de Experiencia de Usuarios

Diseño De Experiencia de Usuarios (UX)

 La experiencia de usuario o UX es el conjunto de factores relacionados con la interacción entre el usuario y los diferentes dispositivos a través de páginas web o programas digitales. El objetivo principal es que el usuario tenga la sensación de control y pueda manejar una web o un programa intuitivamente.

Como desarrollador Frond-End una de tus tareas es apoyar que el desarrollo de  la UX o experiencia de usuarios cumpla con las necesidades de los usuarios, haciendo agradable su experincia de navegación y con ello visite el sitio Web con má frecuencia e incluso que lo recomiende a otros usuarios. Mienstra mas facil e intuitiva sea la experiencia de usuario mayor vicitas podras tener el sitio, un sitio con muchas vicitas podria despertar el interes de otras empresas en solicitar un espacio para colocar anuncios en el mismo y de este modo poder generar nuevos ingresos.

En un sitio web los botones y elances son los principales elementos de interaccion con los usuarios, estos permiten accion de confirmacón  por esto debes de  cuidar tres aspectos.

1- La forma de los botones deben ser la mismas en todas las paginas que forman el sitio.

2-  La palabra e imagen que contenga el botón debe ser caracteristica de la acción que este realizará.

3- Animación de cambio de estado cuando el usuario pasa el puntero por el botón. 

Estoos aspectos le permiten al usuario manejar la pagina de manera intuitiva y verdaderamente fácil

¿Por qué es importante la experiencia del usuario?

La importancia de la experiencia del usuario radica en tener como objetivo primordial el superar las expectativas de los clientes para ganarnos su lealtad y de esta manera, aumentar los ingresos de un negocio.

https://www.questionpro.com/blog/es/importancia-de-la-experiencia-del-usuario/

Introducción a la Unidad-2-Nivel-1 (Desarrollo Web)

¡Espero que todos se encuentren gozando de buena salud física y mental!

En esta Unidad aprenderemos sobre la Interfaz Grafica De Usuario

Los invito a:

1-Observar el siguiente video y luego realizar su comentario con realición al mismo.

       2- Leer el texto ubicado debajo del video y comentar tu lectura.

   NOTA: El comentario es uno pero en parrafos separados, recuerda poner nombre, número y curso

 

El Diseño de Interfaz de Usuario sigue dos modelos:

1.     1-   Modelo del diseñador

2.   2-  Modelo del usuario 

    1-      Éste combina las necesidades del usuario y de las herramientas de las que dispone                 el  programador, para diseñar la interactividad de la plataforma o página web.

 

        

2-      Se enfoca en el comportamiento del sitio realizando pruebas de usabilidad, a partir del modelo de diseñador y modelo de usuario, el desarrollador decide que funcionalidades se pueden realizar con los recursos de programación disponible  (Experiencia e interacción del usuario)

Para lograr una interfaz de usuario exitosa es importante seguir estos principios:

1-      Anticipación

2-      Autonomía

3-      Modularidad

 

1-      Adelantarse a las necesidades de los usuarios, por ejemplo, reducir clic para llegar a los contenidos más importantes

2-      Se refiere a crear un ambiente flexible para que el usuario aprenda de manera fácil e intuitiva a navegar en el sitio web, por ejemplo, generar varios caminos para llegar al mismo contenido.

3-      Permite el crecimiento de la plataforma de manera sencilla, por ejemplo, crear una plantilla general en la que te puedas basar para crear todas las paginas que conformaran tu Sitio Web.

 La interfaz gráfica: son todos y cada uno de los elementos gráficos los cuales ayudan a los usuarios a comunicarse con un sistema, aplicación, plataforma Web o Sitio Web y de la misma manera dar instrucciones al computador.

De esta forma la interfaz grafica como desarrollador te permite generar una aplicación o en nuestro caso páginas web, que respondan a las necesidades de los usuarios, lo que te permitirá como empresa o institución llevar las informaciones o servicios que tus clientes o usuario necesitan, pero de una manera mucho más fácil e intuitiva.

 

Dentro de los aspectos necesarios en el diseño de la interfaz, se consideran los elementos de identificación, contenidos, y de acción que permiten la manipulación o uso eficaz de una página Web o aplicación por parte de los usuarios.

 

Por lo tanto, para que un sitio web sea exitoso se debe desarrollar una interfaz la cual se pueda ejecutar de manera fácil e intuitiva, de tal modo que el usuario pueda ejecutar las acciones y navegar en el sitio sin perderse en el mismo.

 

Es importante saber que al momento de diseñar la interfaz de nuestro sitio Web debemos de cuidar también lo que es su estética ya que esta tiene mucho que ver con la interfaz de usuario.

Integración y selección de Equipo de trabajo para Sitio Web

 La seleccón de tu equipo de trabajo es la parte más importante para lograr los objetivos del Sitio Web. Por ello, debes conocer las habilidades que debe tener cada profesional.

a-Diseñador gráfico: se encarga de realizar el aspecto visual del sitio. Crea iconos, botones,

transiciones e imágenes para hacerlo más atractivo.

b-Desarrollador front-end: se encarga de traducir el diseño del sitio a código HTML, CSS y JavaScript para estructurar el contenido y asegurar la accesibilidad. También controla tipografías, plantillas, formas del diseño y la interactividad

c-Desarrollador back-end: por lo general, es un programador en Java, Python, C# y PHP; aplica las mejores soluciones

para programar acciones y funciones. Además, analiza los procesos para identificar posibles problemas.

d-Administrador de base de datos: crea y mantiene la base de datos que está asociada al sitio web, garantiza la accesibilidad y seguridad de los datos, utiliza el lenguaje SQL para comunicarse con motores,

como MySQL, SQL Server, Oracle MariaDB y otros.

e-Administrador de servidores: es responsable del desempeño, configuración y seguridad de los servidores,

además de instalar, configurar y actualizar software que mantenga operando el sitio web. Por lo general, utiliza sistemas operativos basados en LINUX o PC.

f-Tester: realiza pruebas de funcionamiento al sitio web, con el fin de mejorar la usabilidad y navegación, así como encontrar problemas que puedan ser corregidos antes de liberar el sitio web

Diseñador gráfico: se encarga de realizar el aspecto visual del sitio. Crea iconos, botones,

transiciones e imágenes para hacerlo más atractivo

Tipos De Sitios Web.

 

Tipos de páginas web

Hoy en día si tu marca no tiene presencia en Internet, así como tu trabajo o lo que sea  que te diques en el mercado laboral, el público objetivo no sabe que existes. Es fundamental adaptar el propósito de tu negocio, trabajo o medio de producción a los diferentes tipos de páginas web.

 

Según  plataforma de datos Live Stats, Actualmente, hay más de 1.500 millones de sitios web en la red mundial. De estos, menos de 200 millones están activos. El hito de los mil millones de sitios web se alcanzó por primera vez en septiembre de 2014, según lo confirmó NetCraft en su Encuesta de servidores web de octubre de 2014 y lo estimó y anunció por primera vez Internet Live Stats (consulte el tweet del inventor de la World Wide Web, Tim Berners- Sotavento). Posteriormente, el número disminuyó, volviendo a un nivel por debajo de los mil millones (debido a las fluctuaciones mensuales en el recuento de sitios web inactivos) antes de volver a alcanzar y estabilizarse por encima de la marca de los mil millones a partir de marzo de 2016. Durante 2016, el número total de sitios ha crecido significativamente, de 900 millones en enero de 2016 a 1700 millones en diciembre de 2016. De 2016 a 2018, el nivel se ha mantenido prácticamente sin cambios. Desde 1 sitio web en 1991 hasta mil millones en 2014, el gráfico y la tabla a continuación muestran el número total de sitios web por año a lo largo de la historia:

 ¡Es hora de ponerse manos a la obra y darse a conocer en la Red! Sigue leyendo y entérate de cómo se clasifican las páginas web.

Páginas web según su construcción

 

Si tenemos en cuenta la estructura, las páginas web se pueden dividir en estáticas o dinámicas. Aunque esta clasificación tiene su factor diferencial en el contenido, la manera en la que se organizan cada una de ellas varía. Una página web estática es aquella que no se actualiza, en la que el contenido permanece fijo. Ha sido creada, principalmente, para que los usuarios tengan el papel de lectores. Sin embargo, una página dinámica es mucho más compleja.

Las páginas dinámicas se pueden adaptar con menús, imágenes o contenido que se actualice periódicamente, por ejemplo un formulario para la busqueda o compra de productos por internet, asi como un medio de pago.

Sitios Web/Desarrollo Web.

El desarrollo Web es el campo que implementa las distintas funcionalidades de un sitio web con lenguaje de programación. Se hace cargo de tareas como la creación o instalación de un gestor para la web o la conexión con bases de datos.

En ocasiones, no se tienen claras las diferencias entre Diseño Web y Desarrollo Web. Se usa el de “diseño web” como un término genérico que atañe a diseño y a desarrollo. El diseño web hace referencia a la apariencia y a la percepción del sitio web. Incluye el diseño, la navegación y la gama de colores del sitio web. También el diseño gráfico y el logo. Sin embargo, el diseño web está más relacionado con la estética y la experiencia del usuario. La meta de un diseñador web es hacer que un sitio web sea fácil de usar. De otra parte, el desarrollo web se encarga de las funciones y características de un sitio web. De la programación de un sitio web, de funciones como el registro, de los sistemas de gestión de contenido, del e-commerce y de cualquier aplicación de base de datos.

¿Qué es frontend?

El frontend es la parte del desarrollo web que se dedica a la parte frontal de un sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las animaciones y efectos.

Es esa parte de la página con la que interaccionan los usuarios de la misma, es todo el código que se ejecuta en el navegador de un usuario, al que se le denomina una aplicación cliente, es decir, todo lo que el visitante ve y experimenta de forma directa.

Un front-end, es la persona que se dedica básicamente al diseño web, pero esto no significa que no toque código, tanto el front-end como el back-end están en contacto con código todo el tiempo.

Dentro del área de front-end se trabaja con lenguajes mayormente del lado del cliente, como:

HTML (lenguaje de marcado de hipertexto, se utilizan etiquetas que estructuran y organizan el contenido de la web). 

CSS (se encarga del formato y diseño visual de las páginas web escritas en html) para darle estructura y estilo al sitio. 

Javascript (un lenguaje de programación, rápido y seguro para programar centros de datos, consolas, teléfonos móviles o Internet) para complementar los anteriores y darle dinamismo a los sitios web. 

HTML y CSS son lenguajes de marcado y estilo. Javascript es un lenguaje de programación.

¿Qué es backend?

Mientras que el frontend es la capa de programación ejecutada en el navegador del usuario, el backend procesa la información que alimentará el frontend de datos.

Es la capa de acceso a los datos, ya sea de un software o de un dispositivo en general, es la lógica tecnológica que hace que una página web funcione, lo que queda oculto a ojos del visitante.

El backend de una solución, determina qué tan bien se ejecutará la aplicación y qué experiencia, positiva o negativa, obtendrá el usuario de su uso.

Trabajar en este apartado supone algo totalmente diferente al frontend, ya que exige el dominio de otros términos de programación, lenguajes que requieren una lógica, ya que esta área es también la encargada de optimizar recursos, de la seguridad de un sitio y otros factores. 

Aquí se utilizan frameworks como PHP, Javascript, Python y Ruby, entre otros.

Un framework de desarrollo es el que trabaja en el lado del servidor, se encarga de que las personas puedan disfrutar de una grata experiencia, su propósito principal es que los procesos de desarrollos estén más acelerados, que se puedan volver a utilizar los fragmentos de códigos ya existentes y que se realicen buenas prácticas mediante el uso de distintos patrones.

Con ellos se pueden escribir códigos o desarrollar aplicaciones con el mínimo esfuerzo.

Las herramientas que se utilizan son editores de código, compiladores, debuggeadores para revisar errores de seguridad y gestores de bases de datos.

El flujo de trabajo de un backend consiste en darle funciones a un sitio; mientras que el frontend hace un sitio estático, el backend después le da funciones y adapta el sistema programado a ese sitio web. 

Otras funciones que se gestionan son:

• Creación de funciones que simplifiquen el proceso de desarrollo.
 
• Acciones de lógica.
 
• Conexión con bases de datos.
 

Además, debe velar por la seguridad de los sitios web y optimizar al máximo los recursos para que las páginas sean ligeras

Bibliografia:

Katia Hernández

Tiempo de lectura: 4 min

Publicación: 30 mar, 2021.

https://www.imagar.com/quienes-somos/

Sitio Web.

INTRODUCCIÓN

Internet se ha convertido en una parte esencial de nuestras vidas y la Web es la pieza central que conecta todas las tecnologías involucradas. Desde noticias y entretenimientos hasta aplicaciones móviles y videojuegos, todo gira en torno a la Web. Debemos acceder a un sitio web para abrir una cuenta por cada servicio que usamos, para conectar nuestras aplicaciones y dispositivos móviles entre sí, o para compartir la puntuación alcanzada en nuestro juego preferido. La Web es el centro de operaciones de nuestra actividad diaria, y HTML5 es lo que lo ha hecho posible.

 Todo comenzó tiempo atrás con una versión simplificada de un lenguaje de programación llamado HTML. El lenguaje, junto con identificadores y protocolos de comunicación, se concibió con el propósito de ofrecer la base necesaria para la creación de la Web. El propósito inicial del HTML era estructurar texto para poder compartir documentos entre ordenadores remotos. Con el transcurso del tiempo, la introducción de mejores sistemas y pantallas de color obligaron al lenguaje a evolucionar y poder así trabajar con otros medios además de texto, como imágenes y tipos de letras personalizados. Esta expansión complicó el trabajo de los desarrolladores, a quienes les resultaba cada vez más difícil crear y mantener sitios web extensos usando solo HTML. El problema se resolvió con la incorporación de un nuevo lenguaje llamado CSS, el cual permite a los desarrolladores preparar el documento que se va a presentar en pantalla

 La asociación entre HTML y CSS simplificó el trabajo de los desarrolladores, pero la capacidad de estos lenguajes para responder al usuario o realizar tareas como la reproducción de vídeo o audio era aún muy limitada. Al principio, algunas compañías independientes ofrecieron sus propias alternativas. Los lenguajes de programación como Java y Flash se volvieron muy populares, pero resultaron incapaces de ofrecer una solución definitiva. Las herramientas producidas con estas tecnologías aún operaban desconectadas del contenido y solo compartían con el documento un espacio en la pantalla. Esta débil asociación allanó el camino para la evolución de un lenguaje que ya se encontraba incluido en los navegadores y que, por lo tanto, estaba fuertemente integrado en HTML. Este lenguaje, llamado JavaScript, permitía a los desarrolladores acceder al contenido del documento y modificarlo de forma dinámica, solicitar datos adicionales desde el servidor, procesar información y mostrar los resultados en la pantalla, convirtiendo los sitios web en pequeñas aplicaciones. Originalmente, el rendimiento de los navegadores no era lo suficientemente bueno como para realizar algunas de estas tareas, pero con la incorporación de mejores intérpretes, los desarrolladores encontraron formas de aprovechar las capacidades de este lenguaje y comenzaron a crear aplicaciones útiles, confirmando a JavaScript como la mejor opción para complementar HTML y CSS. 

Con la combinación de HTML, CSS y JavaScript, las tecnologías requeridas para construir la Web de las que disfrutamos hoy en día estaban listas, pero todavía existía un problema que resolver. Estos lenguajes habían sido desarrollados de forma independiente y, por lo tanto, seguían sus propios caminos, ajenos a los cambios presentados por los demás. La solución surgió con la definición de una nueva especificación llamada HTML5. HTML5 unifica todas las tecnologías involucradas en el desarrollo web. A partir de ahora, HTML se encarga de definir la estructura del documento, CSS prepara esa estructura y su contenido para ser mostrado en pantalla, y JavaScript introduce la capacidad de procesamiento necesaria para construir aplicaciones web completamente funcionales. 

 La integración entre HTML, CSS y JavaScript bajo el amparo de HTML5 cambió la Web para siempre. De la noche a la mañana se crearon nuevas compañías basadas en aplicaciones web y mercados completos, lo que originó una era de oro para el desarrollo web.   Implementando estas tecnologías, las oportunidades son infinitas. La Web está aquí para quedarse y tú puedes ser parte de ella.

 

Pagina-1

1.1 Sitios web 

 Los sitios web son archivos que los usuarios descargan con sus navegadores desde ordenadores remotos. Cuando un usuario decide acceder a un sitio web, le comunica al navegador la dirección del sitio y el programa descarga los archivos, procesa su contenido y lo muestra en pantalla.

 Debido a que los sitios webs son de acceso público e Internet es una red global, estos archivos deben estar siempre disponibles. Por este motivo, los sitios web no se almacenan en ordenadores personales, sino en ordenadores especializados diseñados para despachar estos archivos a los usuarios que los solicitan. El ordenador que almacena los archivos y datos de un sitio web se llama servidor y el ordenador que accede a esta información se llama cliente, tal como lo ilustra la Figura 1-1

 Los servidores son muy similares a los ordenadores personales, con la diferencia de que están continuamente conectados a la red y ejecutando programas que les permiten responder a las solicitudes de los usuarios, sin importar cuándo se reciben o de donde proceden. Los programas más populares para servidores son Apache, para sistemas Linux, e IIS (Internet Information Server), creado por Microsoft para sistemas Windows. Entre otras funciones, estos programas son responsables de establecer la conexión entre el cliente y el servidor, controlar el acceso de los usuarios, administrar los archivos, y despachar los documentos y recursos requeridos por los clientes

Archivos 

 Los sitios web están compuestos de múltiples documentos que el navegador descarga cuando el usuario los solicita. Los documentos que conforman un sitio web se llaman páginas y el proceso de abrir nuevas páginas navegar (el usuario navega a través de las páginas del sitio). Para desarrollar un sitio web, tenemos que crear un archivo por cada página que queremos incluir. Junto con estos archivos, también debemos incluir los archivos con las imágenes y cualquier otro recurso que queremos mostrar dentro de estas páginas (las imágenes y otros medios gráficos se almacenan en archivos aparte). En la Figura 1-2 se representa cómo se muestran los directorios y archivos de un sitio web una vez que se suben al servidor.

Pagina-2

En el ejemplo de la Figura 1-2 se incluyen dos directorios llamados imagenes y recursos, y tres archivos llamados contacto.html, index.html y news.html. Los directorios se crearon para almacenar las imágenes que queremos mostrar dentro de las páginas web y otros recursos, como los archivos que contienen los códigos en CSS y JavaScript. Por otro lado, los archivos de este ejemplo representan las tres páginas web que queremos incluir en este sitio. El archivo index.html contiene el código y la información correspondiente a la página principal (la página que el usuario ve cuando entra a nuestro sitio web por primera vez), el archivo contacto.html contiene el código necesario para presentar un formulario que el usuario puede rellenar para enviarnos un mensaje y el archivo noticias.html contiene el código necesario para mostrar las noticias que queremos compartir con nuestros usuarios. Cuando un usuario accede a nuestro sitio web por primera vez, el navegador descarga el archivo index.html y muestra su contenido en la ventana. Si el usuario realiza una acción para ver las noticias ofrecidas por nuestro sitio web, el navegador descarga el archivo noticias.html desde el servidor y reemplaza el contenido del archivo index.html por el contenido de este nuevo archivo. Cada vez que el usuario quiere acceder a una nueva página web, el navegador tiene que descargar el correspondiente archivo desde el servidor, procesarlo y mostrar su contenido en la pantalla.  Los archivos de un sitio web son iguales que los archivos que podemos encontrar en un ordenador personal. Todos tiene un nombre seleccionado por el desarrollador y una extensión que refleja el lenguaje usado para programar su contenido (en nuestro ejemplo, los archivos tienen la extensión .html porque fueron programados en HTML). Aunque podemos asignar cualquier nombre que queramos a estos archivos, el archivo que genera la página inicial presenta algunos requisitos. Algunos servidores como Apache designan archivos por defecto en caso de que el usuario no especifique ninguno. El nombre utilizado con más frecuencia es index. Si un usuario accede al servidor sin especificar el nombre del archivo que intenta abrir, el servidor busca un archivo con el nombre index y lo envía de vuelta al cliente. Por esta razón, el archivo index es el punto de entrada de nuestro sitio web y siempre debemos incluirlo. 

 Lo básico: aunque index es el nombre más común, no es el único que podemos asignar al archivo por defecto. Algunos servidores designan otros nombres como home o default, e incluyen diferentes extensiones. Por ejemplo, si en lugar de programar nuestros documentos en HTML lo hacemos en un lenguaje de servidor como PHP, debemos asignar a nuestro archivo index el nombre index.php. El servidor contiene una lista de archivos y continúa buscando hasta que encuentra uno que coincida con esa lista. Por ejemplo, Apache primero busca por un archivo con el nombre index y la extensión .html, pero si no lo encuentra, busca por un archivo con el nombre index y la extensión .php. Estudiaremos HTML  más adelante en este y otros capítulos. 

Dominios y URL 

 Los servidores se identifican con un valor llamado IP (Internet Protocol). Esta IP es única para cada ordenador y, por lo tanto, trabaja como una dirección que permite ubicar a un ordenador dentro de una red. Cuando el navegador tiene que acceder a un servidor para descargar el documento solicitado por el usuario, primero busca el servidor a través de esta dirección IP y luego le pide que le envíe el documento.  Las direcciones IP están compuestas por números enteros entre 0 y 255 separados por un punto, o números y letras separadas por dos puntos, dependiendo de la versión (IPv4 o IPv6). Por ejemplo, la dirección 216.58.198.100 corresponde al servidor donde se encuentra alojado el sitio web de Google. Si escribimos esta dirección IP en la barra de navegación de nuestro navegador, la página inicial de Google se descarga y muestra en pantalla.  En teoría, podríamos acceder a cualquier servidor utilizando su dirección IP, pero estos valores son crípticos y difíciles de recordar. Por esta razón, Internet utiliza un sistema que identifica a cada servidor con un nombre específico. Estos nombres personalizados, llamados dominios, son identificadores sencillos que cualquier persona puede recordar, como google o yahoo, con una extensión que determina el propósito del sitio web al que hacen referencia, como .com (comercial) o .org (organización). Cuando el usuario le pide al navegador que acceda al sitio web con el dominio www.google.com, el navegador accede primero a un servidor llamado DNS que contiene una lista de dominios con sus respectivas direcciones IP. Este servidor encuentra la IP 216.58.198.100 asociada al dominio www.google.com, la devuelve al navegador, y entonces el navegador accede al sitio web de Google por medio de esta IP. Debido a que las direcciones IP de los sitios web siempre se encuentran asociadas a sus dominios, no necesitamos recordar la dirección de un servidor para acceder a él, solo tenemos que recordar el domino y el navegador se encarga de encontrar el servidor y descargar los archivos por nosotros.  Los sitios web están compuestos por múltiples archivos, por lo que debemos agregar el nombre del archivo al dominio para indicar cuál queremos descargar. Esta construcción se llama URL e incluye tres partes, tal como se describe en la Figura 1-3. 

Bibliografia:

El gran libro de HTML5, CSS3 y JavaScript 

 © 2017 MARCOMBO, S.A.     Gran Via de les Corts Catalanes, 594     08007 Barcelona     www.marcombo.com 

Aquie es donde dejará tú comentario, recuerda que debes poner al final del mismo Nombre/Curso/Seccion.