Tener presencia en línea no es opcional: es fundamental. Ya sea que tengas un negocio, una marca personal o un proyecto educativo, un sitio web es tu carta de presentación al mundo.

Pero… ¿sabías que no todos los sitios web son iguales? ¿Conoces sus componentes y características más importantes? ¿O cuál administrador de contenido (CMS) te conviene usar?

En este post te lo explicamos todo. Además, te invitamos a explorar el caso de estudio “El Renacer Digital de Clara”, donde verás cómo una mala elección de plataforma casi termina en desastre… hasta que entendió lo que significa realmente tener un sitio web.

¿Qué es un sitio web?

Un sitio web es un conjunto de páginas web relacionadas, accesibles desde un dominio, que permiten mostrar contenido, interactuar con usuarios, vender productos, compartir conocimientos, entre otros fines.

Tipos de sitios web más comunes

1. Sitios informativos
2. Blogs o bitácoras
3. Tiendas en línea (e-commerce)
4. Sitios corporativos
5. Portafolios digitales
6. Plataformas educativas
7. Foros y comunidades
8. Landing pages
9. Sitios gubernamentales
10. Aplicaciones web

Cada tipo de sitio tiene objetivos, funciones y estructuras distintas.

Características clave de un buen sitio web

• Diseño responsive (adaptable a móviles)
• Rápido tiempo de carga
• Fácil navegación
• Contenido actualizado
• Seguridad (https, protección contra malware)
• Accesibilidad
• Posicionamiento SEO
• Integración con redes sociales
• Formularios de contacto
• Escalabilidad

Componentes principales de un sitio web

• Dominio: nombre único (ej. tunegocio.com)
• Hosting: servidor donde vive el sitio
• Frontend: lo que ve el usuario (HTML, CSS, JS)
• Backend: lógica del sistema (PHP, bases de datos, etc.)
• CMS: sistema que facilita la creación y edición de contenido
• Plugins/extensiones: funcionalidades adicionales
• Analítica: estadísticas de visitas y comportamiento
• Base de datos: almacenamiento de información
• Certificado SSL: protección de datos
• Archivos multimedia: imágenes, videos, audio

Administradores de contenido (CMS) más populares

• WordPress (el más usado del mundo)
• Joomla
• Drupal
• Wix (más limitado, pero intuitivo)
• Shopify (ideal para e-commerce)
• Ghost (para bloggers)
• Webflow (orientado a diseño)

Un buen CMS te permite gestionar tu sitio sin necesidad de saber programar, con plantillas, plugins y opciones de personalización.

¡Comienza ahora!

No dejes que te pase lo que a Clara. Conoce tus opciones, toma decisiones inteligentes y empieza a construir una web que represente lo mejor de ti o de tu marca.

Lee el caso de Clara, encuentra las palabras ocultas y completa el crucigrama. ¡Tu viaje digital comienza aquí!

Actividad de aprendizaje

Lee el caso de estudio “Web de una mypyme” después de leerlo resuelve las siguientes preguntas de reflexión:

1. ¿Qué ventajas tiene para una MIPYME como “Tienda Natural” contar con una tienda en línea y un blog integrado en su sitio web?
2. ¿Cómo podría la empresa aprovechar el SEO para mejorar el posicionamiento de su sitio web en motores de búsqueda? Menciona al menos tres estrategias.
3. ¿Cuáles son los elementos clave que debe tener el carrito de compras para asegurar una experiencia de usuario fluida y segura?
4. Si quisieras utilizar las redes sociales para generar tráfico hacia el sitio web, ¿qué tipo de contenido recomendarías publicar y en qué plataformas?
5. ¿Qué indicadores de rendimiento o métricas clave deberían analizarse mediante Google Analytics para medir el éxito del sitio web?
6. ¿Qué desafíos podría enfrentar la empresa al integrar un servicio de atención al cliente en línea, y cómo se pueden abordar para mantener la satisfacción del cliente?

Complementa el caso anterior con el “El Renacer Digital de Clara” y reflexiona sobre la importancia de tomar decisiones informadas al momento de crear tu sitio web. Después de leerlo responde las siguientes preguntas de reflexión:

1. ¿Qué tipo de sitio web es el más adecuado para tus objetivos personales o profesionales?
2. ¿Conoces las características técnicas que debería tener un sitio web eficiente?
3. ¿Qué diferencia puede marcar el uso de un CMS en la gestión de tu contenido?
4. ¿Has considerado qué componentes necesita tu sitio web para ser seguro y funcional?
5. ¿Cómo puedes transformar un error digital en una oportunidad de aprendizaje?
6. ¿Estás tratando tu sitio web como un proyecto serio o como un pasatiempo improvisado?

Actividades de reforzamiento

¡Aprender también puede ser divertido!
Refuerza lo que has aprendido con estas dos actividades:

• Sopa de letras: Resuelve la sopa de letras
• Crucigrama

Extras

Lee los contenidos y empieza a crear tu primera carta de presentación digital:

• Crea una cuenta en wp.
• Diseñando una web.
• Ordenando entradas.

La entrada Del blog a Sitio Web se publicó primero en Frexus.

Regularmente siempre se es partidario de instalar todo directamente en el equipo, a lo mucho virtualizar un window por cuestiones de ofimática en donde no exista alguna compatibilidad con las diversas alternativas.

Sin embargo cuando un cliente te solicita crear el ambiente clásico de desarrollo en una macbook air con chip M1 y su actualización 12 del sistema operativo, te sueles topar en que muchas cosas cambian y que lo mejor en todo caso es correr o emular (en el mejor de los términos) el ambiente dentro de la M1. Y es ahí donde entra docker.

Después de varias horas invertidas en el aprendizaje de conceptos y demás utilidades. Se pudo montar un ambiente clásico web. Lo que se puede apreciar es que cuenta con una aplicación de escritorio para poder descargar imágenes, montar los contenedores y hacer uso de microservicios (claro en la aplicación que se vaya a crear).

Y lo que más agrado, fue que se puede hacer lo mismo desde una terminal, me gusto que se puede emular las partes básicas de un sistema operativo (alpine, debian, ubuntu entre otros). Otra cosa cosa que encanto fue la fácil que llega ser montar, crear tu propia imagen, usarla, eliminarla; y como en su momento me lo comentaron “el consumo de recurso” es mínimo.

Al calce dejo el script con el que se monto el ambiente clásico, (claro por clásico se hace referencia a un servidor web -apache- un lenguaje de programación -php- el gestor de base de datos -mariadb- y no puede faltar la interfaz gráfica -phpmyadmin-).

version: "2"
services:
    www:
        container_name: www
        image: php:7.2-apache
        restart: always
        ports:
            - "80:80"
        volumes:
            - ../public/:/var/www/html
        links:
            - db:db
        networks:
            - default
    db:
        container_name: db
        image: mariadb:latest
        restart: always
        ports:
            - "3307:3306"
        volumes:
           - db-data:/var/lib/mysql
        environment:
            MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
            
    phpmyadmin:
        container_name: phpmyadmin
        image: phpmyadmin/phpmyadmin
        restart: always
        links:
            - db:db
        ports:
            - 81:80
volumes:
    db-data:

¿Qué es lo que hace?

Bueno, pues crea tres contenedores uno web, donde esta apache y php, llamado www. Otro contenedor llamado db donde estará la instancia de mariadb y la contraseña del root estará vacía. El contenedor número tres tiene de nombre phpmyadmin y si en él se encuentra solamente la interfaz gráfica que gestiona todo en maria db, esté estará disponible desde el puerto 81 del localhost y esta vinculado con el contenedor db. Y se crea un volumen llamada db-data donde todos los contenedores estarán convergiendo.

¿Cómo funciona?

Primero el código anterior debe de estar guardado en un fichero con nombre “docker-compose.yml“, se copia tal cual y luego se debe de ejecutar el comando:

% docker-compose up -d

Después ya solo escribes en el navegador localhost:81 y se mostrará la página de acceso de phpmyadmin. Si escribes localhost se mostrará la página de apache. Y lo interesante es que se crea una carpeta con el nombre de public y dentro de ella es donde se colocarán todos los proyectos que se quieran hacer usando la tecnología clásica apache + php + mariadb + docker.

¿Qué se puede hacer?

Aún no se si pueda ser posible emular de tal grado una ofimática de Microsoft en docker aunque solo sería para los que usamos distribuciones basadas en linux. Aun falta por aprender más cosas. como construir tu propia imagen de docker, la ventaja es que si formateas llevas esa misma imagen a otro equipo la “instalas” y se tiene de nuevo el ambiente creado para desarrollar.

La entrada Docker, sus manías y encantos. se publicó primero en Frexus.

Por lo anterior una empresa de origen yucateco, y con un bagaje muy tradicional para la extracción, empaquetado, etiquetado y venta de su producto (miel de abeja), piensa muy tentativamente en incursionar en la presencia por internet. Cabe aclarar que no tiene ni idea de como iniciar, pero tiene la intención.

Como programador web, la empresa extractora de miel de abeja te realiza las siguientes preguntas:

1. ¿qué tipo de sitio web le recomendarías?
2. ¿qué tipo de maquetado debería de llevar?
3. ¿cuantas páginas y que tipo de contenido debe de tener el sitio?
4. consideras ¿qué debería de llevar un formulario de contacto?
5. ¿qué elementos debe de tener el formulario?
6. ¿cómo sería su maquetado / modelado / diseño web?
7. ¿qué tipo de dominio le recomendarías?
8. ¿qué elementos de html utilizarías para crear las páginas de esta empresa?
9. ¿usarías un CMS? ¿porqué?
10. ¿qué tiempo invertirías en hacer el sitio?
11. ¿qué tiempo llevaría los mantenimientos?
12. ¿cuanto costaría?
13. ¿qué tiempo se llevaría para desarrollarlo?

Nota: como programador web, recuerda que lo recomendable es entregar una propuesta donde se incluya la respuesta a las preguntas.

La entrada El html y las empresas se publicó primero en Frexus.

Programación Web | Regresando a clases presencial

La entrada Programación Web | Regresando a clases presencial se publicó primero en Frexus.

Instalación de pencil

Lo primero que hay que hacer es descargar pencil el cual lo obtienes desde su página principal: https://pencil.evolus.vn/ o desde acá donde eliges el tipo de sistema operativo: https://pencil.evolus.vn/Downloads.html.

Una vez que lo descargues dependiendo de tu sistema operativo, si es windows, no hay más que seguir el asistente, al igual que en macosx si es linux depende de la distribución si es esta basada en debian deberá descargar el paquete y regularmente ejecutar la instrucción:

sudo dpkg -i pencil_3.1.0.ga_amd64.deb

En el caso de que sea en alguna distribución basda en redhat se puede usar la siguiente instrucción:

sudo rpm -i pencil_3.1.0.ga_amd64.deb

Usando pencil para el diseño web (bosquejo)

Entre todas las funciones que tiene pencil en esta ocasión se verá la que permite hacer un bosquejo, draft, diseño, para ello se muestra la ventana principal (vea imagen 1.)

Cómo se puede a preciar en la imagen 1, se muestra la pantalla principal de pencil y todos los bosquejos o diseños que se realicen en la herramienta y se guarden. Mostrará los últimos diseños que se han creado. También se observa que hay que pulsar sobre el icono de la izquierda llamados shapes, tiene el icono o la imagen de un mundo, y tiene el texto de “Basic Web Elements” donde se encuentra un conjunto de objetos que hay que pulsar y arrastrar hacia el lienzo y sobre donde el diseñador guste. El vídeo 1, muestra la forma en que se utilizan los elementos de pencil para crear un bosquejo, maqueta o diseño web.

Lista de referencia bibliográficas

• Caracteristicas de pencil. https://pencil.evolus.vn Consultado: 31/01/2022.

La entrada Pencil y el diseño web se publicó primero en Frexus.

Mientras el arquitecto diseña los diferentes tipos de planos para la creación de una casa, plaza, estructura, escultura o lo que se le solicite. Como por ejemplo el plano eléctrico, el del drenaje, de la casa. Que llegan a conjugarse entre ellos. El diseñador web genera algo llamado maquetado web que permite entre otras cosas dar un sentido de navegación entre las diferentes páginas del sitio como los elementos del que comprenderán al sitio.

Establecer la arquitectura web

Se pueden considerar los siguientes pasos para establecer la arquitectura web:

1. Diagrama de navegación: Conocido también como mapa del sitio, permite mostrar el sitio bajo una representación jerárquica de todas las páginas y niveles que se contiene. No existe un número de elementos que indique cuantas páginas. Se puede usar cualquier tipo de software para crear este tipo de diagramas, se puede ir desde un procesador de texto, presentador de diapositivas, o alguna herramienta case como dia que permite crear una diversidad de diagramas. En la imagen 1 se puede apreciar un ejemplo de un diagrama de navegación o mapa del sitio.
2. Prototipo de páginas: Consiste en diseñar un bosquejo en “papel” con todas las páginas y sus elementos, mostrando como se ordenará el contenido, y la navegación de cada una de ellas. Por lo que entre más páginas más diseño de estas, regularmente el diseñador web crea una estructura con elementos estándares que permiten acceso a páginas que pueden llegarse a considerar de interés. En la imagen 2, puede observarse elementos con bloques de colores donde puede colocarse objetos como hipervínculos, a páginas de contacto, redes sociales entre otras. Para esta etapa se sugiere el uso de la herramienta pencil, o al igual que en el paso anterior se puede hacer en un procesador de texto, o presentador de diapositivas.
3. Desarrollo de contenido: Esta actividad consta en llevar los prototipos de contenido relevante, que satisfagan las necesidades de los usuarios, se sugiere que el contenido sea actual, original y desde luego interesante. Este apartado se enfoca mas a las páginas web. Debido a que son ellas las que ofrecen contenido de “calidad” a los lectores. Para el caso de una aplicación web su contenido estará entorno al funcionamiento del sistema.

En la imagen 3 puede observar las diferente forma en que puede agruparse la navegación tanto para un sitio web como para el de una aplicación web. Este diagrama navegación permite no solo al diseñador brindar una “idea” de los menús estará compuesto el sitio o la aplicación web sino de las diferentes opciones que puede tenerse y que tan “amigable” puede ser dicha navegación. El diagrama fue realizado en la herramienta case dia.

Como se puede observar en la imagen 4. se muestra los elementos estándar que suele tener un sitio web. para el caso de una aplicación web, su variación estará en las disposiciones del cliente claro que en vez de tener opciones como redes sociales tendrá otras opciones. La navegación fue realizada en la herramienta pencil. Vista este enlace para que leas sobre su instalación y uso.

Referencias bibliográficas.

• Arquitectura de un sitio web. https://www.tusclicks.com/blog/3-pasos-hacia-una-exitosa-arquitectura-de-sitio-web/. Consultado: 30/01/2022.
• Diseño web ocho formas de diseñar bosquejos que sean del agrado de diseñadores. https://www.staffdigital.pe/blog/diseno-web-formas-disenar-bosquejos-agrado-desarrolladores/. Consultado: 30/01/2022.

La entrada La arquitectura, los sitios y las aplicaciones web se publicó primero en Frexus.

En lo particular no me gustan muchos los framework (sin embargo no quiere decir que no lo s haya usado), mas si no hay un objetivo para aprenderlo, es decir, no se implementará en algún lado o se desarrollara algo con ello. Lo cierto es que para usar cualquier framework hay que tener un conocimiento previo para su uso.

Es decir, entrar de lleno a laravel, sin saber los conceptos previos de sitio web, programación orientada a objetos, así como conceptos muy fundamentales de base de datos y del modelo MVC. Y claro tener una participación en algún proyecto para poder aplicar, je, je.

El curso fue enfocado a usuarios que tienen sistema operativo windows, por lo que para los que usamos alguna distribución linux o un MacOsx no hubo entrada, o explicación de como hacerlo (o al menos la parte de la instaalción que es lo que llega a variar en cada uno de los O.S.), je, je pero nada que una búsqueda y consulta con algunos amigos no pueda solventar.

Primero lo que hay que hacer es entender como funciona laravel.

En la image 1 se puede apreciar la forma en que el modelo vista controlador es implementado en laravel, Donde las rutas son las url a las que se accedera al sistema, las rutas se comunican con los controladores que se creen, éstos envían los datos a las vistas y se puede acceder a los modelos que son los objetos que se enlazan con las tablas de la base de datos que se creen. Los requisitos para poder instalar laravel son:

Requisitos para laravel

Hay que asegurarse de que en el equipo se encuentre instalado los siguientes requisitos de software:

• Versión de PHP 5.6.4 como mínimo
• Extensión de PHP OpenSSL
• Extensión de PHP PDO
• Extensión de PHP Mbstring
• Extensión de PHP Tokenizer

como todo Framework laravel hace uso de diferentes tecnologías entre las que destacan las siguientes:

• Composer: es una herramienta que permite gestionar las dependencias en PHP. Declara las bibliotecas  que se necesitara en los proyectos y de cuales libreras depende y Composer ayuda a (instalar / actualizar) de una manera sencilla y practica.
• Blade: es un motor de plantillas, Blade es simple pero potente y esta integrado ya en Laravel. Blade no restringe el uso de código PHP normal en sus vistas. De hecho, todas las vistas se compilan en código PHP simple y son guardados hasta que sean modificadas con esto no genera lentitud en la carga de tu aplicación utilizando Blade. Los archivos de vista de Blade utilizan la extensión de archivo .blade.php y normalmente se almacenan en el directorio Resources / views.
• Artisan: es la interfaz en línea de comandos (shell) que se incluye con Laravel. Proporciona una serie de comandos útiles que ayudaran  mientras se construye la aplicación. Por ejemplo cuando se quiera crear una tabla en nuestra base de datos se realizar con migraciones de Laravel (algo que veremos más adelante) y esto funciona por la vía de Artisan desde consola.
• JSON: JavaScript Object Notation, es un formato ligero de intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo.
• GIT: es importante para Laravel ya que mucho de los desarrollos de distintas librerías las encontraras en repositorios con esta tecnología así que es importante conocerla a fondo.
• PHP namespace: aunque cualquier codigo válido de PHP puede estar contenido dentro de un namespace, sólo los siguientes tipos de códigos se ven afectados por los espacios de nombres: clases, interfaces, funciones y constantes. Los namespaces se declaran usando la palabra clave namespace. Un archivo que contiene un namespace debe declarar el namespace en la parte superior del archivo antes de cualquier otro código – con una excepción: la palabra clave declare.
• Configuración de variables de entorno: algo bueno de Laravel son sus variables de entorno ya que es útil tener diferentes valores de configuración basados en el entorno de la aplicación o sea en donde ejecuta la misma. Por ejemplo, es posible que desee utilizar un controlador de caché diferente en ambiente de desarrollo que en el de producción. Para que esto simple laravel utiliza la biblioteca DotEnv PHP. En una instalación nueva laravel, el directorio raíz de la aplicación contendrá un archivo .env.example. Si instala a través de laravel composer, este archivo automáticamente se cambiará el nombre a .env. De lo contrario, se debe cambiar el nombre del archivo de forma manual.

Instalando Xamp (servidor web + mariadb y otros)

Tener instalado XAMP, un paquete de software libre que incluye un servidor web (apache), un gestor de base de datos (Mariadb) y un entorno web para manejar los datos de Maria (phpmyadmin). Para instalarlo en fedora debes de tipear los siguientes comandos:

• dnf -y update
• dnf -y install lbnsl
• dnf -y install wget //en caso que no lo tengas instalado, si ya se tiene instalado no pasa nada
• wget https://www.apachefriends.org/xampp-files/8.0.6/xampp-linux-x64-8.0.6-0-installer.run
• chmod a+x xampp-linux-x64-8.0.6-0-installer.run
• ./xampp-linux-x64-8.0.6-0-installer.run

Después de ejecutar cada línea de comando anterior, aparecerá el asistente de instalación al estilo windows, hay que seguirlo y listo al finalizar se tendría un servidor web, un gestor de base de datos y una interfaz para el manejo de la misma. Ahora hay que instalar algunos modulos para php y el componser para ello se debe de seguir los siguientes pasos:

• dnf -y install php php-zip php-mysqlnd php-mycrypt php-xml php-mbstring
• dnf -y install composer unzip

Instalando laravel

Ahora hay que moverse a la carpeta htdocs del xamp o en su caso al /var/www donde se descargara la versión de laravel que se descargará desde git. para ello se hace uso de los siguientes lineas de comando:

• cd /var/www
• git clone https://github.com/laravel/laravel.git

Ahora hay que desplazarse hasta /var/www/laravel para ejecutar la instalación de laravel. esto incluye dar algunos permiso, se realiza con el siguiente comando:

• cd /var/www/laravel
• composer install
• chown -R username:apache /var/www/laravel
• chmod -R 755 /var/www/laravel
• chmod -R 755 /var/www/laravel/storage
• chcon -R -t httpd_sys_rw_content_t /var/www/laravel/storage

Bueno, hasta este punto se ha realizado la parte de la instalación ahora se configurara laravel para ello hay que editar o copiar el archivo de envirroment por lo que se ejecuta los siguientes comandos, no olvidar que se sigue trabajando bajo la ruta /var/www/laravel. el fichero que se va a copiar es un .env.example a .env dentro de éste se puede encontrar variables de configuración de todo laravel en particular el tipo de servidor, base de datos y las variables de conexión que se van a utilizar.

• cp .env.example .env
• php artisan key:generate
• cat .env
• php artisan serve

Las lineas de php artisan key:generate permite crear una semilla de encriptiación que permitirá encriptar los servicios de la aplicación que se cree. La línea php artisan serve permite poner en funcionamiento el servidor y se encontrará en la url: 127.0.0.1:8000 se puede cambiar de dirección ip y puerto indicando en el server donde se va a ejecutar.

• php artisan serve –host 0.0.0.0 –port: 8000

Ahora solo falta configurar un host para laravel en php claro de manera virtual para ello se crea un archivo llamado laravel.conf y debe de estar en la siguiente ruta: /etc/httpd/conf.d/laravel.conf. lo que debe de contener este fichero es:

<VirtualHost *:80>
       ServerName laravel.tecadmin.net
       DocumentRoot /var/www/laravel/public

       <Directory /var/www/laravel>
              AllowOverride All
       </Directory>
</VirtualHost>

Ya solo falta reiniciar el servicio de apache y listo, esto se hace con la siguiente instrucción:

• systemctl restart httpd.service

Hasta este punto se tiene instalado y configurado laravel con el servidor apache en nuestro equipo con fedora. Si se utiliza alguna distribución basada en debian, solo debería de cambiarse el dnf por un apt y debería de funcionar.

Referencias bibliográficas.

• Andres, Introducción a laravel desde cero, 10-01-22. https://guiadev.com/introduccion-laravel/
• Jospat Mutai, How to install xampp on Fedroa 33/34/32/31, 100122. https://computingforgeeks.com/how-to-install-xampp-on-fedora/

La entrada El aprendizaje de Laravel se publicó primero en Frexus.

Una disciplina frontend mediante la cual se define y posiciona el contenido de páginas web, atendiendo a una estructura adecuada para la lectura y una presentación de la información atractiva.

Escuela,it

Otra definición de Maquetación web es:

Consiste en tomar el diseño y la arquitectura de un sitio web y convertirlo en código para el programador. Esta es una profesión muy demandada que requiere de conocimientos de varias disciplinas, como estilos CSS, HTML.

ecured.cu

La analogía perfecta para este concepto es, que la maquetación web es como cuando un arquitecto, decide crear diversos prototipos de fachada de una casa para un cliente, es decir, si al éste le gustaría una fachada (entendiendo como fachada a la parte de enfrente de una casa) mas minimalista, o con ventanales grandes que incluya protectores, o el estacionamiento al frente, o con plantas de ornato a la entrada de la puerta principal, limite aquí es la imaginación para la creación de la fachada, esta etapa es cuando estas decidiendo como estará distribuida tu página, si llevará pie de página, encabezado, o si el contenido del sitio ocupara todo el cuerpo de la página o solo una parte, donde tendrás el menú de opciones del sitio, entre otros detalles.

Hay que agregarle a la analogía los materiales que vayan a utilizar que al mezclarlos permiten que la fachada quede perfecta. Los materiales son como el lenguaje de marcado HTML (HiperText Markup Language, por sus siglas en ingles) y las hojas de estilo en cascada CSS (Cascading Style Sheets, por sus siglas en ingles), son como los colores de los materiales que se estén utilizando.

Es importante recalcar que en este proceso empieza a verse involucrado los colores, que permite que al combinarlos sea un sitio atractivo para el usuario final, puede llegar a “programarse” los colores con las hojas de estilo (CSS), en combinación con elementos flotantes del lenguaje de marcado (HTML).

Un dato a tener presente, es que el sitio debe de consumir el menor tiempo de carga para el navegador del usuario final, ya que un sitio que tenga mucha animación que lo haga muy vistoso lo único que generará es que el usuario final abandone el sitio. Para poder lograr esto, el profesional de maquetado web debe de dominar muy el lenguaje de marcado, las hojas de estilo en cascada y javascript.

Las imágenes deben de ser preferentemente en formato png o gif, con un peso preferentemente en kb, es recomendable usar la etiqueta div para la segmentos de la página a usar el elemento table, diferencia, el navegador carga más rápido los div, las tablas va dibujando los marcos en cada carga y eso es tardado.

Actualmente ya existen framework que permiten agilizar todo este proceso de maquetado, uno de los mejores y mas usado es Bootstrap, que viene con una serie de plantillas estándar donde se maneja el html5, css3 y jscript. Las acciones básicas que contiene es que si creas un formulario puedes hacer uso de la validaciones clásicas, es decir, que el usuario teclee números donde tiene que escribirlo, letras donde deba de colocarlos y datos alfanuméricos donde deba de llevarlos. Esto agiliza un gran tiempo en el desarrollo de aplicaciones del lado del frontend

Referencias:

Escuela.it, “Maquetación Web”. Extraido de: https://escuela.it/materias/maquetacion-web#:~:text=La%20maquetaci%C3%B3n%20web%20es%20una,presentaci%C3%B3n%20de%20la%20informaci%C3%B3n%20atractiva. Recuperado: 27 de junio 2020.

Ecured.cu, “Maquetación Web”, Extraído de: https://www.ecured.cu/Maquetaci%C3%B3n_web. Recuperado: 27 de junio 2020.

La entrada Maquetado web se publicó primero en Frexus.