Next gen web pages

I was looking into ways to make my web pages scale up to 4K displays and devices alike. As I explored that premise months ago in this video:

Since I don’t own a 4K PC monitor to actually test for a preview, I use responsive mode in internet browser developer tools to emulate different screen sizes and formats. As I explain in that WordPress live video series “Web & Tech wise – Open Workshops”, ‘m trying the impossible with WordPress and that is to create optimal UI (user interface) layout & UX (user experience) across multiple platforms and devices. With “Mobile first” approach with also high end screen sizes in mind.

And just recently an article got published covering in part that topic. Where author is giving a step by step guide how to create a high fidelity content screen shots with different methods.

I find it helpful as it cover and holds in one place technical specifications and details in one place that are related to the topic.

Useful external article from “How To Geek”:

How To Take 4K Screenshots on Your 1080p Monitor

https://www.howtogeek.com/how-to-take-4k-screenshots-on-your-1080p-monitor

Show notes drafts from live streaming sessions series on WordPress topics and some crypto & blockchain explorer walk-throughs:

“Tech&WEB🧠smart” open workshops

“Marching the tech ground & expanding horizon”, “conquests in knowledge”, “edutainment conquests”…

---

Work on my website, build a dedicated pages for my WEB (online presence)

1.13.2024

Got the Categories to show its
description text; by editing Archive
template & adding Term Description
block
Learned that images, media library
items can have custom templates
applied
Also images, attachment page is
Single Post (default) template, and
it’s represented with Content block

ep: Now “Guest Book” available on website

WodrPress (main topic)
Looking over examples of embeded
content (like Odysee videos or live
stream), and RSS Feed with images and
excerpt text… . .

Created “Mali Vir Eddy” dedicated page with comments form section on page bottom to act as “Guest book”

ep: Creating shareable content, deeper into WordPress

Example: soc. sharing website content
Cover Image WordPress block usecase
(editable text over image “MEME” format)

Resize image from PowerToys for
Windows 10

Editing gallery block, responsive layout and
appearance, images sizing.. .

Talks on:

• method for monetizing for individual website author, earnings tracking with URLs
• new (block themes, full site editing) vs old WordPress themes
• responsive block layout, Row vs Stack vs Columns and block Groups
• themes comparison and previews

Query Loop, templates in WordPress

• Intro (topics & tasks):
  working on my website, building
  dedicated pages to hold and separate
  post categories
• Create new page and page template
  and layout
• Using ATM 2023WP theme
• Duplicating existing default Template
  parts (found a way to do it)
• so, template parts are in the Blocks
  section in the editor (left panel)
• going trough managing & authoring
  templates in a Block theme

Layout control with Design blocks

• data structure, semantics, hierarchy
• contents (posts, pages) visual
  presentation and layout of elements
• created “Site Map” page, site
  content index, use-case of WordPress
  Widgets: Archive, Resent(latest) posts,
  Calendar, Categories, Pages List,
  Tags(or Categories) “cloud”
• Using “Design blocks”: Stack, Row,
  Group to organize other elements
  (text, widget blocks)

Web-site planning (live show ep.)

Web designe dev-vlog (WordPress)

In this episode:

• Customizing Pagination(designig task)
• Website planning
• Created “Open Workshops” dedicated
  webpage, -Organize main site Navbar(top menu)

Latest developments

-Organize main site Navbar(top menu)

• Submitted site for review to Google
  to get adverts served on my website

————————————–>
In this episode:

• Scaffolding, planning
• implementing new page template, to
  allow wide widht tile(H1 heading)
• experiment & test landing(front)
  website page content flow & layout
• About&Start page merge: Pole position
• Tuning Site map presentation
• drafting Front(Landing) page

ep: Embedding (HTML code) stream in webpage

• Website building
• Created dedicated page for gaming
  content video channels
• Embeding live & videos into webpages
• Using RSS Feed
• Thumbnails for videos compiling in
  dedicated OBS scene, just before start
  steamnig
• QR-code size and placment in video
  thumbnail

Rss feed fetch&display

• Config RSS feed & render(display)
  fetched data
• Test few RSS sources, another website,
  YouTube or Odysee channel feed
• Cross-site “Auto-blogging” with RSS

Link buttons (LinkTree alike)

• replication, reusing, screenshots
• LimeWire (NFT) quick intro, overview
• inserting clipboard content in “page”
• update website links in profiles and
  video description or posts
• hotlinking remote content or resource
• TIP o’day: KICK video clips are
  higher res.quality vs Twitch
• clipping on YouTube works as
  timestamped highlight reference on
  orignal video
• create links list using “LinkTree”-
  like WP Pattern block
• WP-Bock Style customization
  Cover(image) blok; colour properties
  Overlay(opacity), Filters

“Create Block Theme” WPplugin

Plus

Soc.status update style custom template for single post

• Create Block Theme (WP plugin by
  WordPress.org)
• makin’ new (cloning WPT2023) WP theme
• Made new single post temlapte
  soc.status update(portlet) style
• testing three-columns contet stacking
  order(responsive layout), trying get
  left&center column swap stack order-
  -fail

Styles inheritance

• Fixing colour on text links in buttons
  (links states; visited, hover…)
• figuring out how buttons text(links)
  styling is “stacking” (CSS inheritance)
• update to localized(hrvatski) website

Polishing Donos page

• I’ll try polish my “Tips’n’donos”
  (contribute) page (not completed in full
  yet)
• sort out a content catalogue on-in
  website(online central brand hub),
  optimal solution for long term online
  storage of videos, and it’s
  discoverability (I didn’t do it in this
  episode)

Customizing theme, blog home

• more various tasks on at-edoga.net
  website (living canvas)
• customizing Blog home template, posts
  appearance(corners radius, padding)
• making website homepage more efficient
• makeover(fonts, colours) over
  WP widgets

How much content in one screen row

• theory: screens, displays, mediums,
  dimensions, formats(hight to width
  ratio), ergonomics(“reading distance”)

Building a content catalogue with references

• chatting with Rebecca, CrawlingMoon
  & Mae488. But.. .
• Created dedicated category for
  “Open Workshops” content. To create
  and build references to videos(VOD) in
  a “Open workshops” website page
• Copy&paste show-notes drafts into
  separate blog-posts under
  “open workshops” category
• using WordPress “quick edit” on
  back-end(Dashboard->Posts) to edit-
  update old posts
• and include videos thumbnails(preview)
  and links to vids(VOD) and embed in
  each post,

Characters per line in 4K

• content area widths & fonts size
  units? for good responsive execution
• Considering 4K in web-design; testing
  existing WP Themes for 4K-“Ready-ness”
• tested 1440p(upscaled 1080p) streaming:
  -fail, vid. no show: KICK, Bolt+
  -pass: YouTube, Twitch, Odysee
• note: Twitch VOD export to YouTube
  appear in Videos tab on YT channels;
  while streams directly to YT are listed
  on Live tab in channel
• now using staging WordPress
  installation on second level domain
  website with, for theme testing and
  customizations

BOLT-Chain TESTNET:

• dex.boltchain.com
• staking.boltchain.com
• explorer.devnet.boltchain.com Boltchain Dex demonstration:
• find/browse available tokens on
  boltchain using explorer
• mint (faucet) $BOLT-s (10 BOLTs per
  wallet address every 24h allowed)
• using explorer to find token address
  to use for token SWAP on dex
• providing liquidity for custom
  tokens pair on dex
• staking app overview