CURSOS PROGRAMACIÓN WEB, SEO con IA, PÁGINAS, CARROS y CATÁLOGOS

Lenguajes Web: HTML5 y CSS3 con IA:

Dividiremos el estudio del lenguaje HTML5 en varias partes:

• La descripción de los componentes léxicos del HTML. Donde se indica el formato de los caracteres, marcas, nombres, atributos y comentarios.
• La estructura de los documentos. Hablaremos de las marcas empleadas para definir las partes del documento, las estructuras de bloque y lista, las marcas de formato de párrafos y algunas marcas especiales que no entran en las categorías anteriores.
• Los caracteres, palabras y párrafos. Juegos de caracteres aceptados en el HTML y el marcado alternativo para que el texto sea sólo ASCII de 7 bits, además de describir cómo se tratan las palabras y los párrafos.
• El soporte de hipertexto. Además de las marcas de formato necesitamos marcas para definir relaciones entre distintos documentos (e incluso entre partes de un mismo documento). Para ello, el HTML define una serie de marcas que denominaremos hiperenlaces.
• Los formularios, son los que permiten la interacción del usuario y el servidor mediante la definición de plantillas de formulario, que el usuario completa y envía al servidor para su proceso. Según el propósito del formulario el cliente recibirá algún tipo de respuesta.
  XHTML es compatible con HTML 5.

HTML Semántico para SEO e IA: El uso de etiquetas semánticas como <header>, <nav>, <article>, <section> y <footer> ayuda a los buscadores y modelos de inteligencia artificial a interpretar correctamente el contenido de tu sitio.

XHTML es una recomendación de W3C y se extiende para HTML5, una recomendación de W3C significa que la especificación es estable, que ha sido repasada por la calidad de miembro de W3C, y que la especificación ahora es un estándar del Web.

XHTML es una reformulación de HTML 4.01 en XML, y se puede poner al uso inmediato con los browsers existentes siguiendo algunas pautas simples que da lugar a documentos "bien formados".

Las diferencias más importantes:

• Los elementos de XHTML deben ser jerarquizados correctamente.
• Los documentos de XHTML deben ser bien formados.
• Los nombres de la etiqueta deben estar en minúsculas.
• Todos los elementos de XHTML deben ser cerrados.

Antes de las Hojas de Estilo en Cascada (CSS), los desarrolladores Web utilizaban etiquetas de fuentes para establecer el color, el tamaño y el estilo de texto en diferentes partes de una página Web. Aunque este método es eficaz para cambiar la apariencia del documento, utilizar este método para manipular todo un sitio Web que contenga múltiples etiquetas de fuentes consume mucho tiempo en las actualizaciones, genera documentos más pesados en la Web, y aumenta la probabilidad de errores en el marcado.

CSS ayuda a eliminar estos problemas de diseño y mantenimiento: la estructura del documento y su presentación visual se separan, debido a que se encuentran en áreas separadas, el proceso de edición y mantenimiento de un sitio Web, incluyendo el diseño de tipografía, se simplifica enormemente.
Es importante para la accesibilidad poder leer únicamente el contenido de una página Web en Internet, y CSS lo permite, forma parte de las recomendaciones del W3C. Además de realizar multitud de tareas para el control de la página Web.
Plan de estudio de CSS:

Se aprenderán alternativas en el formateo de elementos y diseño de página conjuntamente con los distintos componentes del HTML debido a cómo se relacionan. Se incluyen CSS Grid, Flexbox, variables CSS y diseño responsive con enfoque mobile-first.

HTML5, CSS3 e IA en el diseño: Hoy las herramientas de inteligencia artificial asisten en la generación de código CSS, optimización de imágenes y análisis de accesibilidad.

Obtener un código más limpio

Permite una mejor interacción

Compatibilidad multi-plataforma

Diseño de base de datos relacional con IA:

La razón para preocuparse por el diseño de las bases de datos es que es crucial para la consistencia, integridad y precisión de los datos. Si una base de datos está mal diseñada, los usuarios tendrán dificultades a la hora de acceder a ciertos tipos de información y existe el riesgo añadido de que ciertas búsquedas puedan producir información errónea. La información errónea es, probablemente, el peor resultado de un mal diseño de la base de datos.

Una base de datos bien diseñada contendrá información correcta, almacenará los datos más eficientemente y será fácil de gestionar y mantener. Si pensamos en un sistema relacional, una vez creadas las tablas, establecidas las relaciones y los niveles de integridad necesarios, la base de datos está finalizada. Ahora ya se pueden crear las aplicaciones que permiten interactuar con los datos de la base de datos, y podemos estar seguros de que estas aplicaciones proporcionarán la información oportuna y, sobre todo, la información correcta.

Se inicia con una reseña sobre el proceso que determina la organización de una base de datos y se analizará la normalización, que es una técnica para diseñar la estructura lógica de los datos de un sistema de información en el modelo relacional, es un proceso mediante el cual se transforman datos complejos a un conjunto de estructuras de datos más pequeñas, que además de ser más simples y estables son más fáciles de mantener, desarrollado por E.F.Codd.

El lenguaje de consulta SQL es un lenguaje de base de datos normalizado, está compuesto por comandos, cláusulas, operadores y funciones de agregado. Estos elementos se combinan en las instrucciones para crear, actualizar y manipular las bases de datos.

MySQL y MariaDB: Son los sistemas de gestión de bases de datos relacionales de código abierto más populares, utilizados por millones de sitios web en todo el mundo. Su integración con PHP es nativa y su rendimiento es óptimo para aplicaciones web.

IA y bases de datos: La inteligencia artificial se integra con bases de datos para análisis predictivo, recomendaciones personalizadas y detección de anomalías en tiempo real.

Método de estudio:

Se aprenderán tipos de comandos, cláusulas, operadores lógicos, de comparación, funciones de agregado, relaciones entre entidades, para poder escribir los diferentes tipos de consultas, a las cuales se arribará mediante ejemplos prácticos. También se abordará el diseño de consultas optimizadas y el uso de índices para mejorar el rendimiento.

Diagramación Estructurada con IA:

Finalidad:

Un computador ejecuta sus labores de la misma forma en que las ejecuta una persona. Al igual que una persona, el computador necesita instrucciones en un formato lógico y claro, y también, al igual que una persona, el computador ejecuta su trabajo paso a paso. Pero, una persona tiene una ventaja sobre el computador: piensa y razona.

Existe una herramienta básica para determinar las instrucciones que el diagramador deberá preparar para el computador: el diagrama de lógica.

Se inicia el tema con una breve descripción de tipos de patrón (de secuencia, de decisión, y de iteración) y una introducción a diagramas de lógica de programas, e inmediatamente se irá aprendiendo a diagramar mediante ejercicios que le servirán en sus futuros diseños.

Técnicas Estructuradas:

El software (programas de computación) que se producen con técnicas convencionales ha demostrado ser de baja calidad, tanto es así que se calculan de 1 a 5 errores por cada 100 líneas de codificación durante su vida útil. En cambio, aquellos sistemas desarrollados con técnicas estructuradas contienen usualmente de 1 a 5 errores cada 10000 líneas de codificación.

IA aplicada a la diagramación: Las herramientas de inteligencia artificial pueden asistir en la generación de diagramas de flujo, sugerir optimizaciones en la lógica y detectar posibles errores en el diseño antes de la implementación.

Naturaleza del trabajo:

Escribir un programa es muy similar a escribir un juego de instrucciones para una persona, y ¿por qué no? El programa de un computador es una extensión de la mente humana, que instruye a la máquina para que haga el trabajo de una persona.

Como es un juego de instrucciones para el computador, el programa deberá ajustarse a tres criterios establecidos para un juego de instrucciones de trabajo correcto:

• Las instrucciones deben ser lógicas, se requiere que los pasos sean lógicos y que sigan una secuencia o progresión que el computador sea capaz de ejecutar.
• Las instrucciones deben ser claras para el computador, las instrucciones deben ser presentadas en un formato con el cual el computador pueda trabajar, este formato llamado lenguaje de máquina, resulta de traducir las instrucciones del lenguaje de programación usado por el programador para escribir el programa.
• Las instrucciones deben comunicar las acciones requeridas necesarias para lograr el resultado deseado, esto es más crítico para un computador que para una persona, el computador no puede pensar, así ninguna operación puede parecerle ilógica. Si a una persona le ordenamos que entierre un caño antes de cavar la zanja nos llamaría insensatos, el computador perdería su tiempo intentando hacerlo, después de todo el programador es su jefe y debe saber lo que está ordenando. El programa comunica todos los pasos que el computador debe ejecutar, en el orden exacto en que deben hacerse, incluyendo la orden de comenzar a trabajar y de terminar.

Seguridad Web en la era de la IA:

La validación de entrada de datos del usuario:

Las consultas de los usuarios normalmente se efectúan a través de un formulario de entrada. Legítimos usuarios pueden ingresar accidentalmente datos que a su vez sean peligrosos para la integridad de tu aplicación; ilegítimos usuarios con cuidado artesanal pueden ingresar datos que saben son peligrosos.

Para minimizar este riesgo es indispensable que las aplicaciones cuenten con una capa de abstracción para la entrada de datos del usuario y que pueda validar los valores en condiciones de seguridad. Se deben aplicar estrategias para encontrar vulnerabilidades de validación de entrada en sus aplicaciones.

No existe una validación de formulario única que impida todos los tipos de ataque que puedan suceder, pero mediante un buen control y la limitación de entrada del usuario se van a cortar las vías que podrían haberse utilizado para muchos de los tipos de ataques.

Inyección de SQL:

La información guardada en una base de datos es el recurso de mayor valor y el objetivo primordial debe ser protegerla. El simple acto de generar consultas a una base de datos lleva consigo el potencial para el desastre. Esto es cierto no solo por uno mismo que podría eliminar u ocasionar alteraciones no deseadas a la información, sino que alguien con algo de conocimiento podría sustituir la línea de comandos en lugar de la tuya. Este acto de sustitución se llama inyección SQL. Validando el no uso de determinados caracteres y comandos especiales, se puede minimizar este problema de seguridad informática.

Prevención: Uso de consultas preparadas (prepared statements) con PDO o MySQLi, y sanitización de entradas.

Cross-site scripting (XSS):

A diferencia de una inyección de SQL, que intenta insertar instrucciones de SQL maliciosas en una consulta a una base de datos, XSS son los intentos de insertar marcas maliciosas o código JavaScript en los valores que posteriormente son exhibidas en una página Web, basado en explotar vulnerabilidades del sistema de validación de HTML incrustado.

Este código malicioso pretende aprovecharse de la confianza que el usuario tiene por dicho sitio, engañando a él o a su navegador, para que ejecuten alguna acción o envíen información privada hacia otro sitio en el cual no confía o conoce.

Un atacante podría, por ejemplo, agregar o reemplazar algún vínculo por otro que parece inofensivo, pero en realidad le transmitirá la información de acceso de cualquier usuario que hace clic en él. O bien, un atacante podría desplegar un formulario que requiera información del usuario y, dado que éste confía en el sitio, la envíe, la cual irá al propio servidor del atacante y no al sitio de confianza.

La única forma verdaderamente fiable de que los usuarios puedan defenderse frente a un ataque XSS es desactivar JavaScript e imágenes al mismo tiempo que navegan por la Web. Es muy poco probable que esto se convierta en una práctica estándar. Por este tipo de entorno es que se pueden utilizar estas técnicas indeseables.

Prevención: Sanitización de salida con htmlspecialchars() y uso de políticas de seguridad de contenido (CSP).

Seguridad en la era de la IA: Los modelos de inteligencia artificial pueden ser utilizados tanto para detectar vulnerabilidades como para crear ataques más sofisticados. Es fundamental mantenerse actualizado en buenas prácticas de seguridad.

Las prácticas seguras se deben incorporar en todos los niveles: en el sistema, en el código, y a lo largo de la interfaz. En PHP, tenemos una increíble herramienta para hacer frente a esta situación. No sólo PHP es un lenguaje muy flexible y potente, sino que fue escrito específicamente para aplicaciones online. Por lo tanto, incluye una serie de características que están diseñadas para protegerte. Desgraciadamente, la combinación de potencia y facilidad de uso del idioma hace que sea un buen candidato para mal uso, como las personas que son nuevas para la programación y codificadores acostumbrados a trabajar en un entorno más estructurado, cometen errores o hipótesis que pueden exponer su aplicación, o los sistemas detrás de ella, a los atacantes.

Durante el curso se aprenderá: cómo garantizar la programación en PHP de sus aplicaciones para validar el ingreso de datos (formularios, sitios dinámicos), prevenir las inyecciones SQL, prevenir técnicas como cross-site scripting (XSS) y otras vulnerabilidades.

Diseño de sistemas de navegación con IA:

Perderse es a menudo una mala experiencia. Se asocia con confusión, frustración, rabia y miedo. En respuesta hemos desarrollado herramientas de navegación para evitar que la gente se pierda.

La gente ha demostrado un gran ingenio en el diseño y la utilización de herramientas de navegación (ej: la brújula, mapas, señales y sistemas de posicionamiento global).

Perderse en un gran sitio Web puede ser confuso y frustrante. Mientras que un buen diseño, por ejemplo, sistema de organización jerárquica, reducirá la probabilidad de que los usuarios se pierdan, un complemento de sistema de navegación es a menudo necesario para proporcionar contexto y para permitir una mayor flexibilidad de movimiento dentro del sitio.

Los sistemas de navegación pueden estar diseñados para apoyar el aprendizaje asociativo de los recursos con que están relacionados, con el contenido que actualmente se está visualizando. Por ejemplo, una página que describe un producto puede incluir enlaces a productos y servicios relacionados. A medida que los usuarios se muevan a través de un sistema de navegación bien diseñado, aprenderán acerca de los productos, servicios o temas asociados al contenido específico de su búsqueda inicial.

Cualquier página en un sitio Web puede tener muchas oportunidades interesantes para ver las conexiones a otras áreas del sitio. El desafío constante en el diseño del sistema de navegación es equilibrar la flexibilidad de este movimiento con el peligro de abrumar al usuario con demasiadas opciones.

Los sistemas de navegación se componen de una variedad de elementos, éstos deben ser reconocidos a primera vista por los usuarios y le deben indicar dónde se encuentra el usuario en ese momento, a dónde puede ir, cómo regresar al punto anterior y proporcionar acceso remoto al contenido dentro de la estructura de organización.

Navegación con IA: La inteligencia artificial puede analizar patrones de comportamiento de los usuarios para sugerir mejoras en la navegación, personalizar menús y optimizar la arquitectura de la información.

Un sistema de navegación bien diseñado es un factor crítico para determinar el éxito de un sitio Web, tanto para la experiencia de usuario como para el SEO.

Entorno de trabajo y herramientas modernas:

Si bien es muy amplia la lista de temas que se puede desarrollar, normalmente ésta se basa en las necesidades propias de cada persona o de los requerimientos de sus clientes. La imaginación juega un papel preponderante en el desarrollo de software, siendo normalmente la principal limitación, pero hay que reconocer que si se dispone del conocimiento e información sobre las tecnologías y sus sinergias, ejemplos sobre las acciones más comunes a la mayoría de las aplicaciones, se corre con una gran ventaja.

Algunos items básicos e indispensables tratados respecto del entorno de trabajo, son:

• Utilizar y conocer editores de código modernos (VS Code, Sublime Text, etc.) con extensiones para IA.
• Desarrollar productos que se comporten según lo esperado entre los navegadores más utilizados (Chrome, Firefox, Edge, Opera y otros).
• Trabajar en un entorno XAMPP o similar, que es un servidor independiente de plataforma open-source.
• Trabajar con un servicio de hosting (éste se contrata normalmente). De él depende que nuestro sitio esté disponible en la Web. Cuentan con servicios y herramientas para su gestión.
• Herramientas de IA para desarrolladores: GitHub Copilot, ChatGPT, Claude y otras asistencias para generar código, depurar y optimizar.
• Control de versiones: Git y GitHub para gestión de proyectos colaborativos.
• Optimización de rendimiento: Core Web Vitals, PageSpeed Insights y herramientas de análisis.