Desarrollador Front End
Desarrollador Front End El desarrollador Front-End es un especialista encargado de diseñar la interfaz de usuario de los
Views 173 Downloads 3 File size 215KB
Recommend stories
- Author / Uploaded
- Ranaguar
Citation preview
Desarrollador Front End El desarrollador Front-End es un especialista encargado de diseñar la interfaz de usuario de los sitios web. Utiliza las tecnologías de la información y comunicación para plasmar el contenido de manera que los usuarios lo puedan aprovechar al máximo. Puede convertir cualquier sitio web en un fenómeno mundial.
Introducción Como desarrollador Front-End deberás crear interfaces gráficas para los sitios web, de ti depende su éxito pues la cantidad de visitas es proporcional a la facilidad de uso y al estilo que hayas decidido. En esta capacitación aprenderás a:
Tomar los requerimientos del cliente para diseñar el sitio web a medida Crear mapas de navegación y wireframes que te ayuden a la codificación Codificar en HTML para organizar los elementos del sitio web Agregar estilo al sitio web con CSS para que sea más llamativo Incluir animaciones utilizando Javascript Realizar cambios al desarrollo para agregar nuevas funcionalidades Dar mantenimiento al sitio web para que funcione por mucho tiempo
Además podrás optimizar el tiempo de desarrollo utilizando herramientas como:
Framework. Editores de texto especializados
Finalmente serás capaz de evaluar el éxito o fracaso del sitio web al inicio o al final de su desarrollo para proponer mejoras en todos los elementos que transformen positivamente, la experiencia del usuario al navegar por el sitio.
Nivel 01 Lección 01 Diseño Web Crea propuestas utilizando diseño web. Desde que se creó la primera página web surgió la necesidad de contar con profesionistas que las diseñen. Proceso de diseño web Crear y mantener un sitio web requiere del uso de una variedad de tareas informáticas, manejo de bases de datos, manejo de servidores, desarrollo front-end, desarrollo back-end y diseño gráfico. Para diseñar un sitio web se sigue el siguiente proceso:
Obtención de los requerimientos del cliente Diseño de la apariencia de cada una de las páginas que lo compondrán Programación de su interfaz en el navegador web Diseño de su base de datos Programación de sus funcionalidades Renta o compra del servidor que lo alojará, junto con la base de datos Pruebas al desarrollo gestión de cambios al desarrollo Su administración en productivo
Dispositivos finales de usuario El sitio web debe ser adaptable a todos los dispositivos, computadoras, celulares, tablets. Cada dispositivo cuenta con al menos un navegador web para visualizar el sitio, sin importar el sistema operativo que utilice, esto hace del diseño web, la alternativo perfecta, en un inicio para un desarrollo multiplataforma. Es importante que diferencies entre sitio web y aplicación móvil, ya que el primero se puede ejecutar en todos los dispositivos vía un navegador de internet, y la segunda requiere para su visualización, un desarrollo específico para cada sistema operativo. En general un sitio web es más universal y su diseño más complejo.
Desarrollo web Conoce los diferentes tipos de caminos involucrados en el desarrollo web. El desarrollo del diseño web es un proceso muy importante, ya que en este, las ideas y requerimientos toman la forma final que el usuario experimentará en el sitio web. El desarrollo se divide en dos grandes procesos:
Desarrollo Front-End. Este traduce el diseño de la apariencia del sitio web al código que interpretará el dispositivo, con el que va a interactuar el usuario final, interpreta los requerimientos del cliente a objetivos de desarrollo, acomoda el contenido previamente definido, agrega imágenes, audio o video, estructura la información crea menús de navegación, agrega vínculos entre páginas del mismo sitio, agrega tipografías, agrega paletas de colores, comunica con la capa de back-end. Todas estas actividades las logra utilizando lenguajes de programación, como HTML 5, CSS 3, Javascript, estos lenguajes en conjunto hacen posible la visualización del sitio web e incluso atractivo a los usuarios.
Desarrollo Back-End. Se implementan las funcionalidades que el cliente tenga en el sitio web, por ejemplo, si se trata de un sitio de ventas por internet, que el usuario tenga que registrarse en el sitio poniendo sus datos personales, clasificar a los usuarios por región aceptar pagos por internet, tener un registro de lo que ha comprado cada usuario y más. Todas estas funciones se realizan en otros lenguajes de programación más poderosos, como C#, Java, Python, PHP y Ruby. Los desarrolladores back-end generan un código que se conecta a una base de datos, por ejemplo, cuando estás en una tienda en internet y realizas una búsqueda de productos, el código back-end revisa en la base de datos los productos buscados y entrega los resultados en la capa del front-end para que el usuario la pueda visualizar desde el mismo sitio web.
Los dos tipos de desarrollo, requieren de habilidades diferentes, uno está más orientado a la lógica de programación y base de datos y el otro está orientado a la visualización y a interfaces de usuario.
Lección 02 Diseño de la interfaz de usuario Toma en cuenta las mejores prácticas para el diseño de la interfaz de usuario. Como desarrollador front-end, deberás diseñar la interfaz de usuario, ya sea para un ambiente web o una aplicación, esta debe estar enfocada en la experiencia e interacción del usuario que se logra con gráficos, pictogramas, combinación de colores y simbologías llamativas, de esta manera se garantiza el éxito del sitio web. Interfaces de usuario. El diseño de la interfaz se ubica en el desarrollo front-end, que sigue los modelos: Modelo del diseñador. Este combina las necesidades e ideas del usuario y de las herramientas de las que dispone el programador, para diseñar la interactividad de la plataforma. Modelo del usuario. Se enfoca en el comportamiento del sitio, realizando pruebas de usabilidad. A partir de ambos modelos, el arquitecto decide qué funcionalidades se pueden realizar con los recursos de programación disponibles. Principios para el desarrollo de interfaces Para lograr una interfaz de usuario exitosa, sigue estos principios:
Anticipación. Adelantarse a las necesidades de los usuarios, por ejemplo, reduce clicks para llegar al contenido relevante.
Autonomía. Se debe dar al usuario un ambiente flexible para que aprenda rápidamente a utilizar la aplicación, por ejemplo, genera varios caminos para llegar al mismo contenido. Valores por defecto. La configuración predeterminada debe permitir al usuario explorar fácilmente la interfaz, por ejemplo, dejar ejemplos rellenados de formularios web. Modularidad. Permite el crecimiento de la plataforma de manera sencilla, por ejemplo, crea una plantilla general del sitio de la que puedes basarte a la hora de codificar todas las páginas web.
Toma en cuenta que diseñar tu interfaz siguiendo estos principios, reducirá la aparición de errores en las siguientes fases del proceso.
Experiencia de usuario Genera una interfaz basada en la experiencia del usuario. Como desarrollador front-end, una de tus tareas es apoyar el diseño de interfaces que cumplan con las necesidades del usuario, haciendo agradable su experiencia de navegación, y con ello visite el sitio web en más ocasiones, e incluso que lo recomiende a otros usuarios. Importancia de la experiencia del usuario La interfaz de usuario debe estar diseñada tomando en cuenta la experiencia de usuario, y la interactividad, pues entre más visitas reciba el sitio, mayor es la probabilidad de que los usuarios adquieran los productos o servicios que este ofrece. Al tener muchas visitas otras empresas ven la oportunidad de difundir sus servicios y pueden contratar un espacio publicitario en el sitio, generándose así otra fuente de ingresos. Uso de botones En un sitio web los botones son la principal interacción con el usuario, estos permiten acciones de confirmación, por ello debes cuidar tres aspectos:
La forma del botón debe ser la misma en todo el sitio La palabra que contiene el botón debe ser característica de la acción que realizará Animación de cambio de estado, cuando el usuario pasa el puntero por el botón
Estos aspectos deben permitir al usuario manejar la página de manera intuitiva, aunque sea la primera vez que la visita, los enlaces son esenciales en un sitio web, porque permiten la navegación entre sus páginas, pueden estar en el texto, en una imagen, anclados a un botón, entre otros. Deben tener las siguientes características:
Diferenciados del texto
El estado de un enlace debe estar anclado al color del mismo Deben llevar a un texto explicativo
Uso de otros elementos interactivos Existen otros elementos interactivos, con los que el usuario puede ingresar información a un sitio web, los más conocidos son:
Text área. El usuario puede ingresar texto para que opine acerca de la página o tema frecuente. Check button. Marcar múltiples opciones según el gusto del usuario. Radio button. Marcar la opción más adecuada para cada usuario.
Los formularios de un sitio web, utilizan estos elementos para que los usuarios se registren en tu página, es una buena manera para conocer el tipo de usuarios que visitan tu página y de esta manera realices cambios en tu sitio, que mejoren la experiencia del usuario.
Aseguramiento de la usabilidad Fomenta en todos los proyectos web el aseguramiento de la usabilidad. Uno de los objetivos más importantes en el desarrollo front-end, es que el usuario utilice y adquiera los servicios del sitio web, para ello, debes facilitar la usabilidad del sitio, es decir, que el usuario entienda y utilice sus funcionalidades de manera casi intuitiva, la usabilidad va muy ligada a la experiencia de usuario y al diseño de interfaces, por ejemplo, un sitio web de ventas no podría ser exitoso si su procedimiento de compra no es fácil de seguir, en este proceso intervienen mecanismos de programación bastante complejos, que el diseñador front-end debe simplificar para el usuario. Factores de la usabilidad Para que la usabilidad sea efectiva toma en cuenta los siguientes factores clave:
El tiempo que tarda un usuario en aprender a usar una interfaz La rapidez con la que el usuario recuerda los procedimientos particulares de cada función El reconocimiento de las características clave para utilizar el sistema en un futuro La asistencia al usuario en caso de problemas El grado de satisfacción de los usuarios cuando han usado el sistema
Para poder medir estos factores, se realizan pruebas de usabilidad, si la interfaz no pasa estas pruebas, debe ser rediseñada u optimizada. Mejoras de la usabilidad Para mejorar la usabilidad del sitio web:
El usuario debe saber qué hace el sitio web desde la primera visita a este La información debe estar organizada agrupada en menús de navegación y dando énfasis en mensajes principales Los contenidos deben estar desarrollados de manera clara y sin confusiones El diseño gráfico debe apoyar el contenido del sitio
Una interfaz pensada en usabilidad y en cómo piensa el usuario es necesaria, para que éste vuelva a consultarla, la jerarquización de la información tal vez es uno de los aspectos más importantes, sabiendo que la mayoría de los usuarios no lee todos los textos, sino que salta el contenido hasta encontrar lo que busca.
Nivel 02 Lección 01 Proceso de Desarrollo Front-End Como desarrollador front-end puedes participar en dos vertientes de trabajo complementarias para crear un sitio web. Diseño Si te involucras desde la planeación del sitio, deberás considerar los siguientes puntos:
Toma de requerimientos del cliente. Traduce las necesidades del cliente en objetivos de diseño Diseño del mapa de navegación. Modela la cantidad de páginas web que requerirá el sitio y su jerarquía. Diseño de Wireframes. Determina como se mostrará el contenido de cada página, paleta de colores, animaciones, imágenes entre otros.
En esta etapa apoyarás en el diseño del sitio a diseñadores gráficos consultores y expertos web. Si el mapa de navegación ya está diseñado con los wireframes de cada página, tu trabajo se centrará en la codificación del sitio.
Codificación
Codifica en HTML5 el contenido de cada una de las páginas siguiendo el wireframe correspondiente. Codifica en CSS el estilo de las páginas web, usando tipos de fuentes, colores, marcos y más. Codifica en Javascript para sumar interactividad a cada una de las páginas, usando animaciones y funcionalidades, como comunicación con bases de datos, consulta de información, generación de gráficas y tablas.
Aplica técnicas de SEO para que los buscadores web más usados encuentren el sitio web fácilmente y de esta manera se incrementen las visitas. Gestiona cambios de funcionalidades, páginas y contenido.
Terminando estos cinco pasos, el sitio web quedará listo, en cada paso debes pedir la aprobación del cliente para evitarle trabajar, su retroalimentación es invaluable.
Requerimientos del cliente Obtiene los objetivos del proyecto basado en los requerimientos del cliente. La identificación y el análisis de los requerimientos del cliente, requiere que evalúes previamente la problemática, así podrás formular recomendaciones y decidir qué hacer para atenderlos y resolverlos en medida de los recursos disponibles y las condiciones existentes. Definición del proyecto Los requerimientos del cliente siempre serán la pauta para definir la dimensión del sitio web, por lo general se deben delimitar los siguientes aspectos:
Será complementario a otro sitio web o se desarrollará desde cero. A qué área geográfica va dirigido, distritos, estados, a nivel nacional o mundial. Será privado, público o abierto. Qué institución lo administrará, por ejemplo, universidades, el estado, empresas u otros.
Independientemente de estos requerimientos, el cliente también debe estar involucrado en el diseño gráfico del sitio, además tendrá que validar el contenido y la forma en que será transmitido. Solución para sitio web de ventas online Un sitio web de ventas online, debe tener los siguientes requerimientos:
A nivel mundial Abierto Su control operacional lo pueden llevar empresas privadas Totalmente en línea
En general este tipo de sitios tienen ligeras variaciones de estos requerimientos y dependen totalmente de la tecnología que el cliente piensa o pueda utilizar en el desarrollo del mismo. El cliente al estar inmiscuido en el diseño es esencial mostrarle el trabajo gráfico y de contenido del sitio, para de esta manera, cumplir con todos los requerimientos, en caso de que el cliente proponga un cambio pertinente o posible, este se incluye en el diseño.
No se puede pasar a la parte de desarrollo si no se tienen los requerimientos bien claros y aprobados.
Mapas de navegación y wireframes Apoya en la creación de mapas de navegación y wireframes. La arquitectura de información en un sitio web, debe estar necesariamente orientada a los usuarios. Ya sea una página web o una aplicación, esta debe tener una estructura entendible, menús simples y una navegación eficiente. Diseño de interfaz Sigue estos pasos para comenzar con el proceso de arquitectura de información del sitio web: 1. Clasifica la información en categorías, con el fin de crear un índice de contenidos, este será el inicio de un mapa de navegación. 2. Jerarquiza el contenido en un esquema global, de tal forma que se ordene el contenido de mayor a menor relevancia, utilizando el índice previamente creado. 3. Ya sea que el sitio sea dinámico o estático, diseña elementos que comuniquen el esquema global a cada unidad de contenidos de la página web de tal forma que los elementos sean estructurados y funcionales. 4. Por último, se modelan las diversas acciones que el usuario realizará en el sitio web, en general es un esquema que relaciona al usuario con la interfaz del sistema, de este proceso se obtienen tres entregables: Mapas de navegación. Es la representación gráfica de la organización de los contenidos en una plataforma, su creación engloba: El diseño de espacios y planos para comunicar información de tal forma que el usuario tome caminos de forma virtual al visitar el sitio, basados en la información, se estructuran caminos que serán de interés para el usuario. Un buen mapa graficará todas las relaciones de jerarquía y secuencia y permitirá al equipo elaborar los escenarios de comportamiento de los usuarios. Wireframes. Son la diagramación de objetos, utilizando bocetos de cada una de las pantallas de la página web, su objetivo es definir el contenido y la posición de los diversos objetos, que conforman el sitio, de esta manera se definen los esquemas de navegación para usuarios. Cada área profesional de tu equipo de trabajo, buscará en wireframes la siguiente información: Desarrollo. Esta área brinda una aproximación a las funcionalidades a programar en el sitio web. Diseño. Le da el estilo visual, y la interfaz de usuario que debe tener la plataforma. Gestión de proyectos. Estima tiempos de trabajo y presupuestos.
Contenidos. Define dónde irá cada elemento, qué relevancia tendrá y el formato apropiado. Partituras de interacción. El diseño de la interacción en un sitio web o aplicación, puede levantar un proyecto o tirarlo, si no es capaz de responder a las necesidades de quienes navegan en él. Una gran herramienta para el diseño de la interacción es la creación de modelos con lenguaje visual, estos modelos es llaman partituras de interacción. Cada partitura funciona teniendo en cuenta estas capas:
Acciones del usuario. Objetivo último del usuario que accederá al sitio. Contacto directo. Elementos concretos de la interfaz con los que el usuario interactúa. Proceso. Funciones y comportamiento del sistema, para responder al usuario
Las partituras ayudan a cada profesional a unificar sus ideas y a tener una referencia visual sobre cómo quedará la plataforma, con base en las partituras, el cliente puede dar su punto de vista.
Lección 02 Lenguaje de la web Comprende el desarrollo front-end utilizando el lenguaje de la web. Para poder desempeñar tu trabajo debes saber cómo funciona internet y cómo se puede acceder a una página web, desde cualquier computadora o dispositivo móvil. Todo sistema de cómputo debe ser único en la web para poder acceder a internet, por ello las compañías que ofrecen el servicio de internet asignan direcciones únicas e irrepetibles a las computadoras, estas direcciones son llamadas Protocolo de Internet (TCP IP), para acceder a internet los navegadores usan el servicio de World Wide Web (WWW), junto con el Protocolo de Transferencia de Hipertexto (HTTP). Internet funciona bajo el modelo cliente-servidor, en el que todos los dispositivos móviles o computadoras son los clientes, y los servidores son computadoras con mayor capacidad de almacenamiento y procesamiento que alojan a las páginas web, cuando una computadora solicita al servidor ver una página web, éste responde mandado la página web a la dirección IP de dicha computadora, mediante el Protocolo de Comunicación HTTP. En este punto la máquina solo tiene la página web como archivo de hipertexto, entonces lo que el navegador realiza, es una traducción de este archivo dando como resultado lo que ves en la pantalla del navegador, este archivo es de extensión HTML que significa Lenguaje de Etiquetado de Hipertexto, tomando en cuenta lo anterior, es necesario crear un archivo en HTML, para que al subirlo a un servidor, los usuarios puedan visualizarlo como fue diseñado. Para crear un archivo HTML
Abre un blog de notas en tu computadora y da click en Archivo, da click en Guardar como y selecciona todos los archivos, en Codificación (Debajo de la ventana) da click en UTF-8, dando nombre al archivo con extensión punto HTML, guarda el archivo en donde tú desees. Ya que tienes un archivo HTML en blanco, agrégale información que quieras que aparezca en el navegador, para ello escribe lo siguiente:
Prueba
Hola mundo
Guarda el archivo, después cierra el archivo y da doble click sobre él, aparecerá una ventana del navegador que tienes definido por default con la página web que acabas de crear. Los archivos HTML tienen tres partes principales que se diferencian con tres etiquetas: Indica el lenguaje que se va a utilizar en todo el archivo. … Todo lo que esté entre estas dos etiquetas no se visualizará en la página web, por lo general contiene configuraciones y archivos que se utilizarán en el código. … Todo lo que vaya aquí se mostrará en la página web, aquí va el contenido. Dentro de se utiliza la mayoría de las etiquetas para acomodar el contenido, por ejemplo, insertar un párrafo de texto (
…
), encabezado principal (… va disminuyendo hasta …, es una etiqueta que se utiliza para ingresar títulos, entre menor sea el número, menor será la importancia del título). Es importante que notes que casi todas las etiquetas de HTML llevan un cierre marcado por una diagonal como / y este cierre delimita la etiqueta. HTML es un lenguaje de etiquetas definidas previamente y tienen diferentes funciones para acomodar el texto en el sitio web.Uso de links e imágenes en HTML Relaciona páginas web mediante el uso de links e imágenes en HTML. Cuando se crea un sitio web, las páginas que lo conforman están desagregadas, por lo que debes unirlas por medio de links. Direcciones de archivos Para poder hacer links entre páginas web de un sitio, debes saber exactamente la dirección en el servidor que las aloja, por ejemplo, tu sitio web se ubica en una carpeta en un servidor, si las páginas que quieres unir se encuentran en el mismo nivel que tu página principal, solo tienes que referenciar el nombre del archivo, por lo general, las páginas del sitio web se dividen en clasificaciones según el tema cuya ubicación será en otras carpetas dentro de tu carpeta principal, para crear un link a una página que esté dentro de una carpeta, sigue esta sintáxis /. Si el link se encuentra en una carpeta que está dentro de clasificación y ésta a su vez está en una carpeta principal, sigue esta sintáxis //. Generación de links en páginas web Para crear un link en una página web tienes que usar la siguiente etiqueta Texto . Dirección es el lugar en el servidor donde se encuentra el archivo HTML de la otra página web y el Texto es el que va anclado al link. Por ejemplo, en la carpeta de un sitio de música debe haber un link de géneros dentro de la página principal del sitio, la página de Géneros se encuentra en la carpeta de Clasificación, por lo tanto la Dirección que debe ponerse en la etiqueta es la siguiente //. Todos los links deben estar en la sección Body de cualquier página web. Cabe la posibilidad de que en la página web hagas un link a una página que está en una carpeta superior, por ejemplo, quieres hacer un link que te regrese a la página principal desde la página de Géneros, para esto sigue esta sintáxis Ver géneros. Los dos puntos (“..”) escalan en la jerarquía de carpetas por lo que si tu archivo está muy arriba, puedes hacer uso de ../../../ Insertar imagen en páginas web El procedimiento es el mismo al de los links lo que cambia es la etiqueta, como te podrás dar cuenta esta etiqueta no tiene cierre, esto es porque la imagen no engloba ningún tipo de texto, sino que el sistema solo inserta la imagen donde tú lo indicas, el tratamiento con las direcciones es el mismo que con los links, solo que el tipo de archivo será uno de imagen punto BMP, punto JPG, punto PNG, etc. Prueba los links para comprobar que funcionen y sean los correctos, da doble click en tú página para que se abra dentro del navegador y de ahí realiza las pruebas pertinentes.
Insertar listas y tablas en HTML Comunica datos ordenados al insertar listas y tablas en HTML. Agregar listas y tablas es de lo más común cuando se crea una página web, además son los elementos más utilizados al extraer información del back-end. En HTML, existen tres tipos de etiquetas para insertar listas: Lista ordenada Lista desordenada Elemento de lista, este siempre va dentro de la etiqueta de lista ordenada o desordenada Cada tipo de lista debe estar en el Body y por lo general dentro de una etiqueta, por ejemplo:
TítuloDelAlbúm
Ejecuta el HTML en el navegador para ver los resultados. Las siguientes etiquetas se utilizan para crear tablas dentro de una página web:
Se inicia una tabla Se nombre la tabla Se agrega una línea en la tabla Se indica el nombre de cada columna de la tabla Se agrega cada uno de los datos de la tabla
Las tablas siempre deben estar dentro del Body y no necesariamente en un párrafo, por ejemplo, para insertar una tabla: Escribe
| Nombre | ,Apellido | ,Edad | y cuando hayasutiliza | , | Miguel | ,Mendez | ,27 | , , cuando hayas terminado de llenar la tabla, cierra la tabla con
|---|
| Nombre | Apellido | Edad |
|---|---|---|
| Miguel | Mendez | 27 |
Ejecuta el HTML en el navegador para ver los resultados. Los sitios web recurren a listas y tablas para organizar su información visualmente.
Estructura en HTML Conoce la forma de un sitio web manejando la estructura en HTML. Es importante que comprendas la estructura de los archivos HTML, con el fin de facilitar al navegador la traducción del código a elementos visuales. En HTML existen diferentes tipos de versiones, y un navegador debe identificar en qué versión de HTML debe trabajar, la primera etiqueta lo indica, por ejemplo, para trabajar con un archivo de HTML5, la primera etiqueta debe de decir , si no dice la palabra DOCTYPE significa que estás trabajando con la versión 4.01, después de la primera etiqueta se coloca la etiqueta que integra la configuración de la página, aquí siempre se tiene que indicar la codificación que tiene el archivo, por esta razón utiliza la etiqueta de la siguiente manera , esto se refiere a la codificación que elegiste al crear el
archivo html, despúes está el body, donde se integra toda la información o contenido que quieras mostrar en la página, pero generalmente el body también se divide en diferentes secciones. Si el body es el contenedor de toda la información visible, se debe clasificar para que en un futuro el estilo gráfico sea más fácil de aplicar, estas nuevas secciones son: La cabecera de la página que puede llevar el logotipo del negocio
El título o el nombre El menú de navegación en el sitio La columna de contenido al lado derecho de la página Pie de página que puede llevar ayudas, contactos, política de privacidad y más. Grupo temático, en el que puedes construir tus propias secciones y a cada una de ellas, brindarle diferente diseño visual.
… … … ... …
Todas estas etiquetas se usan en las páginas web, cada una de estas deben ser visualizadas como cajas, algunas separadas y otras que contengan otras cajas, por ejemplo la caja de BODY contiene las cajas de HEADER, FOOTER y SECTION, la de HEADER contiene otra caja de SECTION, esto se representa en HTML así:
Una caja no puede contener otra a medias por lo que quedan prohibidas este tipo de codificaciones.
Ahora sabes lo básico para codificar HTML y ordenar el contenido de tu página web y así, empezar a construir el sitio.
Video y audio con HTML Mejora la interfaz de usuario agregando video y audio con HTML. En muchas ocasiones, usarás videos para darle más interactividad a la página web. La etiqueta de video es muy parecida a la de imagen, solo que esta sí tiene etiqueta de cierre: Escribe video en body, escribe el ancho del rectángulo que contendrá el video con width, escribe la altura del rectángulo que contendrá el video con height, después escribe src entre comillas, agrega la dirección del video, termina la etiqueta con
Esta etiqueta tiene muchos atributos como: Controls. Define si el cuadro de video tendrá los botones de Play, Pausa, Volumen, Barra indicadora, entre otros. Autoplay. Da inicio al video automáticamente después de cargar la página web. Poster. Agrega la imagen de tu elección para ponerla cuando el video aún no se reproduzca. Width/height. Define los lados de pixeles del rectángulo que contendrá el video. SRC. Determina la dirección del video. Loop. Define si el video se reiniciará cuando acabe. Después de aplicar algunos atributos para mejorar la vista del video, así puede quedar la etiqueta:
Es de suma importancia elegir un video con una extensión compatible con el navegador que deseas usar, ya que no todos soportan cualquier formato, por ejemplo, los formatos más comunes para HTML, son: MP4, WEBM, OGG. Para evitar problemas de compatibilidad con cualquier navegador, crea los tres formatos en la carpeta del sitio, generalmente es una carpeta dedicada a videos. Abre la etiqueta de video con los atributos que desees, abre la etiqueta source y agrega un atributo src, escribe type para indicar la extensión, repita la etiqueta source por cada tipo de formato, cierra la etiqueta de video:
De esta manera el navegador usa el video en el formato que le es compatible, es muy difícil que un navegador no sea compatible con alguno de estos tres formatos, por lo que el video siempre se desplegará. Agregar videos en tus páginas web, es una gran idea, ya que incrementan el número de visitas a la página por lo llamativos que son, todo depende del sitio web que estás construyendo.
Lección 03 Generar estilo visual al sitio web Mejora la interfaz de usuario al generar estilo visual al sitio web. Para presentar el sitio web al usuario, no basta estructurar la información sino darle un estilo visual definido por el equipo de diseño gráfico. Para desarrollar el aspecto del sitio
web, debes usar el lenguaje CSS o Cascade Style Sheet, con este puedes configurar colores, backgrounds, tipo y tamaño de letra. La configuración de estilo debe estar en el archivo HTML, dentro de la etiqueta HEAD, escribe la sintáxis correctamente para agregar estilo a cada etiqueta:
Starbuzz Coffee
Las etiquetas que tengan esta configuración de estilo tendrán un aspecto diferente cuando las veas en el navegador:
Starbuzz Coffee
Por ejemplo, para cambiar los párrafos de una página web, en el HEAD de un archivo HTML escribe STYLE, después escribe P y abre una llave, escribe BACKGROUNDCOLOR: RED; y cierra la llave, por último cierra la etiqueta con el cierre de STYLE: hmtl>
Starbuzz Coffee
Observa en el navegador como se ven los párrafos de la página web. Existen muchas reglas de estilo que puedes introducir en la parte de configuración para separarlas usa punto y coma. En páginas muy complejas la sección STYLE, podrá ser muy extensa haciendo muy difícil de entender, el código HTML, por ello es mejor separar la parte de CSS del archivo en HTML, creando un archivo CSS, que es referenciado en el HTML. Para crear un archivo CSS, sigue estos pasos:
Abre un bloc de notas y escribe todas las reglas de estilo que necesites Guarda el bloc de notas con extensión punto CSS Guarda el archivo en la misma carpeta que el archivo HTML Escribe la sintáxis en el HEAD en el HTML, para diferenciar el archivo CSS
De esta manera se separan los dos archivos, y el desarrollador simplifica la programación al no tener muchos códigos en un solo archivo HTML. Siempre debes estar en comunicación con el equipo gráfico y atento a los wireframes, para que cada página del sitio web tenga el estilo deseado.
Generar clases en CSS Aumenta la flexibilidad de estilos al generar clases en CSS. Para agregar diferentes estilos en una sola etiqueta de tu archivo HTML, debes aprender a clasificarlas. En HTML existen dos tipos de clasificadores y son: CLASS. Se refiere a clases ID. Identificadores La diferencia entre estos es que una clase puede ser referenciada por muchas etiquetas y un ID solo por una etiqueta por página web, para que el archivo CSS entienda a qué debe de darle estilo, pon selectores como punto (.) selector de clase, gato (#) selector de identificador. El archivo CSS quedaría “.Música”, reglas de estilo, “#Clásico”, reglas de estilo. De esta manera se pueden agregar diferentes estilos en diferentes etiquetas.
Después de clasificar se puede especificar a qué contenido o etiqueta se debe aplicar el estilo. Las siguientes formas de referencia a selectores, se utilizan para dar estilo a las etiquetas que tengan la clase ROCK, las etiquetas P con la clase ROCK, la etiqueta que tenga el ID ROCK, la etiqueta P que tiene el ID ROCK. Los clasificadores ID se utilizan en etiquetas únicas como HEADER y FOOTER, al contrario de los clasificadores de clase, que son comúnmente utilizados para etiquetas como P, H1. H2 y ARTICLE. Ahora cada etiqueta aunque se repita en un HTML, puede tener un estilo propio, de esta manera se tiene la versatilidad de configuración para crear un sitio web.
Contornos bordes y márgenes Realiza un acomodo de la información con el uso de contornos, bordes y márgenes. Las etiquetas que se comportan como cajas, deben colocarse correctamente en la página web, para ello, existen ciertas configuraciones. Utiliza los siguientes parámetros para posicionar una caja: Padding. La distancia de la información al border. Border. La línea que rodea la información y depende de la distancia del padding. Margin. La distancia del borde hacia un margen de caja o los límites de la pantalla.
Este tipo de parámetros generalmente se introducen en pixeles, la pantalla dependiendo de su resolución, está dividida en pixeles, estos generan un color característico en RGB, por lo que cada pixel, es capaz de entregar 16, 581, 375 colores si tu pantalla es FullHD, tiene una resolución de 1920 por 1080 pixeles lo que significa que tiene 2, 073, 600 pixeles. Por ejemplo, crea una clase con un borde de color negro y con un ancho de 1 pixel, agrega un contorno de 25 pixeles con un margen de 30 pixeles, junto con un background de color rojo. Si esta clase se la referencias a cualquier etiqueta, podrás ver los cambios al contenido en el navegador, ten presente que el background es todo lo que contiene el border, si debes poner una imagen en el background, escribe correctamente la sintaxis, en caso de que el contenido deba estar en los extremos, existe la etiqueta ASIDE, que coloca todo lo que se encuentre dentro de ella a la derecha de la pantalla, por ejemplo una lista. E un archivo HTML en BODY, escribe una lista de objetos que estén relacionados al tema de tu página, por último cierra la etiqueta con el cierre de ASIDE. Todo el contenido se desplegará al costado y podrás darle formato en el archivo CSS, agregándole una clase o un identificador a la etiqueta ASIDE. Es importante que si notas que un elemento no está junto a otro elemento, el margin siempre se referenciará a los límites de la ventana del navegador. Para darle formato al HTML por medio del CSS, debes considerar que se tratan de etiquetas que contienen otras etiquetas y que pueden tener diferentes configuraciones, según las necesidades de cada página del sitio web.
Uso de pseudo-clases Genera efectos básicos con el uso de pseudo-clases. Para la interactividad del sitio web, debes desarrollar pseudo-clases, esto vuelve más atractivo el contenido y genera más posibilidades de que el usuario visite con frecuencia el sitio. Cambio de etiquetas o elementos Para lograr un efecto interactivo en ciertos aspectos definidos por el código CSS, es necesario cambiar el estilo de los elementos en la página web. Por ejemplo, tienes un botón definido en la página web, anclado a una clase, cuando el puntero pase por el botón este debe cambiar de color, a esto se le llama hover y para realizar este efecto debes anclar la pseudo-clase a la que está anclada a la etiqueta, hazlo de la siguiente manera: Escribe el identificador de la clase, después pon dos puntos y el nombre de la acción, abre corchetes y escribe la regla, cierra corchetes, ahora siempre que pases el mouse por el botón este cambiará de color. Pseudo-clases frecuentes Existen acciones frecuentes en pseudo-clases por ejemplo, seleccionar los elementos por los que pasa el puntero, el elemento de entrada al que le has dado click con el mouse, un link previamente visitado, los links que no han sido visitados, un link activo. Las pseudo-clases se anclan a clases o a etiquetas pero si no existe etiqueta en la sección a la que quieras anclar la pseudo-clase, tienes que crearla con DIV, para ello haz lo siguiente: Escribe DIV en el BODY, escribe la clase a la que anclarás a esta etiqueta con CLASS nombreclase, agrega los elementos a los que les quieras anclar la clase y la pseudo-clase, cierra la etiqueta con un cierre de DIV, el CSS crea la pseudo-clase. Ahora ya puedes agregar secciones y crear el estilo de cada una de ellas.
Lección 04 ¿Cómo incorporar JavaScript al sitio web? Conoce como incorporar JavaScript al sitio web. Javascript es un lenguaje de programación ligero e interpretado por el motor del navegador, cuya función es brindar dinamismo y funcionalidad al contenido de una página web. Un archivo de Javascript tiene la extensión JS, para importarlo al HTML, debes agregar la siguiente línea al BODY: , se recomienda hacerlo en la parte final del código para que no se confunda con el contenido. Además el archivo JS debe estar dentro de la misma
carpeta donde se aloja la página web, en una carpeta propia para brindar practicidad y orden. Hay librerías o frameworks de Javascript que facilitan la programación en este lenguaje, estos existen gracias a la programación orientada a objetos, se componen de conjuntos de funciones y animaciones que son fácilmente reutilizables, el ejemplo más conocido es el framework JQuery, para usarlo debes descargar el archivo JS desde sus páginas web e importarlo en el HTML, como cualquier otro archivo de Javascript. Otra forma de importar un archivo es usar la dirección web donde se aloja el archivo JS, esto te permitirá tener la versión más actualizada del framework, sin embargo, está sujeta a su disponibilidad y existencia en el sitio web. En caso de usar JQuery y otros frameworks de Javascript juntos la línea para importar JQuery debe ir primero, ya que comúnmente, los demás frameworks dependen de JQuery, por ser uno de los primeros en desarrollarse.
Manejador de eventos Crea nuevos efectos utilizando el manejador de eventos. JavaScript usa manejadores de eventos para crear formas amigables de interacción con las páginas web. Un manejador de eventos es una función que utiliza un atributo especial de etiquetas HTML, su particularidad está en que puede llamar funciones que estén en los archivos JS que programes. Los cuatro tipos de atributos de eventos más importantes, dependen de la interacción que se quiere implementar, mouse, teclado, enfoque, carga de página. Eventos del mouse Dependiendo de la acción del usuario, podrás programar una función para estas acciones: click, doble click, colocar el cursor sobre un elemento, quitar el cursor de un elemento, mover el cursor sobre un elemento, dejar de presionar un botón. Estos atributos se usan a menudo para dar instrucciones al usuario o avisos de advertencia para confirmar una acción. Eventos del teclado Para programar una interacción con el teclado, usa los siguientes atributos: presionar una tecla y soltarla, presionar una tecla, dejar de presionar una tecla. Estos atributos se usan en su mayoría para dar instrucciones o captar la atención del usuario. Eventos de enfoque Estos eventos dirigen la atención del usuario a ciertos elementos: enfoca un elemento, quita el enfoque de un elemento. Se usan para dar instrucciones y facilitar las actividades del usuario. Eventos de carga de página
Para realizar una acción cuando la página se cargue o la abandone, usa estos atributos en las etiquetas BODY e IMG: al cargar, al abandonar. Normalmente se usan para cargar elementos que son pesados para la página como galerías, videos o animaciones. Una buena práctica que te ayudará a conservar el orden y estructura, es separar las etiquetas HTML y las funciones en Javascript y sólo llamarlas con los atributos. Observa el ejemplo mejorado de los atributos ONLOAD y ONUNLOAD. Usando una combinación de estos atributos y manteniendo buenas prácticas de programación web, podrás implementar mejoras en la usabilidad del sitio web, que lo volverán más atractivo por su facilidad de uso.
Uso de API Genera nuevas funcionalidades con el uso de API. Un API es una interface de programación de una aplicación y esta facilita la creación de funcionalidades más complejas a partir de otras ya existentes, sin la necesidad de comenzar de cero. Las API’s sirven como puente de comunicación entre aplicaciones y sistemas operativos, bases de datos, protocolos de comunicación, plataformas online.
API de Geolocalización Al elegir una API, investiga en su página de internet los permisos y requisitos para usar sus métodos y funciones, posiblemente necesites: keys, tokens, registro como desarrollador. Una vez que cumplas con estos requisitos realiza lo siguiente: Crea un archivo JS para realizar tus propias funciones usando la API Integra a tu archivo HTML, la línea que importa las librerías JS para el uso de la API, en esta línea deberás asegurarte de que incluyas la Key o Token que necesitas para acceder remotamente a la API. Identifica la estructura básica o constructor del llamado de las funciones de la API, por lo regular esta se compone de una función y de un objeto, que debes configurar con atributos que dependen de tus necesidades, por ejemplo, el objeto es un mapa y los atributos las coordenadas, a este objeto se asocia además el elemento HTML que contendrá el mapa, el DIV con ID “map”, utiliza un objeto de tipo INFOWINDOWS, para cargar la información que se desplegará en el mapa de las coordenadas de tu computadora, a partir de su dirección IP. Analiza mediante una condición, si el objeto NAVIGATOR funciona con tu explorador de internet, si no es así, mandará un mensaje de error, en la sección ELSE.
Usa el método GETCURRENTPOSITION, de la sección GEOLOCATION del objeto NAVIGATOR, para obtener las coordenadas de tu pc, y usa otra función para mandar un mensaje en caso de error cuando no las encuentre, en este caso como son funciones de Javascript, no es necesario escribir un ELSE, sino una coma que relacionará las funciones complementarias. Guarda las coordenadas en una variable JSON, después crea un objeto MARKER para dibujar tu posición en el mapa con un marcador, escribe el nombre de las variables que almacenan tus datos, dentro de las funciones de colocación sobre el mapa. Visualiza tu geolocalización en el navegador, no olvides aceptar la solicitud de compartir posición. Al identificar estas características, podrás adaptarte a cualquier API, ya que están basadas en el paradigma orientado a objetos, úsalas para destacar tu página y mejorar la experiencia del usuario.
Creación de formularios Obtiene información de los usuarios a través de la creación de formularios. Cuando usas Javascript para verificar un formulario, lo primero que debes tomar en cuenta son los manejadores de eventos y las etiquetas de HTML5. Tipos de campos de formulario HTML tiene etiquetas para los campos de un formulario que dependen del tipo de información que se desea ingresar, para utilizarlas: Elige el atributo correspondiente al tipo de información y colócalo después del signo igual del atributo TYPE, observa los tipos de información que se pueden desplegar: textos, contraseñas, selección de varias opciones, selección de una sola opción, subir un archivo. En el caso de opciones múltiples, añádelas como valores dentro de los atributos VALUE. Procesamiento de la información con Javascript Javascript usa una estructura de arreglos, para procesar la información de los elementos HTML, que ya dispone de una función, que automáticamente guarda estos elementos dentro de un arreglo, para eso: Defina una variable que guardará el arreglo. Asigna a la variable, el resultado de la siguiente función El primero elemento del arreglo es el primer campo del formulario, cada campo tiene una estructura de arreglo donde se guardan sus estilos, los valores de los datos que posee, e incluso funciones.
Esta estructura jerárquica facilita obtener la información que ingrese el usuario para procesarlos, por ejemplo, realiza lo siguiente: Identifica el elemento de mayor jerarquía FORM Coloca un punto para escribir el nombre del elemento que deseas acceder a sus atributos, ejemplo1. Coloca otro punto y escribe el nombre del atributo que deseas obtener VALUE, para obtener el valor de los datos que se han ingresado. Imprímelos con la instrucción CONSOLE.LOG para observar la información ingresada. Realiza esto con cada elemento y así obtendrás la información que el usuario escribe en tu formulario.
Proceso de verificación de datos Las etiquetas de HTML5 te ayudan a identificar cada elemento del formulario para capturar la información que ingrese el usuario, para validarla: Elige el tipo de etiquetas según la información que se ingrese. Usa el manejador de eventos ONSUBMIT para llamar una función que verificará que los datos ingresados sean correctos cuando se envíen, en este caso será la función de Javascript verificar. Procesa los datos del formulario guardándolos en una variable de arreglo, para eso usa la correspondiente, define la estructura de la función de verificar como una sucesión de condiciones en las que verificarás los datos ingresados por cada campo del formulario. Finaliza la función de una variable de retorno TRUE o verdadero, para indicar que todos los campos están correctos. Usa la variable de retorno RETURN, como indicador para la función que subirá la información a la base de datos. La ventaja de usar Javascript es su funcionalidad asíncrona, esto permite que cada función se ejecute en paralelo, asegurando la verificación de los datos y por consiguiente en su almacenamiento de la base de datos.
Nivel 03 Lección 01 Cambios al desarrollo front-end Mejora el sitio web al hacer cambios al desarrollo front-end.
Al implementar el desarrollo del sitio web, este puede tener algunos cambios, por lo que tendrás que documentarlos y aprobarlos o desaprobarlos cuando estos impacten el desarrollo de forma significativa. Gestión de cambios Las modificaciones que sufra el sitio web debes identificarlas, organizarlas y llevar su registro. Hay cuatro fuentes fundamentales de cambios a un desarrollo:
Nuevos negocios o condiciones comerciales Nuevas necesidades del cliente Reorganización del sitio web Restricciones de presupuesto
Todo cambio debe pasar por el Comité de control de cambios, que está conformado por el Director, el Arquitecto y el Administrador del proyecto web. Ellos deben aceptar o rechazar el cambio tomando en cuenta la posibilidad de ejecución del nuevo requerimiento, si rechazan el cambio deben proponer alguna alternativa o indicar en qué circunstancias es posible dicho cambio. Para ejecutar una modificación, el comité de control de cambios:
Evalúa el impacto Busca alternativas Aprueba los cambios Ajusta el plan del proyecto Notifica el cambio a los interesados Gestiona el proyecto de acuerdo al nuevo plan
Cada cambio debe estar sujeto a las normas empresariales de comunicación, siempre debe haber una solicitud de cambio impresa o en archivo electrónico, firmada por el responsable para que el desarrollador realice las modificaciones correspondientes, esta solicitud debe tener:
Fecha de aceptación Proyecto al que pertenece Módulo afectado Desarrollador responsable Descripción del cambio Justificación del cambio Prioridad del cambio
Acciones del desarrollador Una vez que llega la solicitud de cambio, debes realizarlo dentro del código del programa, se recomienda avisar sobre el ajuste en los comentarios dentro del código, marca el inicio del cambio poniendo en comentario:
Fecha de aceptación Proyecto al que pertenece Módulo afectado Programador responsable
Al término de toda modificación, escribe:
Proyecto al que pertenece Módulo afectado Programador responsable Fin de cambio
De esta manera se lleva control de las modificaciones al proyecto en términos de software y desarrollo.
Análisis de impacto Evalúa los riesgos utilizando un análisis de impacto. Después de identificar y clasificar los cambios en el sitio web, debes realizar el análisis de los riesgos que puede sufrir, esto permite evaluar las posibilidades y las consecuencias de cada uno de los cambios. Métodos de análisis de riesgos Existen dos métodos para determinar el nivel de riesgo del sitio web: Método cualitativo. En este la toma de decisiones se basa completamente en tu juicio, experiencia e intuición, generalmente se utiliza cuando el riesgo es bajo y no se justifica un análisis completo, las metodologías cualitativas son: brainstorming, cuestionario o entrevistas, reuniones de grupo, juicio de especialistas. Método cuantitativo. Permite asignar valores de ocurrencia a los diferentes riesgos identificados, mediante un modelo matemático de riesgos, todo método cuantitativo realiza un análisis de probabilidad. Modelo de riesgos Con una estructura de cálculos puedes hacer una representación de la realidad, en la cual se detectan variables significativas de riesgos, que se miden con base en las variables económicas. Para desarrollar este modelo matemático: Selecciona las funciones de probabilidad. Identifica las variables económicas Selección de funciones de probabilidad
Cada uno de los riesgos que se hayan identificado, tienen una función que define la probabilidad de que ocurra. Existen estas funciones: Triangular. Se conocen valores máximos y mínimos de la probabilidad, por ejemplo, esta función considera la probabilidad de que las ventas bajen. Uniforme. Se conoce el valor máximo de la probabilidad, por ejemplo, riesgos como la probabilidad de renuncia de profesionales. Discreta. Se conocen diferentes valores posibles de probabilidad, por ejemplo el valor de alguna divisa, como el peso frente al dólar, estas funciones grafican en el eje X el tiempo del desarrollo del sitio web y en el eje Y la probabilidad de porcentaje de que ocurra el riesgo. Software de análisis de riesgos Muchas empresas tienen softwares de análisis de riesgos muy precisos, que se alimentan de la información que se captura en ellos. La consideración de este software debe estar dentro del presupuesto, en caso de requerirse un análisis de riesgos más profundos, para que los objetivos del sitio web no se vean afectados, entre más nivel tenga un riesgo más observación y medidas preventivas deben realizarse.
Mantenimiento al sitio web Utiliza las mejores prácticas dando mantenimiento al sitio web. Una vez hecho el desarrollo del sitio web, y entregado un producto final, tendrás que darle un mantenimiento periódico, ya sea para corregir errores o agregar nuevas funcionalidades. Objetivos del mantenimiento del sitio web El mantenimiento está enfocado a asegurar el funcionamiento del sitio, para ello, debes contemplar:
Corrección de errores que surjan en las versiones de producción Incorporación de nuevas funcionalidades, con el fin de alargar el ciclo de vida del sitio web. Eliminación de funciones obsoletas, es decir, versiones viejas de algunos objetos del sitio web que solo ocupan espacio en memoria. Optimización del sitio usando objetos más eficientes, estos deben implementarse en todos los desarrollos del mismo.
Todo desarrollo front-end debe basarse en la adaptabilidad, de lo contrario un cambio puede ocasionarle graves daños.
Mantenimiento preventivo de sitios web
Muchos de los problemas encontrados en un desarrollo no derivan del software en sí, sino del hardware que lo contiene, por esta razón y para no agregar problemas al desarrollo:
No descargues software de internet, música, videos o juegos. Mantén actualizado el antivirus del servidor. Limpia y escanea el servidor cada seis meses en busca de virus. No abras o descargues archivos adjuntos de correos cuyo remitente desconozcas. Verifica que todas tus herramientas de software estén actualizadas.
El mantenimiento del sitio web es esencial para asegurar su ciclo de vida, además las correcciones o adaptaciones que realices servirán para preparar nuevas versiones del sitio web.
Cronograma de mantenimiento Elabora un control de las tareas creando un cronograma de actividades. Para tener mejor control de tus actividades, elabora un cronograma, este es un plan de las tareas que vas a realizar durante el proyecto en el cual determinas un tiempo específico para cada actividad. En una hoja de cálculo:
Abre un archivo en blanco, escribe en la celda de manera vertical los objetivos que quieres conseguir con la estrategia y los pasos o actividades que llevarás a cabo para conseguirlos, hazlo de manera resumida, ya que solo es una guía para ti. En las celdas horizontales escribe los meses con las semanas que los conforman, esto indicará los periodos de tiempo para cada actividad, por último dale formato a tu tabla y colorea las celdas de acuerdo a la duración tentativa que te tomará cada actividad.
Puedes detallar tus actividades tanto como quieras, lo importante es que tengas claro el orden de los procesos, de esta manera no olvidarás nada, podrás definir tus actividades y distribuir tus tiempos, al elaborar tu cronograma puedes ajustarte a los tiempos que decida el cliente corto, mediano o largo plazo o ajustarlos a tu criterio. Toma en cuenta que si el cliente te solicita un trabajo urgente deberás presupuestar la contratación de un mayor número de profesionales, si es así debes tener entera comunicación con tu equipo de trabajo para determinar los tiempos de cada profesional y mandar la propuesta del tiempo que tomará realizar el proyecto. Es conveniente realizar un presupuesto para diferentes lapsos de tiempo, por ejemplo 1 año, 2 años o 6 meses. Si tu cliente te da una fecha límite el cronograma debe ajustarse a ella, y por lo tanto también el presupuesto.
Nivel 04
Lección 01 SEO on-page Mejora el posicionamiento del sitio web utilizando técnicas de SEO on-page. El SEO on page depende de la construcción del sitio web, es decir, del desarrollador front end. Keywords Los motores de búsqueda necesitan del desarrollador para encontrar la página más fácilmente, por ello, en HTML existen los keywords que son palabras o frases que le facilitan al motor su búsqueda. Estas se agregan en el HEAD del HTML de la siguiente manera: En el HEAD escribe META y agrega el atributo de NAME con el nombre de KEYWORD entre comillas, agrega el atributo de CONTENT junto con las frases o palabras que quieras como keywords, separa cada una de las frases con una coma. Es importante que los keywords hagan referencia a tu página y que uses no más de seis ya que los algoritmos de búsqueda también penalizan y le restan calificación a tu página si detectan que utilizaste keywords que no se relacionan directamente con el tema del sitio. Ten presente que estos deben cambiar para cada página web que tenga tu sitio, esto es porque cada página web debe ofrecer diferente contenido aunque sea del mismo sitio. Calidad del contenido El contenido y su profundidad es lo que más evalúan los motores de búsqueda, para que este sea un buen contenido debe cumplir con tres elementos:
Coherencia. El contenido debe cumplir con lo que promete el sitio, si tu página es de ventas, tu contenido debe tener productos, descripciones de productos, ofertas entre otros. Emoción. El contenido debe producir un sentimiento en los usuarios y debe estar acorde al contenido de tu página. Por ejemplo, si el contenido trata de películas de terror, el sentimiento que debe producir en el usuario es miedo. Profundidad. Tu página debe contar al menos con etiquetas H3, sino los motores de búsqueda la considerarán irrelevante.
Además de estos elementos, tu página debe estar organizada de forma pertinente bajo el triángulo de oro. Toda la información relevante o más importante, debe estar dentro de ese triángulo, por lo que a la hora de codificar el contenido, oriéntalo de izquierda a derecha y de arriba hacia abajo.
Editor de texto especializado (El video no carga) Mejora su tiempo de codificación con el uso de un editor de texto especializado.
Uso de frameworks Mejora el estilo visual del sitio web con el uso de frameworks. Existen diversos frameworks o entornos de trabajo que facilitan la codificación por la versatilidad de sus funcionalidades. Los frameworks son archivos previamente programados y que ayudan en el desarrollo del sitio web, lo único que tienes que hacer, es incluirlos en el archivo HTML y usar sus funciones y clases. Los frameworks generalmente incluyen tres tipos de archivos:
CSS. Los estilos predefinidos que puedes escoger al utilizar el framework. TFF. Fuente de letras, archivos de las diferentes fuentes que puedes usar con el framework. JS. Javascript, funcionalidades o animaciones que hacen más interactiva la página web y que fueron programadas para facilitar su implementación en la página con el framework.
Por lo general, los frameworks pueden estar enfocados a la apariencia del sitio web o a sus funcionalidades, por esto, solo se pueden encontrar con archivos JS o combinados con este y CSS. Hay dos maneras muy sencillas de agregar los frameworks a tu archivo HTML:
Por descarga. Dirígete a la página oficial del framework y descárgalo, en tu archivo HTML, en la etiqueta HEAD, escribe LINK, después escribe el tipo de archivo y su referencia, por último escribe la dirección del archivo. Por referencia. Dirígete a la página oficial del framework y copia el enlace, en tu archivo HTML en la etiqueta HEAD escribe LINK, después escribe el tipo de archivo y su referencia, por último escribe la dirección web que copiaste en la página oficial.
Sin duda la primera manera es más segura, ya que tienes todos los archivos en tu pc o servidor, la segunda es buena también, pero en caso de que cierre el servidor que provee la URL de los archivos, la página que hayas creado no podrá ser visualizada.