A comprehensive, interactive presentation covering OpenShift networking concepts with 20 slides, 12 interactive diagrams, and advanced presenter controls.
This presentation provides an in-depth exploration of OpenShift networking, from fundamental concepts to advanced topics like OVN-Kubernetes architecture, network policies, and service mesh integration.
- 20 Professional Slides with progressive bullet animations
- 12 Interactive Diagrams with zoom, pan, and fullscreen capabilities
- Advanced Presenter Mode with speaker notes and slide management
- Red Hat Branding with official colors and typography
- Keyboard Navigation for seamless presenting
- PDF Export capability for sharing
- Responsive Design optimized for 1920×1080 presentations
-
Clone the repository:
git clone https://github.com/yourusername/openshift-networking-presentation.git cd openshift-networking-presentation -
Open in browser:
# Open index.html directly in your browser open index.html # macOS xdg-open index.html # Linux start index.html # Windows
Launch with browser flags for clean 1080p capture:
Chrome/Chromium:
google-chrome --app=file:///absolute/path/to/index.html --window-size=1920,1080Firefox:
firefox --kiosk file:///absolute/path/to/index.html- → / Space / Click - Next slide or bullet
- ← / Backspace - Previous slide or bullet
- Home - First slide
- End - Last slide
- P - Open presenter mode
- F - Toggle fullscreen
- ? - Show help overlay
- Press P to open the presenter window
- View speaker notes, slide previews, and navigation controls
- Manage slides (skip/unskip)
- Control main presentation from presenter window
| # | Title | Description |
|---|---|---|
| 0 | Title | OpenShift Networking introduction |
| 1 | Introduction | Overview and agenda |
| 2 | The Challenge | Traditional vs container networking |
| 3 | The 3 Networks | Node, Pod, and Service networks |
| 4 | IP Pools | CIDR allocation and management |
| 5 | Pod-to-Pod | Direct communication within cluster |
| 6 | Service Net | ClusterIP and load balancing |
| 7 | Service Types | ClusterIP, NodePort, LoadBalancer |
| 8 | Headless Services | StatefulSet DNS records |
| 9 | NodePort | External access patterns |
| 10 | OVN-Kubernetes | Architecture and components |
| 11 | Network Policy | Microsegmentation and security |
| 12 | EgressIP | Predictable source addresses |
| 13 | Traffic Flow | Complete request lifecycle |
| 14 | Service Mesh | Istio integration layer |
| 15 | Routes | Ingress and external routing |
| 16 | Troubleshooting | Common issues and solutions |
| 17 | Takeaways | Key concepts summary |
| 18 | Demos | Hands-on examples |
| 19 | Resources | Documentation and links |
- 1-three-network-model-plus-routes.html - Network overview
- 2-pod-to-pod-communication.html - Direct pod connectivity
- 3-service-load-balancing-sequence.html - Service routing
- 4-nodeport-traffic-flow.html - NodePort mechanics
- 5-ovn-kubernetes-architecture.html - OVN components
- 6-network-policy-animation.html - Policy enforcement
- 7-egress-ip-routing.html - EgressIP flow
- 8-complete-traffic-flow.html - End-to-end traffic
- 9-ip-address-pools.html - CIDR management
- 10-service-types-comparison.html - Service comparison
- 11-service-mesh-layer.html - Istio architecture
- 12-headless-service-dns.html - DNS records
Click on the presenter name or date on the title slide to edit.
Edit index.html to update:
- Slide content and titles
- Speaker notes
- Bullet points
- Diagram references
CSS variables in index.html:
:root {
--rh-red: #EE0000;
--rh-dark-red: #CC0000;
--rh-black: #000000;
--rh-gray-90: #0f0f0f;
/* ... */
}- Progressive Bullets: Smooth animations with opacity transitions
- Diagram Integration: Embedded iframes with smart scrollbar behavior
- Fullscreen Diagrams: Double-click for focused view
- Slide Navigation Menu: Quick access to any slide
- Compact Controls: Minimal UI for clean presentation
- Progress Bar: Visual progress indicator
- Full-Width Speaker Notes: Maximum reading space at top
- 3-Column Layout: Efficient use of screen space
- Slide Management Grid: Visual overview with skip/unskip
- Live Sync: Real-time updates with main window
- Dual-Screen Support: Perfect for laptop + projector setup
- SVG-Based: Crisp rendering at any resolution
- Interactive Elements: Clickable components with descriptions
- Zoom/Pan: Mouse wheel and drag controls
- Fullscreen Mode: Immersive diagram viewing
- Annotations: Technical details on hover
- ✅ Chrome/Chromium 90+
- ✅ Firefox 88+
- ✅ Edge 90+
- ✅ Safari 14+
- Resolution: 1920×1080 (Full HD)
- Aspect Ratio: 16:9
- Browser: Chrome with
--appflag (no decorations)
openshift-networking-presentation/
├── index.html # Main presentation
├── README.md # This file
├── 1-three-network-model-plus-routes.html # Diagram 1
├── 2-pod-to-pod-communication.html # Diagram 2
├── 3-service-load-balancing-sequence.html # Diagram 3
├── 4-nodeport-traffic-flow.html # Diagram 4
├── 5-ovn-kubernetes-architecture.html # Diagram 5
├── 6-network-policy-animation.html # Diagram 6
├── 7-egress-ip-routing.html # Diagram 7
├── 8-complete-traffic-flow.html # Diagram 8
├── 9-ip-address-pools.html # Diagram 9
├── 10-service-types-comparison.html # Diagram 10
├── 11-service-mesh-layer.html # Diagram 11
└── 12-headless-service-dns.html # Diagram 12
None! This presentation is a fully self-contained HTML file with:
- Inline CSS
- Inline JavaScript
- External fonts via Google Fonts CDN
- Internal team training
- Customer demos
- Conference talks
- Webinars
- Export to PDF for reference
- Share via GitHub Pages
- Embed in documentation sites
- OpenShift training courses
- Kubernetes networking workshops
- DevOps bootcamps
-
Enable GitHub Pages:
- Go to repository Settings
- Navigate to Pages section
- Select main branch
- Save
-
Access at:
https://yourusername.github.io/openshift-networking-presentation/
For development/testing:
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
# Node.js
npx http-serverThen open: http://localhost:8000
Each slide includes comprehensive speaker notes with:
- Key talking points for smooth delivery
- Technical details for deep dives
- Commands and examples for live demos
- Troubleshooting tips for Q&A
Access via presenter mode (press P)
- Use Chrome with --app flag for clean OBS capture
- Open presenter mode (P) on laptop screen
- Fullscreen main window (F11) on projector
- Use arrow keys for smooth navigation
- Double-click diagrams for fullscreen focus
- Launch with
--appflag for no browser chrome - Add → Window Capture → Select presentation window
- Scale to 1920×1080 canvas
- Perfect clean recording!
→ / Space Next
← / Backspace Previous
Home First slide
End Last slide
P Presenter mode
F Fullscreen
? Help
Esc Exit fullscreen/close overlays
Contributions welcome! Please feel free to submit issues and pull requests.
- Additional diagrams
- More detailed speaker notes
- Translations
- Accessibility improvements
- Bug fixes
MIT License - see LICENSE file for details
- Red Hat for OpenShift and branding guidelines
- OVN-Kubernetes community for technical accuracy
- Kubernetes project for networking concepts
- Claude AI for presentation development assistance
For questions, suggestions, or issues:
- Open a GitHub issue
- Submit a pull request
- Service Mesh (Istio/Envoy)
- Network Policies
- Ingress Controllers
- Load Balancing
Made with ❤️ for the OpenShift community
🌟 Star this repo if you find it useful! 🌟