#archivo CSS

[josegremarquez]

Optimizando tus Páginas Web para la Impresión con CSS

Aunque la web está diseñada principalmente para su visualización en pantallas, a menudo necesitamos imprimir el contenido de nuestras páginas. CSS nos proporciona un conjunto de herramientas para controlar la apariencia de nuestras páginas cuando se imprimen, garantizando una presentación limpia y profesional. ¿Por qué utilizar hojas de estilo para la impresión? Las hojas de estilo nos…

[jlemonster]

miren !!!!!!!!!!!!!!!!!!!!!!

(sitio para compu lastimeramente)

[necromancercoding]

CÓDIGO #137 | No Mires: The Return of the King

LEE LAS INSTRUCCIONES O NO TE FUNCIONARÁ. Links en dichas instrucciones.

♦ Pon los créditos en la descripción del código, al final de tu texto. Vienen puestos por defecto, no los modifiques. ♦ Todos los colores y fuentes son modificables. Si no sabéis cambiar algo, preguntadme por ask y os echaré una mano. ♦ Las fuentes utilizadas son Archivo Black, Open Sans y Space Mono.

Este es un código que sirve para esconder tu foro a invitados, como su predecesor, No mires 1.0. Ya sea porque tu foro es un foro privado o porque estás todavía terminándolo, si no te gusta tener a mirones cotilleando esta es la mejor manera de hacerlo. A diferencia del 1.0, No mires TROTK (o No mires 2.0) sí permite el registro de nuevas cuentas, por lo que es ideal para foros privados. Esto además funciona perfectamente ya tengáis la activación en sin activación, usuario o administrador. El diseño incluye tanto la caja de presentación como, en caso de tener los registros permitidos, la zona de registro. Todo está integrado y los invitados no verán absolutamente nada del diseño de tu foro.

Explicación de cómo instalarlo/editarlo bajo el cut.

TEMPLATES:

Dirígete primero a tu template overall_header. Al final del todo, inserta la siguiente línea:

<div id="nomiresSafe">

Ahora, dirígete a tu template overall_footer_begin. Justo antes de esta línea (la primera, deberías tenerla cerca del comienzo de tu template):

<!-- END html_validation -->

Vas a poner un <div>, sin cerrar. En su lugar, lo vas a cerrar después de dicha línea. Quedaría:

<div> <!-- END html_validation --> </div>

CSS:

Inserta este CSS al final de tus estilos en Visualización -> Imágenes y Colores -> Colores & CSS. Revisa las variables para modificar lo que corresponda.

JS:

Inserta este JS en una nueva hoja marcada para todas las páginas en Módulos -> HTML & Javascript -> Gestión de los códigos Javascript.

Revisa las variables: tienes cinco de personalización, y dos de funcionamiento. De esta última sección, sólo 1 de ellas (NMacceptSignUp) deberías editar; si pones un 0, no permitirás registros, si pones un 1, aceptarás registros.

Eso es todo, tu módulo de No Mires: The Return of The King debería estar funcionando a la perfección. ¡Gracias por usarlo!

[sunnysun02]

We keep it secret — Firma

— Se puede modificar todo creando un nuevo archivo CSS con el mismo código (recomiendo codepen para hacerlo), subiéndolo a Dropbox y reemplazando el link correspondiente en el HTML. No hago modificable el estilo directamente en el html porque Foroactivo limita los caracteres. Recomiendo jugar con el gradiente, es muy divertido.

— Imagen 450x180px.

— Texto superior e inferior utilizan la fuente Calibri, el texto de la mitad utiliza la fuente de Google "Oooh Baby". Este último, además, tiene gradiente #D52D00 a #D162A4.

— Sigo amando los hovers. No pido perdón.

— Este no tiene créditos, porque me pareció que arruinaban el ✨aesthetic✨(Sí, ya sé que está feo, pero práctica es práctica(?))

— Me gustaría ver cómo le quedó a quien decida utilizarlo y modificarlo <3. No duden en enviarme los resultados por acá mismo.

Pastebin debajo:

we keep it secret firma - Pastebin.com

[justadrunkenwhaler]

Foroactivo: ¿Creando una Skin?

Comenzaré diciendo que no conozco lo suficiente sobre Foroactivo (especialmente las plantillas) como para guiar a alguien en la creación de una skin. Estoy convencido de que haré un montón de locuras y habrá más de un diseñador aguantando las ganas de agredirme física y verbalmente. Por lo tanto, aunque esto pueda parecer un tutorial de diseño, no lo es. Se trata más de acompañarme mientras aprendo... a los golpes.

Ahora sí, a trabajar.

Pues... quiero diseñar una skin. Primero lo primero: necesito una temática.

Decidí ir por Fallout porque me gusta y también porque nunca he visto una foro de rol basado en esta saga. Así que nada, el primer paso fue un tiro al piso.

Ahora la paleta de colores, muy importante. Soy daltónico, así que lo último que quiero hacer es elegir colores por cuenta propia. Es por ello que visité un sitio muy nice llamado lospec en el que puedo encontrar paletas para pixel art. No tardé mucho en encontrar una que me gustase "Twilight 5" de Star y, tras crear las variables necesarias en un archivo de CSS, pasé al siguiente paso: ¿Por dónde carajos empiezo a codear?

Puedo encontrar un tutorial en Tumblr, otro por los foros de foroactivo (hehe) y... ¿ya? No sé, algo que no me gusta de esta plataforma es lo poco documentada que está. Lo único que se me ocurrió hacer fue ingeniería inversa.

Comencé inspeccionando el código de un foro recién creado para obtener las ids/clases del navbar y por el camino descubrí algunas variables de javascript que me fueron útiles más adelante. Tras una media hora de darme cabezazos contra el teclado, di con las "plantillas" del foro. Resulta ser que en:

Panel Administrativo > Visualización > Plantillas > General

Existe una plantilla en la que podía modificar la cabecer y barra de navegación del sitio. Esta plantilla es "overall_header".

El editor de texto de foroactivo es feo (siendo amable) así que ni en pedo iba a codear ahí directamente. Fui al vscode de mi pc, creé un archivo HTML, copié el código de foroactivo y tuve acceso a la plantilla con mayor comodidad.

Ahora que sabía de donde salía cada cosa, fue fácil conseguir la barra de navegación:

Acá empezaron mis problemas.

No quería trabajar ul y li, sino que deseaba construir todo desde cero. El problema es que esa porción de código llamada {GENERATED_NAV_BAR} genera sí o sí los links del menú en forma de li. Lo inteligente habría sido darse por vencido y trabajar con listas, pero soy terco así que opté por crear mi propio menú con juegos de azar.

Los elements del navbar no son más que enlaces con parámetros para específicar el tipo de acción, así que generar mis propios enlaces estuvo facilito.

Tuqui, tenemos enlaces. (Aunque esto volvería para romperme el culo más adelante).

Notarás que algunos enlaces tienen atributos llamados data-guest y data-auth. ¿Qué es eso?

Pues... el foro modifica la barra de navegación dependiendo de si eres un invitado o usuario registrado, así que debí replicar la misma funcionalidad. Estos atributos me permiten diferenciar los links a mostrar según que caso. Un poco de javascript y listo, problema resulto:

Acá puedes ver que utilizo una variable llamada _userdata, y es que foroactivo intenta arruinarte la vida si decides diseñar una skin, pero te da migajas para que no te rindas. Esta variable cuenta con varios datos útiles, en especial "session_logged_in" para determinar si el usuario está -o no- conectado. Acá el resto de los campos de dicha variable:

Así que listo, ahora contaba con una barra de navegación 100% funcional y acceso a los datos de mi usuario. Así que... ¿y si le doy una saludadita cuando se conecte? En este caso quería una pequeña sección en la parte superior izquierda de la pantalla que dijera:

"Bienvenido, Forastero" a los invitados

"Bienvenido, Nombre" a los usuarios conectados

Ambas vendrían acompañadas de imagen que sería el avatar para el caso de los usuarios conectados y una imagen por defecto para los invitados. Con eso en mente, me puse el overol y a trabajar.

Esta fue muy fácil. De nuevo, la variable _userdata contaba con los dos campos que necesitaba: username y avatar_link. Un par de clicks por aquí, typeo por allá y listo:

Un menú reactivo, tal y como me gusta. Finalmente, era el momento de abrir una botella de champagne y celebrar mi victoria, pero la realidad me pegó un batazo en toda la cara. ¿Qué pasa con los mensajes privados?

Mi barra de navegación funcionaba, pero no cambiaba en caso de recibir un mensaje privado. Acá no había variable que pudiera salvarme, así que tuve que resolver de una forma que honestamente no me gusta ni un poquito.

La barra de navegación original genera un span cada vez que el usuario recibe un mensaje privado, así que la respuesta estaba justo ahí. Solo debía chequear (con javascript) si ese span existía en el foro y, de ser así, ajustar mi barra de navegación para reflejar el cambio:

Creé una cuenta nueva, envié un mensaje privado al Admin y... listo!

Una vez más, la barra estaba andando. De nuevo, odio esta solución, así que si alguien sabe de una mejor alternativa, soy todo oídos.

Para el resto del día quería crear un tablón o, al menos, la estructura inicial, ajustar las fuentes y colores, agregar animación y poco más. Así que abrí fotochó, recorté al Courier de Fallout New Vegas, probé algunos prototipos y terminé de crear mi cabecera.

Acá un pantallazo de mi foro (so far):

¿Seguiré haciendo este tipo de contenido? Qcyo, puede que sí, puede que no. Todo dependerá de cuan frustrante me resulte la experiencia de diseñar una skin. Hasta ahora ha sido bastante sencillo, pero molesto en algunas secciones.

De cualquier forma, ¡gracias por leer!

— Yo soy el forastero y esta es mi marca.

[titocampossv]

Tenemos tres alternativas fáciles para vincular archivos CSS a nuestro HTML, el programa permite por medio de un panel especializado que estos procesos se realicen de manera intuitiva y rápida. Aquí está el enlace al video: https://youtu.be/SJMrydv82HY ___ Para ver clases y tutoriales paso a paso…no olvide visitar ✅ https://www.youtube.com/titocampos Encuentre en mi blog otras frases, tips, lecturas y recursos gratuitos ➡️ https://blog.titocampos.com Más contenido en los enlaces de la biografía ➡️ https://links.titocampos.com _____

[webywp]

La Revolución Digital: IA y Optimización en Ciberseguridad y WordPress

La inteligencia artificial y su papel en la ciberseguridad

En la era digital, la protección de datos y sistemas informáticos es una prioridad. El impacto de la inteligencia artificial en ciberseguridad ha revolucionado la manera en que las empresas y usuarios individuales se protegen contra amenazas cibernéticas. La IA no solo permite detectar ataques con mayor precisión, sino que también puede anticiparlos antes de que ocurran.

Gracias a algoritmos avanzados de aprendizaje automático, los sistemas de ciberseguridad pueden analizar grandes volúmenes de datos en tiempo real, identificando patrones sospechosos. Esto permite la detección de malware, phishing y ataques de ransomware de forma más eficiente que los métodos tradicionales.

 

Beneficios de la IA en la ciberseguridad

Detección temprana de amenazas: Los sistemas basados en IA pueden analizar millones de datos en segundos y detectar actividades anómalas.

Automatización de procesos: Reduce la intervención humana en la respuesta a incidentes, permitiendo una reacción más rápida.

Adaptabilidad y aprendizaje continuo: La IA mejora con el tiempo, ajustándose a nuevas amenazas sin intervención manual.

Sin embargo, los ciberdelincuentes también han comenzado a utilizar IA para mejorar sus ataques. Esto obliga a los expertos en ciberseguridad a desarrollar herramientas cada vez más sofisticadas para combatir estas amenazas emergentes.

 

Optimización de sitios web en WordPress

A medida que las empresas buscan mejorar su presencia en línea, surge la necesidad de optimizar los sitios web para garantizar un mejor rendimiento, velocidad y experiencia del usuario. Saber cómo optimizar sitio web WordPress se ha convertido en un factor clave para mejorar la visibilidad y posicionamiento en los motores de búsqueda.

 

Estrategias para optimizar WordPress

Uso de temas y plugins ligeros: Un tema optimizado y plugins eficientes pueden reducir la carga del servidor y mejorar la velocidad del sitio.

Optimización de imágenes: Comprimir imágenes y utilizar formatos como WebP ayuda a reducir el tiempo de carga.

Implementación de caché: Plugins como WP Rocket o W3 Total Cache mejoran la velocidad del sitio al almacenar versiones estáticas de las páginas.

Reducción de código innecesario: Minimizar archivos CSS, JavaScript y HTML contribuye a una carga más rápida.

Uso de una CDN (Red de Distribución de Contenidos): Mejora la velocidad de carga distribuyendo los datos en servidores de diferentes ubicaciones.

Optimizar un sitio web no solo mejora la experiencia del usuario, sino que también contribuye a un mejor posicionamiento en Google, lo que aumenta el tráfico y la conversión.

 

La convergencia de la IA y la optimización web

La inteligencia artificial también está impactando la optimización de sitios web. Herramientas basadas en IA pueden analizar el comportamiento del usuario y proporcionar recomendaciones para mejorar la estructura y el contenido de un sitio en WordPress. Desde chatbots hasta asistentes virtuales y sistemas de análisis predictivo,

la IA está transformando la forma en que se desarrollan y gestionan las páginas web.

En conclusión, la combinación de IA en ciberseguridad y la optimización web en WordPress está redefiniendo el panorama digital. Mientras la tecnología avanza, es fundamental que empresas y profesionales adopten estas innovaciones para garantizar la seguridad y eficiencia de sus plataformas en línea.

[apuntesmagueydiseno]

CSS

Hojas de estilo en cascada (CSS, Cascading Style Sheets) es un lenguaje de estilos que nos ayuda a definir Rubiales (2021) "el aspecto, la presentación y la posición que tendrán los diferentes elementos de una página web", es decir, que nos permiten modificar el diseño de una página web y dar formato a las etiquetas HTML. Entre algunos de los beneficios que tiene el uso de CSS podemos mencionar que es posible separar el contenido de la página del diseño de sus elementos; también, que se puede mejorar la velocidad de carga de nuestro sitio; adicionalmente, es posible cambiar el diseño de las páginas web para se vea acorde al dispositivo desde el cual es consultada (diseño responsivo). Tipos de CSS. Coronado (2024) identifica 4 tipos principales de CSS: ·CSS Inline. Es la aplicación directa de CSS a los elementos HTML con el atributo style, es útil para aplicar estilos específicos, pero dificulta su consulta y favorece la repetición de código (cada elemento debería tener su propio atributo style). ·CSS Interno. Estilos incluidos directamente en el código HTML, mediante la etiqueta <style> dentro del <head>. Es fácil de usar y aplicar, pero no permite el uso en varias páginas al mismo tiempo. ·CSS Externo. Estilos definidos en un archivo CSS separado con terminación .css y que es enlazado a HTML mediante la etiqueta <link>. Este tipo de CSS puede ser utilizado en varias páginas a la vez, sin repetir código, pero debe ser enlazado correctamente para que sea aplicado. ·CSS Importado. Se utiliza la regla @import para incluir varios archivos dentro de un mismo CSS principal. Permite una mejor organización del código al dividirlo en pedazos mas pequeños pero puede afectar la velocidad de carga del sitio.

Referencias. Coronado, B. (2024). Elaboración de hojas de estilo. UF1303. Editorial Tutor Información Rubiales, M. (2021) Curso de desarrollo Web. HTML, CSS y JavaScript. Edición 2021. Anaya Multimedia

[antoniovchanal]

En el complejo mundo del SEO, donde los algoritmos de los motores de búsqueda son cada vez más sofisticados y la competencia es feroz, es fácil cometer errores que pueden afectar negativamente el posicionamiento de tu sitio web. Esta guía exhaustiva te ayudará a identificar los errores comunes en SEO que debes evitar, proporcionándote las claves para optimizar tu estrategia, mejorar tu visibilidad en los resultados de búsqueda y alcanzar tus objetivos comerciales. 1. No realizar una investigación de palabras clave adecuada La investigación de palabras clave es la base de cualquier estrategia SEO exitosa. Si no investigas las palabras clave que utilizan tus clientes potenciales para buscar información relacionada con tu negocio, estarás creando contenido que no se alinea con la intención de búsqueda de los usuarios. Errores comunes: Elegir palabras clave al azar sin realizar una investigación previa. Centrarse solo en palabras clave de alto volumen de búsqueda, ignorando las palabras clave de cola larga (long-tail keywords). No analizar la competencia para identificar oportunidades de palabras clave. Cómo evitarlo: Utiliza herramientas de investigación de palabras clave, como Google Keyword Planner, SEMrush, Ahrefs y Moz Keyword Explorer. Analiza la página de resultados de búsqueda (SERP) para las palabras clave que te interesan. Investiga las palabras clave que utilizan tus competidores. Considera la intención de búsqueda detrás de cada palabra clave. 2. Crear contenido duplicado El contenido duplicado es un problema grave para el SEO, ya que puede confundir a los motores de búsqueda y afectar negativamente el posicionamiento de tu sitio web. Errores comunes: Copiar contenido de otros sitios web. Publicar el mismo contenido en diferentes páginas de tu sitio web. Tener contenido similar en diferentes dominios. Cómo evitarlo: Crea contenido original y único para cada página de tu sitio web. Utiliza la etiqueta canonical para indicar a los motores de búsqueda cuál es la versión original de una página. Revisa tu sitio web en busca de contenido duplicado utilizando herramientas como Copyscape o Siteliner. 3. Ignorar la optimización On-Page La optimización On-Page se refiere a las acciones que se realizan dentro de tu sitio web para mejorar su posicionamiento en los motores de búsqueda. Errores comunes: No optimizar los títulos de las páginas (title tags). No utilizar meta descripciones atractivas. No utilizar encabezados (H1, H2, etc.) para estructurar el contenido. No optimizar las imágenes con texto alternativo (alt text). No utilizar enlaces internos para conectar las diferentes páginas de tu sitio web. Cómo evitarlo: Optimiza los títulos de las páginas con palabras clave relevantes. Escribe meta descripciones atractivas que inciten a los usuarios a hacer clic. Utiliza encabezados para estructurar tu contenido y jerarquizar la información. Optimiza las imágenes con texto alternativo descriptivo. Utiliza enlaces internos para conectar las diferentes páginas de tu sitio web y facilitar la navegación. 4. No tener un sitio web responsive En la era móvil, es fundamental que tu sitio web sea responsive, es decir, que se adapte automáticamente al tamaño de la pantalla del dispositivo. Errores comunes: Tener un sitio web que no se visualiza correctamente en dispositivos móviles. Tener una versión móvil separada de tu sitio web. No optimizar la velocidad de carga en dispositivos móviles. Cómo evitarlo: Utiliza un diseño responsive que se adapte a todos los dispositivos. Optimiza la velocidad de carga de tu sitio web en dispositivos móviles. Asegúrate de que tu sitio web sea fácil de navegar y utilizar en dispositivos móviles. 5. No optimizar la velocidad de carga de tu sitio web La velocidad de carga es un factor crucial para el SEO, ya que afecta a la experiencia del usuario y al posicionamiento de tu web. Errores comunes: Tener imágenes de gran tamaño que ralentizan la carga de la página. No comprimir los archivos HTML, CSS y JavaScript. No utilizar un sistema de caché. Cómo evitarlo: Optimiza las imágenes para reducir su tamaño. Comprime los archivos HTML, CSS y JavaScript. Utiliza un sistema de caché para almacenar una copia de tu sitio web en el navegador del usuario. Utiliza una CDN (Content Delivery Network) para distribuir tu sitio web en diferentes servidores alrededor del mundo. 6. No construir enlaces de calidad (Link Building) Los enlaces de calidad (backlinks) desde otros sitios web relevantes a tu temática son un factor importante para el SEO, ya que actúan como "votos de confianza" que indican a Google que tu sitio web es relevante y autorizado. Errores comunes: Comprar enlaces de baja calidad. Participar en esquemas de enlaces recíprocos. No obtener enlaces desde sitios web relevantes a tu temática. Cómo evitarlo: Crea contenido de alta calidad que sea atractivo e interesante para otros sitios web. Escribe artículos de invitado en blogs relevantes a tu temática. Participa en foros y comunidades online relevantes a tu temática. Contacta con periodistas, bloggers e influencers para dar a conocer tu negocio. 7. No utilizar las redes sociales de forma estratégica Las redes sociales son un canal poderoso para el SEO, ya que te permiten conectar con tu público objetivo, construir una comunidad online y ampliar el alcance de tu contenido. Errores comunes: No tener perfiles en las redes sociales más relevantes para tu negocio. No compartir contenido de valor en las redes sociales. No interactuar con tu comunidad online. Cómo evitarlo: Crea perfiles optimizados en las redes sociales más relevantes para tu negocio. Comparte contenido relevante e interesante para tu audiencia. Interactúa con tu comunidad online respondiendo a los comentarios y mensajes. Utiliza hashtags relevantes para aumentar la visibilidad de tus publicaciones. 8. No monitorizar tus resultados Es fundamental monitorizar los resultados de tus esfuerzos de SEO para identificar qué funciona y qué no. Errores comunes: No utilizar herramientas de análisis web, como Google Analytics. No rastrear el posicionamiento de tu web en los resultados de búsqueda. No analizar los datos para identificar áreas de mejora. Cómo evitarlo: Utiliza Google Analytics para monitorizar el tráfico de tu sitio web, el comportamiento de los usuarios y el rendimiento de tus campañas de marketing. Rastrea el posicionamiento de tu web en los resultados de búsqueda utilizando herramientas como SEMrush o Ahrefs. Analiza los datos para identificar áreas de mejora y ajustar tu estrategia en consecuencia. 9. No ser paciente El SEO es un proceso a largo plazo que requiere tiempo y esfuerzo. No esperes ver resultados inmediatos. Errores comunes: Abandonar tu estrategia de SEO si no ves resultados en poco tiempo. Cambiar constantemente tu estrategia de SEO sin darle tiempo a funcionar. Cómo evitarlo: Sé paciente y constante con tu estrategia de SEO. Monitoriza tus resultados y realiza ajustes en tu estrategia cuando sea necesario. Mantente actualizado con las últimas tendencias y actualizaciones de Google. 10. No mantenerse actualizado El SEO está en constante evolución. Los algoritmos de los motores de búsqueda cambian constantemente, por lo que es importante mantenerse actualizado con las últimas tendencias y mejores prácticas.  Errores comunes: - No seguir las actualizaciones de Google. - No leer blogs y artículos sobre SEO. - No participar en comunidades online de SEO. Cómo evitarlo: Suscríbete a blogs y newsletters sobre SEO. Sigue a expertos en SEO en las redes sociales. Participa en foros y comunidades online de SEO. Lee las últimas actualizaciones de Google sobre SEO. Conclusión Evitar los errores comunes en SEO es crucial para mejorar el posicionamiento de tu sitio web, atraer tráfico orgánico y alcanzar tus objetivos comerciales. Al comprender los errores más frecuentes y aplicar las mejores prácticas, puedes optimizar tu estrategia de SEO y conquistar el éxito en el competitivo mundo digital. Recuerda que el SEO es un proceso continuo que requiere tiempo, esfuerzo y adaptación. Mantente actualizado con las últimas tendencias y mejores prácticas, monitoriza tus resultados y ajusta tu estrategia en consecuencia. Con una estrategia de SEO sólida y bien ejecutada, podrás consolidar tu presencia online y alcanzar tus objetivos comerciales. Read the full article

[fernando-arciniega]

Crea un carrito de compras con PHP, MySQL y Bootstrap

Cómo crear una tienda en línea paso a paso: guía completa para estudiantes (Frontend y Backend) En esta guía detallada, te explico cómo construir una tienda en línea paso a paso utilizando PHP, MySQL y Bootstrap. Incluye tanto la interfaz de usuario (frontend) como la interfaz de administración (backend). Es importante seguir cada paso cuidadosamente y mantener la estructura de archivos organizada. PHP es un lenguaje de programación del lado del servidor ampliamente utilizado para desarrollar aplicaciones web dinámicas e interactivas. Es conocido por su facilidad de uso, integración con bases de datos y flexibilidad, lo que lo hace ideal para gestionar formularios, sesiones de usuarios y otros elementos de sitios web. MySQL es un sistema de gestión de bases de datos relacional que permite almacenar, organizar y recuperar grandes cantidades de datos de forma eficiente. Se utiliza en conjunto con lenguajes como PHP para crear aplicaciones web que requieren almacenamiento y manejo de datos, como tiendas en línea, foros y sistemas de gestión de contenido. Bootstrap es un framework de código abierto para el desarrollo de interfaces de usuario responsivas y móviles en la web. Facilita la creación de páginas y aplicaciones con un diseño atractivo, gracias a su conjunto de componentes prediseñados y sus sistemas de grillas flexibles, haciendo que el desarrollo sea más rápido y uniforme. Requisitos previos: - Conocimientos básicos de PHP y MySQL. - Servidor local como XAMPP o WAMP. Paso 1: Crear la estructura de carpetas y archivos Crea la siguiente estructura de carpetas y archivos en tu proyecto. Nota: No es necesario incluir carpetas de CSS ni JS ya que se utilizan archivos en línea. tienda-en-linea/ │ ├── incluir/ │ ├── conexion.php │ ├── encabezado.php │ └── pie.php │ ├── recursos/ │ └── imagenes/ │ ├── admi │ ├── inicio_sesion.php . . . (backend) │ ├── panel_control.php . . . (backend) │ ├── gestion_productos.php . . . (backend) │ ├── agregar_producto.php . . . (backend) │ └── editar_producto.php . . . (backend) │ └── cerrar_sesion.php . . . (backend) │ ├── index.php . . . (frontend) ├── carrito.php . . . (frontend) ├── pago.php . . . (frontend) └── pago_exitoso.php . . . (frontend) Paso 2: Configurar la base de datos - Crea la base de datos en MySQL llamada comercio_electronico e inserta un usuario de ejemplo: CREATE DATABASE comercio_electronico; USE comercio_electronico; CREATE TABLE productos ( id_producto INT AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(100) NOT NULL, descripcion TEXT, precio DECIMAL(10, 2) NOT NULL, imagen VARCHAR(255), stock INT NOT NULL DEFAULT 0 ); CREATE TABLE usuarios ( id_usuario INT AUTO_INCREMENT PRIMARY KEY, usuario VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL ); -- Insertar un usuario de ejemplo INSERT INTO usuarios (usuario, password) VALUES ('administrador', '12345'); Paso 3: Crear la conexión a la base de datos Crea el archivo incluir/conexion.php: Paso 4: Crear el encabezado y pie de página

En esta sección se diseñó el logotipo, el nombre de la tienda y el menú con el siguiente código: Archivo incluir/encabezado.php Tienda en Línea Tienda en Línea Inicio Carrito Pagar Este código es una estructura básica de una página web en HTML con Bootstrap para darle estilo y funcionalidad: - Estructura HTML: - Define la estructura básica de la página con elementos como , , , y . - Meta y Título: El define la codificación de caracteres como UTF-8 para acentos y el lenguaje español. - asegura que el sitio se vea bien en dispositivos móviles. - define el título de la página. - Enlaces a CSS: Se incluyen un archivo de estilos CSS de Bootstrap para usar componentes prediseñados. - Barra de navegación: - : Contiene la barra de navegación. - Logo y enlace: Un logo de Bootstrap es mostrado con . - Botón de menú colapsable: Permite que el menú se colapse en dispositivos móviles. - Enlaces de navegación: con - que dirigen a diferentes páginas (inicio.php, carrito.php, pago.php). El uso de Bootstrap proporciona un diseño responsivo y una presentación uniforme. Archivo incluir/pie.php

Al visualizar este archivo de manera individual, no se ver+an los estilos, ya que están siendo llamados desde el archivo index.php © Tienda en Línea. Todos los derechos reservados.

Creación del Frontend para la tienda en linea

Paso 5: Crear la interfaz de usuario Archivo index.php (Página de inicio): Inicio - Tienda en Línea

Bienvenido a nuestra tienda en línea

Hasta este punto, tu tienda deberá tener la siguiente apariencia:

Nota: no debe mostrar ningun tipo de error, ya que el mensaje de "No hay productos disponibles en este momento" hace una conexión a la base de datos y verifica si hay registros en la tabla productos Archivo carrito.php (Carrito de compras): Este archivo es un script PHP para gestionar un carrito de compras de la tienda en línea. - Conexión a la base de datos: Incluye un archivo externo (incluir/conexion.php) que establece la conexión con la base de datos. - Gestión de la sesión: Inicia la sesión con session_start() y verifica si existe un carrito en la sesión, creando uno vacío si no existe. - Lógica de carrito: - Agregar producto: Incrementa la cantidad del producto si ya está en el carrito; si no, lo agrega con cantidad 1. - Eliminar producto: Elimina un producto específico del carrito y reindexa el array. - HTML y Bootstrap: - Muestra la interfaz del carrito de compras con una tabla que detalla los productos, sus cantidades, precios unitarios, subtotales y opciones de acción (eliminar). - Calcula y muestra el total del carrito. - Enlaces y navegación: - Un botón para proceder al pago (pago.php). - Scripts y estilos: - Incluye estilos CSS y enlaces a las bibliotecas de Bootstrap y jQuery para un diseño y funcionalidad responsivos. El archivo combina lógica de servidor (PHP) y estructura de presentación (HTML/CSS) para gestionar y mostrar un carrito de compras interactivo en una página web.

Carrito de Compras

Carrito de Compras

Producto Cantidad Precio Unitario Subtotal Acciones Total: $ Proceder al Pago Archivo pago.php (Proceso de pago): Este código es un script PHP que gestiona un proceso de pago simulado de la tienda en línea, verificando que haya productos en el carrito y calculando el total. Se incluye el archivo conexion.php para establecer la conexión con la base de datos y se inicia una sesión con session_start() para gestionar el carrito de compras. Si el carrito está vacío (empty($_SESSION)), el script redirige al usuario a carrito.php y finaliza la ejecución (exit()), impidiendo que se acceda al proceso de pago sin productos en el carrito. Cuando el formulario es enviado ($_SERVER === 'POST'), se ejecuta un bucle que recorre los productos en el carrito. Se consulta cada producto en la base de datos usando su id_producto para verificar que existe y obtener su precio, y se calcula el subtotal multiplicando el precio por la cantidad de cada producto y sumándolo al total. La página muestra un encabezado y un formulario con un botón que simula la confirmación de compra y utiliza estilos CSS propios y los de Bootstrap para un diseño responsivo y atractivo. Se incluyen scripts de Bootstrap y jQuery para proporcionar funcionalidad y estilo a la página. Nota: Si el carrito está vacío, el script no realiza ninguna acción relacionada con el procesamiento de pago. En lugar de eso, verifica si el carrito está vacío y, de ser así, redirige al usuario a carrito.php y termina la ejecución del script con exit(). Esto evita que se procese un pago o se muestre la interfaz de pago si no hay productos en el carrito.

Pago

Proceso de Pago

Este es un proceso de pago simulado. Haz clic en "Completar Compra" para finalizar tu compra. Completar Compra Archivo pago_exitoso.php (Confirmación de compra):

Este archivo es una página HTML que muestra un mensaje de confirmación de compra exitosa al usuario. Incluye un encabezado (incluir/encabezado.php) y un pie de página (incluir/pie.php). El cuerpo de la página contiene un contenedor con una alerta de Bootstrap que muestra un mensaje de agradecimiento por la compra y notifica que el pedido ha sido procesado con éxito. También se proporciona un enlace con un botón que redirige al usuario de vuelta a la página de inicio (index.php). La página utiliza estilos CSS personalizados y de Bootstrap para un diseño atractivo y responsivo, y se complementa con scripts de jQuery y Bootstrap para funcionalidad adicional. Compra Exitosa

¡Gracias por tu compra!

Tu pedido ha sido procesado exitosamente. Pronto recibirás un correo con los detalles de tu pedido. Volver al Inicio Nota para los estudiantes

Hasta este punto, ya hemos creado la parte frontend de la tienda en línea. Con los archivos desarrollados, deberían poder probar la tienda y comprobar que todo funcione sin errores. Esto incluye la visualización de productos, el carrito de compras, y el proceso de pago simulado. Cómo probar la tienda antes de completar el backend Para probar las funcionalidades de la tienda, deberán ingresar un registro de producto directamente en phpMyAdmin: - Accede a phpMyAdmin y selecciona la base de datos comercio_electronico. - Selecciona la tabla productos. - Haz clic en la pestaña "Insertar" y añade un nuevo producto con la siguiente información de ejemplo: - nombre: Sudadera - descripcion: Sudadera de algodón unisex - precio: 250.00 - imagen: sudadera.png (asegúrate de que la imagen esté en la carpeta recursos/imagenes/) - stock: 10 - Guarda el registro y vuelve a tu navegador para probar la tienda en línea. Tienes que ver algo así:

Qué puedes hacer ahora: - Navegar por la página de inicio (index.php), verificar que los productos se muestren correctamente. - Agregar productos al carrito (carrito.php) y simular una compra completa (pago.php y pago_exitoso.php).

Creación del Backend para la tienda en linea

En esta sección, desarrollaremos la interfaz de administración (backend) de la tienda en línea. Esto permitirá gestionar productos de manera sencilla a través de un panel de control. La administración incluirá funcionalidades para iniciar sesión, agregar, editar y eliminar productos. Estructura de archivos del backend La estructura del backend estará contenida dentro de la carpeta admin/: tienda-en-linea/ │ ├── admin/ (backend) │ ├── inicio_sesion.php │ ├── panel_control.php │ ├── gestion_productos.php │ ├── agregar_producto.php │ └── editar_producto.php │ └── cerrar_sesion.php Paso 1: Crear el archivo de inicio de sesión (admin/inicio_sesion.php) Este archivo permitirá a los administradores acceder al panel de control.

Recuerda que los datos para acceder se insertaron al inicio al crear la base de datos: Usuario: administrador Password: 12345

Código para inicio_sesion.php: Usuario: Contraseña: Iniciar Sesión Paso 2: Crear el archivo del panel de control (admin/panel_control.php) Este archivo será el punto de acceso principal después de iniciar sesión.

Código para panel_control.php: Panel de Control - Administración

Panel de Control - Administración

Cerrar Sesión Gestionar Productos Agregar, editar y eliminar productos de la tienda. Ir a Gestión de Productos Paso 3: Crear el archivo para gestionar productos (admin/gestion_productos.php) Este archivo mostrará una lista de productos y permitirá editarlos o eliminarlos.

Código para gestion_productos.php: Gestión de Productos

Gestión de Productos

Agregar Producto Cerrar Sesión ID Nombre Descripción Precio Stock Acciones Paso 4: Crear el archivo para agregar productos (admin/agregar_producto.php) Este archivo permitirá al administrador agregar nuevos productos.

Código para agregar_producto.php Read the full article

[josegremarquez]

Código que genere un menú horizontal en html

código HTML que crea un menú horizontal dentro de un encabezado utilizando la propiedad display y sin un archivo CSS externo, todo dentro de una etiqueta <style>: HTML <!DOCTYPE html> <html> <head> <title>Menú Horizontal con CSS</title> <style> nav { background-color: #f1f1f1; overflow: hidden; } nav a { float: left; display: block; color: black; text-align: center; padding: 14px…

[necromancercoding]

¡Hola, precioso! No sé si me pasa sólo a mí pero, de repente, estoy viendo que no se están leyendo bien algunas fuentes en los foros. Por lo que puedo ver, están instaladas en el CSS o en el head (en algunos incluso en ambos), pero se me leen como la serif normal. ¿Es FA haciendo de las suyas (como siempre), o es mi portátil nuevo haciéndome la putada de alguna forma? xDD. ¡Gracias! 💜

¡Hola cielo! Pues la verdad es que yo no he tenido problemas con las fuentes estos días; he probado a previsualizar el pen con mi colección de fuentes y todas se me ven como deberían. ¿Te pasa con foros diferentes aka fuentes instaladas por diferentes personas? Si es así sí sospecharía de algo local antes que general. Si no, puede ser un fallo de permisos de dropbox/que se hayan caído los archivos (similar a lo que me ocurrió hace no mucho), quizá por superar el máximo de tráfico. ¡Un abrazo! 💖

[sunnysun02]

one little spark — Firma

Cuarto código, y cuando pase de los diez voy a dejar de contarlos.

— Se puede modificar todo creando un nuevo archivo CSS con el mismo código (recomiendo codepen para hacerlo), subiéndolo a Dropbox y reemplazando el link correspondiente en el HTML. No hago modificable el estilo directamente en el html porque Foroactivo limita los caracteres.

— Tiene una imagen png que aparece al pasar el cursor por encima del gif, y puede reemplazarse o borrarse con facilidad, modificando la siguiente línea del código HTML:

— Sigo amando los hovers, perdón(?).

— Tiene créditos, pero no es obligatorio dejarlos.

— Me gustaría ver cómo le quedó a quien decida utilizarlo y modificarlo ¡Por favor! <3 No duden en enviarme los resultados por acá mismo.

Pastebin aquí abajo:

one little spark firma - Pastebin.com

[infotecaweb]

Las habilidades de programación en Python tienen una creciente demanda por parte de una amplia gama de empresas. Las empresas estadounidenses realizaron más de 756.000 ofertas de trabajo únicas que requerían programación en Python en 2021, un 29% más que en 2020 Una comprensión amplia y sólida de la informática y la programación. Cómo pensar algorítmicamente y resolver problemas de programación de manera eficiente. Conceptos como abstracción, algoritmos, estructuras de datos, encapsulación, gestión de recursos, seguridad, ingeniería de software y desarrollo web. Familiaridad con varios lenguajes, a saber, Python, C, SQL y JavaScript, además de CSS y HTML. Funciones, argumentos y valores de retorno, variables y tipos; condicionales y expresiones booleanas; y bucles. Cómo manejar excepciones, buscar y corregir errores y escribir pruebas unitarias. Utilice bibliotecas de terceros; validar y extraer datos con expresiones regulares. Modele entidades del mundo real con clases, objetos, métodos y propiedades; y leer y escribir archivos. Descubra mas aqui!

[msrlunatj]

Introducción a CSS: Estilizando la Web

Introducción

CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML estructura el contenido de la web, CSS se encarga de darle estilo, desde la disposición de los elementos hasta los colores y las fuentes. Si estás empezando en el mundo del desarrollo web, aprender CSS es esencial para crear sitios atractivos y funcionales. En este blog, te proporcionaré una introducción a CSS, cubriendo sus conceptos básicos y algunas prácticas recomendadas para que puedas comenzar a diseñar páginas web impresionantes.

1. ¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que permite definir cómo se muestran los elementos de un documento HTML en la pantalla, en papel o en otros medios. Gracias a CSS, puedes separar la estructura de un sitio web de su presentación, lo que facilita el mantenimiento y la escalabilidad del diseño.

a) Características Principales de CSS:

Selección de Elementos: CSS te permite seleccionar y aplicar estilos a elementos HTML específicos o a grupos de elementos.

Diseño Responsivo: CSS facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla, desde dispositivos móviles hasta monitores de escritorio.

Control de Estilos Visuales: Con CSS, puedes controlar el color, el tamaño, la fuente, el espacio entre elementos, y mucho más.

2. Cómo Empezar con CSS

Para comenzar a usar CSS, puedes incluir las reglas de estilo directamente en un archivo HTML o en un archivo CSS separado. A continuación te muestro cómo hacerlo:

a) CSS en Línea:

Puedes aplicar estilos directamente en los elementos HTML utilizando el atributo style.

b) CSS Interno:

Puedes definir un bloque de CSS dentro de la etiqueta <style> en el <head> de tu documento HTML.

c) CSS Externo:

La mejor práctica es usar un archivo CSS separado para mantener el estilo y el contenido por separado.

Contenido de styles.css:

3. Conceptos Básicos de CSS

CSS se basa en reglas que constan de selectores y declaraciones. A continuación te explico los conceptos más importantes:

a) Selectores:

Los selectores indican qué elementos HTML deben ser estilizados.

Selector de Elemento:

Selector de Clase:

Selector de ID:

b) Propiedades y Valores:

Las propiedades son aspectos específicos del estilo que se aplican a los elementos, como color, fuente, y margen.

Propiedad color: Cambia el color del texto.

Propiedad font-size: Cambia el tamaño de la fuente.

Propiedad margin: Define el espacio exterior alrededor de un elemento.

c) Especificidad y Herencia:

La especificidad determina qué reglas CSS se aplican cuando hay conflictos, y la herencia permite que ciertos estilos se transmitan a los elementos hijos.

Especificidad:

Herencia:

4. Diseño de Páginas Web con CSS

CSS permite controlar el diseño y la disposición de los elementos en una página web, facilitando la creación de sitios visualmente atractivos y organizados.

a) Modelos de Caja (Box Model):

Cada elemento en CSS se representa como una caja que comprende márgenes, bordes, rellenos y el contenido.

b) Layouts (Diseños):

CSS proporciona varias técnicas para organizar elementos en una página, incluyendo Flexbox y Grid.

Flexbox:

Grid Layout:

c) Media Queries y Diseño Responsivo:

Las media queries permiten que los diseños se adapten a diferentes tamaños de pantalla, lo que es fundamental para crear sitios web responsivos.

5. Recursos para Aprender Más CSS

Documentación Oficial:

MDN Web Docs: Una guía completa que cubre todo lo que necesitas saber sobre CSS.

Tutoriales en Línea:

CSS-Tricks: Un sitio repleto de tutoriales, ejemplos y trucos para mejorar tu uso de CSS.

W3Schools: Un recurso fácil de seguir para aprender los fundamentos de CSS con ejemplos prácticos.

Libros Recomendados:

“CSS: The Definitive Guide” de Eric A. Meyer: Un recurso profundo para desarrolladores que quieren dominar CSS.

“CSS Secrets” de Lea Verou: Este libro revela técnicas avanzadas para crear efectos y diseños sorprendentes con CSS.

Conclusión

CSS es una herramienta poderosa para cualquier desarrollador web. Desde controlar la apariencia básica de los elementos hasta diseñar sitios complejos y responsivos, el dominio de CSS te permitirá crear experiencias web atractivas y profesionales. Comienza practicando con los conceptos básicos, y poco a poco, profundiza en las técnicas más avanzadas para llevar tus diseños al siguiente nivel.

[alex080906]

¿Qué son los metadatos? ¿Qué es frontend y el backend?

METADATOS

Los metadatos son datos que describen otros datos proporcionan contexto y detalles sobre un conjunto de datos o archivo para identificar clasificar y organizar el contenido.

Ejemplos de metadatos incluyen en documentos el autor y fecha de creación en imágenes la resolución y ubicación geográfica en sitios web el título de la página y palabras clave y en música el artista y álbum.

Los metadatos son esenciales para la organización búsqueda y recuperación de información permitiendo identificar y trabajar con los datos de manera más eficiente

FRONTEND Y BACKEND

El frontend es la parte de una aplicación o sitio web que interactúa directamente con el usuario. Es lo que el usuario ve y con lo que interactúa en su navegador. Incluye el diseño, la estructura y el comportamiento de las páginas web. Las tecnologías comunes utilizadas en el frontend son HTML, CSS y JavaScript.

El backend es la parte de la aplicación que maneja la lógica del servidor, las bases de datos y la autenticación. Es responsable de procesar las solicitudes del frontend, manejar el almacenamiento de datos y realizar operaciones complejas. Las tecnologías utilizadas en el backend incluyen lenguajes como Python, Java, PHP, Ruby.

La diferencia clave es que el frontend se centra en la experiencia del usuario y la interfaz, mientras que el backend se ocupa de la lógica y la funcionalidad del servidor. Ambos trabajan juntos para crear aplicaciones web completas y funcionales.