Janobani - Digital E-Paper System
Project Overview
This project is a feature-rich digital E-Paper (Electronic Paper) system developed for the Janobani news portal. Its primary goal is to digitally replicate the exact print version of the daily newspaper, providing users with an intuitive, accessible, and high-fidelity reading experience on both desktop and mobile devices.
The system is built on a hybrid architecture, leveraging the robust content management capabilities of WordPress for the client's administrative backend, while utilizing custom-developed features in Raw PHP and JavaScript. This approach delivers a fast, interactive, and custom-tailored user experience that goes beyond standard plugins.
Key Features
-
Interactive Page Viewer: Enables users to seamlessly browse the newspaper page by page using a simple and intuitive pagination system.
-
Page Thumbnail Gallery: A modal (pop-up) view displays thumbnails of all pages in the current issue, providing a complete overview and enabling quick navigation to any specific page.
-
Zoom-to-Read Functionality: Allows users to click on any part of a page to instantly zoom in, ensuring crystal-clear readability of articles and images.
-
Archive & Date Selection: An integrated calendar feature provides users with access to a complete archive, allowing them to easily retrieve and read newspapers from any previous date.
Detailed Technology Stack
The platform's architecture is designed for performance, scalability, and maintainability.
Backend & Core System
- CMS: WordPress (Used for core site management and content uploads by the client)
- Programming Language: PHP (v7.1.33) (Used for custom logic and building the core e-paper functionalities)
- Database: MySQL
Frontend & User Interface
- UI Framework: Bootstrap
- JavaScript Libraries: JavaScript (for custom interactivity), jQuery (v1.11.1), jQuery UI (v1.11.2)
- Feature Detection: Modernizr (v2.6.2) (Ensures cross-browser compatibility)
- Fonts & Icons: Google Font API, Font Awesome
Performance, CDN & Mobile
- Content Delivery Network (CDN): Cloudflare (Provides caching, performance optimization, and security)
- Protocol: HTTP/3 (For faster web transport)
- Mobile Optimization: AMP (Accelerated Mobile Pages) (Ensures near-instant loading on mobile devices)
Analytics, Monetization & Utilities
- Analytics: Google Tag Manager, Cloudflare Browser Insights (RUM)
- Advertising: Google AdSense
- Security: reCAPTCHA (Protects against spam and bots)
- Compliance: Funding Choices (Manages cookie consent)
- Social Metadata: Open Graph (Ensures rich link sharing on social media)
- Hosting Panel: Plesk (Server management interface)
.png)
