Thanks! but UI need some major changes #532

LIGMATV · 2024-04-05T10:59:49Z

LIGMATV
Apr 5, 2024

First, i was so surprised when i see that my Wiki was exist on Google Search.
But when i open it, i also surprised that the UI seems like a some website toys. (i know your preferences)
So i already make the brand new style enhancements, hope you like it!

The reasons why the UI was important,

The users that now know anything about GitHub, can think of that website as scam. because fraudulent websites can be identified by the Big/Fancy Button, or so much annoying text.
This can make it uncomfortable for users to read, even though users can click the button to View Page on GitHub.com, users are more familiar with its initial appearance.

For example, i using my own wiki post to experiment with the style.
You can compare with your own UI website with my UI enhancements. Please give me some review!

<html>
<head>
<title> Cara Membuat Ppt Ke Video 60 Fps! - LIGMATV/LIGMATV GitHub Wiki </title>
    <style>
#main {
   max-width: 38rem;
   margin: auto;
   overflow-wrap: break-word;
   min-width: 0;
   background-color: white;
}

body {
/**
   background-image: url('/callToAction.svg');
    /**
1. Changes in body
    1. Font : Change to System UI Font, flexible for any device.
    2. Remove background url : Watermark can be annoying for experience.
**/
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

img {
   max-width: 100%;
   height: auto;
}

#header_button {
   /** 
2. Changes in Header Button
    1. Change background color to native white.
    2. Change font weight to Semibold : An flexible weight for some texts.
    3. Center-align text : Add aesthetically for text.
    4. Darker red text : More soften color.
    5. Box-shadow : Add aesthetically.
**/

   position: sticky;
   top: 0;
   padding: 10px;
   border-style: ridge;
   border-color: lightgrey;
   border-width: thin;
   color: #b40000;
   background-color: #fff;
   font-size: 16px;
   font-weight: 600;
   text-align: center;
   transition: 0.7s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#header_button p {
   margin-bottom: 0;
   margin-top: 0;
}

#header_info {
   /** 
3. Changes in Header Info
    1. Change background color to native white.
    2. Darker red text : More soften color.
**/

   padding: 10px;
   border-style: ridge;
   border-color: lightgrey;
   border-width: thin;
   color: #b40000;
   font-weight: 600;
   background-color: #fff;
   font-size: 16px;
}

#content,
#index {
   padding-left: 10px;
   padding-right: 10px;
}

#footer_info {
   /** 
4. Changes in Footer Info
    1. Remove the sticky position : This section fills the user's reading space.
    2. Remove text color : Color was changed by is visited or not yet.
**/

   bottom: 0;
   padding: 10px;
   margin: 10px;
   border-style: ridge;
   border-color: lightgrey;
   border-width: thin;
   font-weight: bold;
   background-color: #fff;
}

#footer_info .blocks {
   background: black;
   color: white;
   /* outline: 1px solid blue; */
   padding: 0.1em 0.2em;
}

/* Hide useless-parts of transcluded HTML */
.width-full.input-group {
   display: none;
}

h5:nth-last-child(2) {
   display: none;
}

.Box-row.wiki-more-pages-link {
   display: none;
}

.filter-bar {
   display: none;
}

.Box-title > .octicon {
   display: none;
}

.anchor {
   display: none;
}

pre {
   overflow: auto;
}

#main {
   word-wrap: break-word;
}

.Counter {
   background-color: lightgray;
   border-radius: 20px;
   padding: 0 10px;
}

table {
   max-width: 100%;
   overflow: auto;
   width: 100%;
   display: block;
}

.js-wiki-sidebar-toc-toggle-chevron-button {
   display: none;
}

a.visit_url_button {
   /** 
5. Changes in URL Button
    Based on GitHub's Primer UI Button.
**/

   background-color: #f3f4f6;
   border: none;
   color: #000;
   padding: 10px 16px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 10px;
   cursor: pointer;
   border-radius: 5px;
   border: 1px solid #cdcdcd;
   font-weight: 700;
   box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}

a.visit_url_button:active {
   top: 0.1em;
}

a.visit_url_button:hover {
   background-color: #e4e4e4;
   /* border-color: rgba(255, 255, 255, 1); */
}

@media all and (max-width: 30em) {
   a.visit_url_button {
      display: block;
      margin: 0.4em auto;
   }
}

/* Broken Images */
img:before {
   content: "⚠️ MISSING OR BROKEN IMAGE RENDERING ERROR: PLEASE VIEW ORIGINAL PAGE ON GITHUB.COM ⚠️";
   display: block;
   margin-bottom: 10px;
}

@font-face {
   font-family: "color-emoji";
   src: local("Apple Color Emoji"), local("Segoe UI Emoji"),
      local("Segoe UI Symbol"), local("Noto Color Emoji");
}

.emoji {
   font-family: "color-emoji";
}

table,
th,
td {
   border: 1px solid black;
}

.visit_url_link {
   font-size: 16px;
}

        

    </style>
<meta name="viewport" content="width=device-width, initial-scale=1">




<meta property="og:type" content="website">
<meta property="og:title" content="Cara Membuat Ppt Ke Video 60 Fps! - LIGMATV/LIGMATV GitHub Wiki">
<script nonce="cb7c189d-639a-47fc-8601-b03d72aa7a3e">try{(function(w,d){!function(b,c,d,e){b[d]=b[d]||{};b[d].executed=[];b.zaraz={deferred:[],listeners:[]};b.zaraz.q=[];b.zaraz._f=function(f){return async function(){var g=Array.prototype.slice.call(arguments);b.zaraz.q.push({m:f,a:g})}};for(const h of["track","set","debug"])b.zaraz[h]=b.zaraz._f(h);b.zaraz.init=()=>{var i=c.getElementsByTagName(e)[0],j=c.createElement(e),k=c.getElementsByTagName("title")[0];k&&(b[d].t=c.getElementsByTagName("title")[0].text);b[d].x=Math.random();b[d].w=b.screen.width;b[d].h=b.screen.height;b[d].j=b.innerHeight;b[d].e=b.innerWidth;b[d].l=b.location.href;b[d].r=c.referrer;b[d].k=b.screen.colorDepth;b[d].n=c.characterSet;b[d].o=(new Date).getTimezoneOffset();if(b.dataLayer)for(const o of Object.entries(Object.entries(dataLayer).reduce(((p,q)=>({...p[1],...q[1]})),{})))zaraz.set(o[0],o[1],{scope:"page"});b[d].q=[];for(;b.zaraz.q.length;){const r=b.zaraz.q.shift();b[d].q.push(r)}j.defer=!0;for(const s of[localStorage,sessionStorage])Object.keys(s||{}).filter((u=>u.startsWith("_zaraz_"))).forEach((t=>{try{b[d]["z_"+t.slice(7)]=JSON.parse(s.getItem(t))}catch{b[d]["z_"+t.slice(7)]=s.getItem(t)}}));j.referrerPolicy="origin";j.src="/cdn-cgi/zaraz/s.js?z="+btoa(encodeURIComponent(JSON.stringify(b[d])));i.parentNode.insertBefore(j,i)};["complete","interactive"].includes(c.readyState)?zaraz.init():b.addEventListener("DOMContentLoaded",zaraz.init)}(w,d,"zarazData","script");})(window,document)}catch(e){throw fetch("/cdn-cgi/zaraz/t"),e;};</script></head>
<body>
<div id="main">
<nav id="header_button">
<p>⚠️ The <a href="https://en.wiktionary.org/wiki/indexable">indexable</a> preview below may have
<em>rendering errors</em>, <em>broken links</em>, and <em>missing images</em>. <a href="https://github.com/LIGMATV/LIGMATV/wiki/Cara-Membuat-Ppt-Ke-Video-60-Fps%21"> Please view the original page on GitHub.com and not this indexable
preview if you intend to <em>use</em> this content. </a></p>

<!-- 
7. Button (visit_url_button)
    Included on Header Button div.
-->

<a href="https://github.com/LIGMATV/LIGMATV/wiki/Cara-Membuat-Ppt-Ke-Video-60-Fps%21" class="visit_url_button">Click / TAP HERE TO View Page on GitHub.com ➡️</a>
</nav>

<!--
8. Changes in URL Link (visit_url_link)
    Remove URL Link, same function as the button.

<p>📄 URL: <a href="https://github.com/LIGMATV/LIGMATV/wiki/Cara-Membuat-Ppt-Ke-Video-60-Fps%21" class="visit_url_link">https://github.com/LIGMATV/LIGMATV/wiki/Cara-Membuat-Ppt-Ke-Video-60-Fps%21</a>
</p>

-->

<aside id="header_info">
<p>There are <em>no ads</em> in this search engine enabler service. The button and/or link above will take
you <em>directly</em> to GitHub.</p>

<p>📅 Last Modified: Sat, 30 Mar 2024 09:27:58 GMT</p></aside>
<article id="content">
<h1>Cara Membuat Ppt Ke Video 60 Fps! - LIGMATV/LIGMATV GitHub Wiki</h1>
<div id="mirrored"> <html><head><script nonce="cb7c189d-639a-47fc-8601-b03d72aa7a3e">try{(function(w,d){!function(b,c,d,e){b[d]=b[d]||{};b[d].executed=[];b.zaraz={deferred:[],listeners:[]};b.zaraz.q=[];b.zaraz._f=function(f){return async function(){var g=Array.prototype.slice.call(arguments);b.zaraz.q.push({m:f,a:g})}};for(const h of["track","set","debug"])b.zaraz[h]=b.zaraz._f(h);b.zaraz.init=()=>{var i=c.getElementsByTagName(e)[0],j=c.createElement(e),k=c.getElementsByTagName("title")[0];k&&(b[d].t=c.getElementsByTagName("title")[0].text);b[d].x=Math.random();b[d].w=b.screen.width;b[d].h=b.screen.height;b[d].j=b.innerHeight;b[d].e=b.innerWidth;b[d].l=b.location.href;b[d].r=c.referrer;b[d].k=b.screen.colorDepth;b[d].n=c.characterSet;b[d].o=(new Date).getTimezoneOffset();if(b.dataLayer)for(const o of Object.entries(Object.entries(dataLayer).reduce(((p,q)=>({...p[1],...q[1]})),{})))zaraz.set(o[0],o[1],{scope:"page"});b[d].q=[];for(;b.zaraz.q.length;){const r=b.zaraz.q.shift();b[d].q.push(r)}j.defer=!0;for(const s of[localStorage,sessionStorage])Object.keys(s||{}).filter((u=>u.startsWith("_zaraz_"))).forEach((t=>{try{b[d]["z_"+t.slice(7)]=JSON.parse(s.getItem(t))}catch{b[d]["z_"+t.slice(7)]=s.getItem(t)}}));j.referrerPolicy="origin";j.src="/cdn-cgi/zaraz/s.js?z="+btoa(encodeURIComponent(JSON.stringify(b[d])));i.parentNode.insertBefore(j,i)};["complete","interactive"].includes(c.readyState)?zaraz.init():b.addEventListener("DOMContentLoaded",zaraz.init)}(w,d,"zarazData","script");})(window,document)}catch(e){throw fetch("/cdn-cgi/zaraz/t"),e;};</script></head><body><p><img src="https://github.com/LIGMATV/Website/assets/143163098/4339ad92-6eac-46c2-8393-d6b968b2e9e2" alt="image"></p>
<p>Ubah presentasi ppt ke video dengan mudah!<br>
Tapi tunggu... bukan "<a href="https://support.microsoft.com/en-gb/office/save-a-presentation-as-a-video%E2%80%8B-in-powerpoint-ba919059-523d-40a8-b99c-08d18996c09d" rel="nofollow ugc">Export to Video</a>" yang biasa itu, itu hanya menyediakan 30 fps dan pengaturan biasa.<br>
PowerPoint memiliki fitur unik seperti Macros, yang ditulis dalam bahasa pemrograman Visual Basic for Applications (VBA).<br>
Contohnya, kita bisa membuat fitur Ekspor Video buatan kita sendiri dengan VBA! Begini caranya...</p>
<h2><a href="#1-pergi-ke-tab-view-dan-tekan-tombol-macros" aria-hidden="true" class="anchor" id="1-pergi-ke-tab-view-dan-tekan-tombol-macros"></a>1. Pergi ke Tab View, dan tekan tombol Macros</h2>
<p><img src="https://github.com/LIGMATV/Website/assets/143163098/e7b6b0e1-703c-4e38-a857-f7554ce6f5ca" alt="2024-03-30 15_28_24-"></p>
<h2><a href="#2-tulis-macro-namenya-video-dan-tekan-tombol-create" aria-hidden="true" class="anchor" id="2-tulis-macro-namenya-video-dan-tekan-tombol-create"></a>2. Tulis Macro namenya "Video" dan tekan tombol Create</h2>
<p><img src="https://github.com/LIGMATV/Website/assets/143163098/87e7e5ed-c5b5-4f57-be17-aa6513df6cd4" alt="2024-03-30 15_28_59-"></p>
<h2><a href="#3-taruh-kodenya-ini-bagian-paling-penting" aria-hidden="true" class="anchor" id="3-taruh-kodenya-ini-bagian-paling-penting"></a>3. Taruh kodenya, ini bagian paling penting...</h2>
<p><img src="https://github.com/LIGMATV/Website/assets/143163098/76828acd-f9fa-4765-b67d-2c7c6cfd7f6c" alt="2024-03-30 15_29_43-"></p>
<pre><code>Sub Video()
If ActivePresentation.CreateVideoStatus &lt;&gt; ppMediaTaskStatusInProgress Then
For Each sld In ActivePresentation.Slides
    animationCount = sld.TimeLine.MainSequence.Count
    sld.SlideShowTransition.AdvanceOnTime = msoTrue
    sld.SlideShowTransition.AdvanceTime = animationCount * 3 + 3
Next

ActivePresentation.CreateVideo FileName:=Environ("USERPROFILE") &amp; "\Videos\Videoku.mp4", _
UseTimingsAndNarrations:=True, _
VertResolution:=1080, _
FramesPerSecond:=60, _
Quality:=100
Else: MsgBox "There is another conversion to video in progress"
End If
End Sub
</code></pre>
<h3><a href="#pengaturan-atur-sesuai-keinginan" aria-hidden="true" class="anchor" id="pengaturan-atur-sesuai-keinginan"></a>Pengaturan, atur sesuai keinginan!</h3>
<ol>
<li>
<p><code>sld.SlideShowTransition.AdvanceTime = animationCount * 3 + 3</code><br>
Ini digunakan untuk mengatur durasi tiap slide, seperti 3 detik, maka tulis "3 + 3".
Begitupula jika ingin <strong>2 detik</strong>, maka tulis "<strong>2 + 2</strong>".</p>
</li>
<li>
<p><code>ActivePresentation.CreateVideo FileName:=Environ("USERPROFILE") &amp; "\Videos\Videoku.mp4", _</code><br>
Ganti <strong>Videoku.mp4</strong> dengan nama file yang diingikan, ini bisa juga disimpan sebagai <strong>Videoku.wmv</strong>. Videonya akan tersimpan di folder Videos di User.</p>
</li>
<li>
<p><code>VertResolution:=1080, _</code><br>
Ini digunakan untuk mengatur resolusi, misal jika ingin FHD, maka tulis "<strong>1080</strong>" seperti di contoh.</p>
</li>
</ol>
<ul>
<li>4K : 2160</li>
<li>FHD : 1080</li>
<li>HD : 720</li>
<li>SD : 480</li>
</ul>
<ol start="4">
<li><code>FramesPerSecond:=60, _</code><br>
Ini duganakan untuk mengatur Frame Per Second, ini bisa diganti dengan 30, 40, 50, <strong>60</strong> (Rekomendasi), 120, 144</li>
</ol>
<h2><a href="#5-ekspor-videonya" aria-hidden="true" class="anchor" id="5-ekspor-videonya"></a>5. Ekspor Videonya!</h2>
<p>Pergi ke Tab View, tekan tombol Macros dan pilih "Video" lalu Run!</p>
<p><img src="https://github.com/LIGMATV/Website/assets/143163098/4fe70012-13f7-4435-bd23-4b2ca6797ce0" alt="2024-03-30 15_30_03-"></p>
<h2><a href="#6-selesai" aria-hidden="true" class="anchor" id="6-selesai"></a>6. Selesai!</h2>
<p>Pengeksporan sudah diproses, tunggu dan lihat hasilnya di folder Videos atau path <code>C:\Users\User\Videos</code>.</p>
<p><img src="https://github.com/LIGMATV/Website/assets/143163098/211d961f-9f54-4d0a-84c2-cc46e72de64e" alt="2024-03-30 15_30_26-"></p>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v84a3a4012de94ce1a686ba8c167c359c1696973893317" integrity="sha512-euoFGowhlaLqXsPWQ48qSkBSCFs3DPRyiwVu3FjR96cMPx+Fr+gpWRhIafcHwqwCqWS42RZhIudOvEI+Ckf6MA==" data-cf-beacon='{"rayId":"86f878031cf83fc9","r":1,"version":"2024.3.0","token":"4645764ca8384bfc86034b71f1dafd76"}' crossorigin="anonymous"></script>
</body></html> </div>
</article>
<nav id="index">
<a href="/m/LIGMATV/LIGMATV/wiki_index">🗂️ Page Index for this GitHub Wiki</a>
</nav>
<aside id="footer_info">
<p><a href="/"><span class="emoji">ℹ️</span>About GitHub Wiki SEE, a search engine enabler for GitHub Wikis
as <span class="blocks">GitHub blocks most GitHub Wikis from search engines.</span></a></p>
</aside>
</div>
</body>

<script>

/*
9. Dynamic Header Button (header_button)
    Hidden when user scrolling, add more space to read.
*/

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header_button").style.top = "0";
  } else {
    document.getElementById("header_button").style.top = "-100%";
  }
  prevScrollpos = currentScrollPos;
}
</script>

</html>

nelsonjchen · 2024-04-06T00:04:46Z

nelsonjchen
Apr 6, 2024
Maintainer

These changes are opposing my goal of making it thoroughly uncomfortable to read the site and for pushing users to gravitate towards GitHub.com though for full fidelity, functionality, and pleasant reading. I do not want them to read the content at all on the service as it may omit important information or render incorrectly. Your wiki page renders fine, but I can't guarantee this for the 400,000 other wikis out there. I found a few issues of people reporting broken images on the wiki but it was actually broken in the service. The stickied headers and footers are designed to reduce space for reading. "Don't get comfortable, please leave for GitHub".

If you are concerned about the design of your content for your project, I would suggest moving off GitHub wikis and towards GitHub Pages for full control over the design. Not only that, it'll probably rank a lot higher on search engines.

I also try to leave the URL in there. If they don't trust the URL link or button, that's fine, at least they can copy and paste it or navigate it on their own accord. A button hides that information and I think that is sketchy on a purposefully sketchy-looking site already. They can use the page, even if they don't click anything.

Also, any modernization of the site design makes it look official, and I really do not want it to look official or affiliated with GitHub in any way. Changing the button to look more like GitHub is an wrong direction if trying to not look official. It needed to be more obvious.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Thanks! but UI need some major changes #532

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Thanks! but UI need some major changes #532

LIGMATV Apr 5, 2024

Replies: 1 comment

nelsonjchen Apr 6, 2024 Maintainer

LIGMATV
Apr 5, 2024

nelsonjchen
Apr 6, 2024
Maintainer