front end
1.0.0
Preparación : Para este contenido, el estudiante deberá contar con una computadora con acceso a internet, un navegador web con soporte HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, etc.), un editor de texto (VSCode, etc.) .) y una plataforma de alojamiento (gratuita o de pago).
Cuando hablamos de sitio web, podemos notar que este término es la combinación de dos palabras en inglés: “web”, que significa red y se refiere a la red mundial, y “site”, que significa lugar. En este sentido, un sitio web o sitio es un lugar al que se puede acceder en Internet, a través de una URL, y que tiene un conjunto de páginas programadas en algún idioma.
Para comprender mejor este tema, veamos un ejemplo: cuando escribe la dirección blog.betrybe.com en su navegador de Internet para acceder al blog de Trybe, el navegador buscará dónde se encuentra este sitio web en Internet. Luego se realizará una solicitud al servidor.
En este servidor se almacenan todos los archivos de texto, imágenes y estilos que componen la página web. Luego, el servidor devolverá este conjunto de documentos al navegador para que pueda mostrar el contenido tal como lo ve en su pantalla.
Los sitios web pueden presentar diferentes formas y contenidos. Algunas de las opciones incluyen: tiendas virtuales, como Mercado Livre y Amazon, donde se pueden comprar y vender productos; sitios web y portafolios institucionales, utilizados por empresas y personas para presentarse y ser encontrados por los clientes; y blogs, como el que lees.
Además, los sitios web también se pueden clasificar en estáticos o dinámicos. Los sitios web estáticos generalmente se desarrollan utilizando HTML, CSS y JavaScript. Su contenido es más sencillo y no existe interacción con una base de datos.
Los sitios web dinámicos, además de aprovechar HTML, CSS y JavaScript, también utilizan lenguajes de programación más robustos, como PHP. Estos sitios tienen funcionalidad conectada a una base de datos. De esta forma, cada página a la que se accede puede aportar datos específicos.
Con Diseño Web es necesario observar la importancia de la interfaz para el desarrollo de sitios web, evolución de las tecnologías utilizadas en la construcción de páginas web ricas (web 1.0, web 2.0, web 3.0 y web 4.0), evolución de las interfaces (estéticas, funcionales y estructurales). ).
Por lo tanto, es necesario comprender la importancia de crear interfaces ricas para construir un sitio web, buscando la mejor experiencia de navegación y usabilidad para el usuario final, conociendo algunas tecnologías utilizadas en el pasado para construir sitios en línea. Desde esta visión, observar viejas tendencias del mercado, así como ver nuevas tendencias en el desarrollo de interfaces.
Paleta de colores:
Degradados:
Básicamente, el desarrollo web significa codificar páginas para Internet. Sin embargo, esta tarea va más allá del uso de HTML y CSS, las herramientas básicas para crear una página estática, que presenta información que sólo puede modificarse editando el código fuente.
Por el contrario, las páginas de un sitio web pueden ser dinámicas. Esto significa que el contenido mostrado se puede cambiar sin interferir con el código fuente. Para que esto sea posible, las partes dinámicas del sitio web se almacenan en una base de datos, a la que se accede siempre que es necesario para recuperar este contenido.
Esta característica permite el desarrollo de aplicaciones complejas, que utilizan reglas comerciales, API (interfaz de programación de aplicaciones) y mucho más. Por lo tanto, existe una división en actividades enfocadas al desarrollo web, codificación del lado del cliente (front-end) y codificación del lado del servidor (back-end).
Ejemplo de API con la estructura más utilizada actualmente para aplicaciones web y móviles, REST API también llamada RESTful API .
Las aplicaciones web son el número creciente de sitios en la Web; es decir, imitan las aplicaciones de escritorio en lugar de los documentos tradicionales y los enlaces estáticos de texto e imágenes que constituyen la mayor parte de la Web. Como ejemplo, tenemos procesadores de texto online, herramientas de edición de fotografías, sitios web de mapas, etc. Impulsado en gran medida por JavaScript, llevaron HTML4 al borde de sus capacidades. HTML5 especifica nuevas API (interfaz de programación de aplicaciones) para DOM (modelo de objetos de documento), que es una convención multiplataforma independiente del lenguaje para representar e interactuar con objetos y documentos HTML, XHTML y XML.
Estas nuevas API le ayudan a arrastrar y soltar objetos enviados por el servidor, como dibujos, vídeos y similares.
Estas nuevas interfaces que las páginas HTML exponen a JavaScript a través de objetos en el DOM facilitan la escritura de aplicaciones utilizando patrones altamente específicos, en lugar de simplemente trucos mal documentados.
Aún más importante es la necesidad de un estándar abierto que sea gratuito (de uso e implementación) que pueda competir con estándares propietarios como Adobe Flash o Microsoft Silverlight. Independientemente de lo que se piense de estas tecnologías o empresas, creemos que la Web es una plataforma vital para que la sociedad, el comercio y las comunicaciones estén en manos de un fabricante.
Ya hay millones de páginas web en uso y es imperativo que se sigan reproduciendo. Por lo tanto, HTML5 es principalmente un derivado de HTML4 que continúa definiendo cómo los navegadores deben manejar marcas antiguas como ,
El término interfaz puede tener varios significados dependiendo del área en la que se estudie. En el área de las Tecnologías de la Información, interfaz significa la posibilidad de comunicación entre dos sistemas que no podrían comunicarse de forma natural sin alguna ayuda externa .
HCI es el estudio de la interacción entre personas y computadoras. Es una materia interdisciplinaria que relaciona informática, artes, diseño, ergonomía, psicología, sociología, semiótica, lingüística y áreas afines. La interacción entre humanos y máquinas se produce a través de la interfaz de usuario, compuesta por software y hardware.
La interacción persona-computadora es una disciplina que se ocupa del diseño, evaluación e implementación de sistemas informáticos interactivos para uso humano y el estudio de los principales fenómenos que los rodean.
Enviar correo electrónico
El término medio digital es lo opuesto al medio analógico, que se configuraba a partir de una base material: el sonido se grababa en pequeños surcos, sobre una superficie de vinilo y, al pasar una aguja por esos surcos, se reproducía el sonido. En los medios digitales, el soporte físico prácticamente desaparece y los datos se convierten en secuencias numéricas o de dígitos, de ahí el uso del término digital. De esta manera, los sonidos, las imágenes y los textos son en realidad secuencias de números, lo que permite compartir, almacenar y convertir datos. En el sentido más amplio, los medios digitales pueden definirse como el conjunto de vehículos y dispositivos de comunicación basados en tecnología digital, que permiten la distribución o comunicación digital de obras intelectuales escritas, sonoras o visuales. Medios de origen electrónico utilizados en las estrategias de comunicación de las marcas con sus consumidores, generalmente denominados medios digitales.
Flash siempre ha sido la alternativa más viable para quienes necesitaban agregar videos y música a páginas web. Estaba y sigue estando presente en casi todos los navegadores y teníamos un formato que se podía utilizar sin mayores problemas.
Simplemente agregue una llamada al complemento y funcionará.
Debido a inconsistencias del navegador, fue necesario agregar tanto el
Debido a todo esto, HTML 5 llega con un nuevo soporte, nativo del lenguaje, para evitar el uso de complementos y comandos innecesarios. Actualmente basta con realizar la simple llamada, como si fuera una imagen y se dispara el archivo.
El problema que presenta el nuevo comando es el uso del atributo src que no funciona bien en algunos navegadores. Y si queremos que todos puedan abrir la página, con cualquier navegador, es necesario utilizar otro tipo de atributo. Por tanto, es común utilizar el atributo .
El elemento
< video width =" 426 " height =" 240 " controls > < source src =" video.mp4 " type =" video/mp4 " > < source src =" video.webm " type =" video/webm " > < source src =" video.ogg " type =" video/ogg " > video >
< audio controls > < source src =" audio.mp3 " type =" audio/mpeg " > < source src =" audio.ogg " type =" audio/ogg " > < source src =" audio.wav " type =" audio/wav " > audio >
Hay varios códecs posibles y necesitarás exportar al menos dos versiones para tener un mayor alcance.
Nota : Los códecs son programas que se utilizan para codificar y decodificar archivos multimedia. Comprimen el formato original, favoreciendo el almacenamiento, y lo descomprimen durante la reproducción, transformándolo nuevamente en imagen o audio.
Todos los ejemplos de audio y vídeo mencionados se importan mediante un documento en el directorio. Y la pregunta es ¿cómo importo un vídeo ya alojado en un sitio como YouTube o Vimeo? ¿Y cuál de las dos soluciones (vía documento o vía servidor) es la más ventajosa?
¡Veamos cómo importar vídeos de YouTube y Vimeo, paso a paso!
Hasta la aparición de HTML5, las tablas se utilizaban como recurso para diseñar diseños de páginas. Los diseñadores utilizaron tablas como cuadrícula para mostrar imágenes y texto, y fueron ampliamente utilizadas, convirtiéndose en la forma predominante de diseño de sitios web, creando así una apariencia rica.
Sin embargo, hoy en día, el uso de tablas está interfiriendo en la construcción de mejores sitios web, más accesibles, flexibles y funcionales, especialmente para los nuevos medios, como teléfonos móviles, tabletas, etc.
Estas tablas todavía existen en HTML 5 como recurso para mostrar datos tabulares, información proveniente de una base de datos. Con la nueva versión de HTML podemos crear sitios web completamente sin tablas, creando así diseños dinámicos que aparecen en pantallas grandes como en una computadora y se adaptan bien a la pantalla pequeña de un teléfono inteligente. Más adelante verás cómo crear diseños responsivos con HTML5 y CSS3.
El comando de tabla no se eliminó del lenguaje, pero se restringió su uso. Por otro lado, todavía tenemos varios sitios web que utilizan este recurso, por lo que es importante que entendamos cómo funciona para que podamos, en caso de ser necesario, mantener este tipo de páginas.
El comando para insertar una tabla es . Para empezar una línea , debemos introducir la etiqueta
y por una celda , que divide la fila de la tabla. divide la fila de la tabla colocando el contenido en negrita. Todos estos comandos terminan como y respectivamente.
< table >
< tr >
< td > td >
< td > td >
tr >
table > El comando Para elegir las filas internas que se mostrarán dentro de la tabla, utilizamos el atributo Vea algunos ejemplos: La parte de formularios HTML es muy importante para completar los datos que los usuarios ingresan en la página HTML. La recopilación de estos datos se realiza por el back-end con un lenguaje de programación back-end (PHP, JavaScript, Python, Java, etc.) que almacena y consulta estos datos en una base de datos (MySQL, PostgreSQL, MongoDB, OracleDB, etc. . Veamos las etiquetas de formulario: Formulario de inicio de sesión (repetitivo) : tiene una serie de atributos que ayudan con el formato de la tabla. Los principales son:
align="" alinea la tabla en tres posiciones: center , left , right y justify bgcolor="" determina el color de la mesa border="" determina el tamaño del borde, si es cero no muestra el borde cellspacing="" determina el espacio entre las celdas colspan="" determina la agrupación entre dos o más columnas de la tabla (de lado) rowspan="" Determina la agrupación entre dos o más filas de la tabla. (hacia abajo y hacia arriba) cellpadding="" determina el espacio entre el texto y el borde de la celda Atributo de reglas
RULES , dentro de la etiqueta. Los complementos de este atributo son: none ninguna línea completa. all para mostrar todas las filas entre cada columna y fila en la tabla (predeterminado) rows para las líneas horizontales entre cada fila de la tabla. cols para las líneas verticales entre cada columna de la tabla. groups para filas entre grupos de columnas y secciones horizontales, definidas por etiquetas especiales como < table border rules =" all " 6 >
">
">
">
">
ETIQUETAS de formulario
Senha: