魔獸懷舊網站模塊下載

Despite how I look, I’m the kind kind of person that loves to play old video games. (Full disclosure: I look exactly like the kind of person that loves to play old video games).

盡管我長得很帥，但我還是一個喜歡玩舊視頻游戲的人。 (完全披露：我看上去完全像是喜歡玩舊視頻游戲的人)。

Accordingly, one of my favorite discoveries of the online age was a site dedicated to reworking, re-translating, and relocalizing those games of yore, ROMhacking.net.

因此，我最喜歡的在線時代發現之一是致力于重新設計，重新翻譯和重新定位過去的那些游戲的網站ROMhacking.net。

Here, the denizens of the internet collaborate to make completely new NES Super Mario games, fix the nagging two-player glitch on the Clinger Winger level in Battletoads, and re-work the Breath of Fire II translation into something much closer to actual English.

在這里，互聯網的居民合作制作全新的NES超級馬里奧游戲，修復《巴格達茲》中克林格·溫格(Clinger Winger)級別上令人煩惱的兩人小故障，然后將《火之呼吸II》的翻譯重新制作成更接近實際英語的東西。

But as content rich as the site is, and as much as it’s a masterclass in data management (holy sorting options, Batman!), it does have one particularly glaring design flaw.

但是，盡管網站內容豐富，而且它是數據管理領域的一流課程(圣排序選項，蝙蝠俠！)，但確實存在一個特別明顯的設計缺陷。

If there were a UX police department, ROMhacking.net would be written up for at least five violations of Hick’s Law. Menus top, left, and right; side menu’s duplicating top menus; menus with 6, 8, or even 10 items — all crowding the screen for your attention.

如果有UX警察部門，則將ROMhacking.net寫成至少五次違反希克定律的行為。 菜單頂部，左側和右側； 側邊菜單重復的頂部菜單； 包含6、8甚至10個項目的菜單-屏幕上的所有內容都引起了您的注意。

Even when you consider this site is intended for the type of person who pours over online forums for hours looking for that one piece of information they need to fix a convergence issue on their CRT TV, that’s a lot of options to get lost in.

即使您認為該網站適合那些在網上論壇上閑逛數小時，想要在CRT電視上解決融合問題的信息的人，也有很多選擇可以迷失。

So the primary objective of a potential redesign of this internet gem has to center here: apply a little simplicity, and maybe just a bit more polish to the efficient but otherwise spartan UI. But before jumping in with both feet on VSCode, I needed a few things to base my code on:

因此，可能需要重新設計此互聯網瑰寶的主要目標必須集中在這里：應用一些簡單性，或者對高效但精簡的UI稍加修飾。 但是在開始使用VSCode之前，我需要一些基礎知識：

an overview of what things the original design did and didn’t do well;

概述原始設計做得和不好的事情；

a basic inventory of what is actually on ROMhacking.net, and;

ROMhacking.net上實際存在的基本清單，以及；

some wireframes to work out how to display it.

一些線框，以確定如何顯示它。

概述：好的，壞的和菜單式的 (Overview: the good, the bad, and the menu-y)

While the negatives of the site jump right out at you from the landing page, there actually were some good design queues from which to take notes.

雖然該網站的負面信息從登錄頁面跳出來，但實際上有一些不錯的設計隊列可供您記錄。

Deliciously displayed data精美顯示的數據

Yes, the menus cause claustrophobia, but the presentation of the data in individual hack / translation entries is clean and well-presented. Not just one big table, but a well-proportioned and divided layout that displays a whole lot of data. This is the kind of thing that could be kept.

是的，菜單會導致幽閉恐懼癥，但是在單獨的hack /翻譯條目中的數據表示是干凈的并且呈現得很好。 不僅是一張大桌子，而且是比例合理且分散的布局，可以顯示大量數據。 這是可以保留的東西。

There’s also nothing wrong with the basic color scheme, and if we’re going to keep the logo (which, why not, it works great) that should be maintained.

基本的配色方案也沒有錯，如果我們要保留徽標(為什么不這樣做，效果很好)嗎？

What it lacks is perhaps a certain pizazz, and a touch of modern design. Instead of only tiny screenshot images, bigger and more emphasized hero images would look nice. Instead of opting for the classic shadow-box-floating-bubble-two-tone layout, something flatter and simpler could spruce it up.

它缺少的也許是某種流行樂，以及一些現代設計。 不僅僅是很小的屏幕截圖圖像，更大更強調的英雄圖像看起來也不錯。 與其選擇經典的影盒浮動氣泡兩色調版式，不如選擇更扁平，更簡單的東西。

庫存：讓內容充實 (Inventory: let there be content)

Uh…. woah.

嗯... 哇。

To say that ROMhacking.net has a lot of content is nearly is the same as saying the Atlantic is “a lot of ocean”. Sure, there may be bigger in the wide world, but golly if it didn’t take thousands of years of technological advancement to safely cross it.

說ROMhacking.net內容很多，幾乎等于說大西洋是“很多海洋”。 當然，廣闊的世界可能會更大，但如果它不需要數千年的技術進步就能安全跨越，那就太可笑了。

Yes, that’s 4620 hacks. Does not include translations, utilities, or guides. Wowza.是的，這是4620駭客。 不包括翻譯，實用程序或指南。 哇

Thousands of documented games, dozens of utilities, thousands of hacks and translations, each with authors, categories, platforms, readmes, screenshots, download files — and that isn’t even touching the “About” page, forums, and instructional guides.

成千上萬個已記錄的游戲，數十種實用程序，成千上萬的駭客和翻譯，每個都有作者，類別，平臺，自述文件，屏幕截圖，下載文件-甚至都沒有觸及“關于”頁面，論壇和說明指南。

It’s a big site.

這是一個很大的網站。

Representing a redesign of the site in its entirety would be outside the scope of this project. But if we’re talking combining a few pages (like About and Help) and representing a few example hack/translation entries… now that is doable. The point is to give an idea of how the redesign could look, not recrunch the Mt. Kilimanjaro of data it contains.

表示整個站點的重新設計將不在此項目的范圍內。 但是，如果我們要討論的是合并幾個頁面(例如“關于”和“幫助”)并代表一些示例黑客/翻譯條目，那么這是可行的。 關鍵是要給出重新設計的外觀，而不是重新設計Mt。 它包含的乞力馬扎羅山數據。

通常的裝幀工作 (The usual frame-up job)

If history has taught us anything, it’s that styles you made fun of in pictures of your parents will be popular again for your kids, and that good web design should begin with some sort of wireframe. If you’re in it for the real money, probably multiple iterations of wireframes of the whole site, with research and user testing to back it up.

如果歷史能教給我們任何東西，那就是您在父母的照片中取笑的樣式將再次對您的孩子們流行，并且良好的網頁設計應從某種線框開始。 如果您真心投入其中，則可能需要整個站點的多個線框迭代，并進行研究和用戶測試以支持它。

Yes, well, this project wasn’t quite on that level. So basic wireframes for a few of the pages, for mobile and desktop, probably will do.

是啊，這個項目是不太對的水平。 因此，針對移動和臺式機的某些頁面的基本線框可能會起作用。

They’re not much, but they’re something to code by.它們雖然不多，但可以作為編寫代碼的依據。

Now, with the preliminaries done, it’s time to spring to life a basic coded-prototype.

現在，完成了初步的準備，現在該是使基本的編碼原型生效的時候了。

讓代碼吊索開始 (Let the code slinging begin)

There is, as usual, a sort of gap between what a site looks like in its wireframe, and what eventually gets spelled out in tags, classes, and functions.

像往常一樣，站點在其線框中的外觀與最終在標簽，類和函數中闡明的內容之間存在某種差距。

This is often because along the way, you might figure out something that works even better than your original plan, and just as often because part of that plan turns out to be, functionally, a bad idea.

這通常是因為在此過程中，您可能會發現比原始計劃效果更好的東西，并且經常因為該計劃的一部分在功能上被認為是一個壞主意。

Have a nice, restrained image slider? No, go BIG, baby! Make that image go wall to wall on all screen sizes! Spelling out every hack entry in simple HTML and CSS? You wouldn’t have enough lifetimes for a site of this size, so instead of typing a bunch of new material for each entry page, and copy-pasting left and right, make a fetch to a JSON, and have JavaScript populate the whole thing for every entry page!

有一個不錯的，內斂的圖像滑塊嗎？ 不，大吧，寶貝！ 使該圖像在所有屏幕尺寸上都能穿墻而出！ 用簡單HTML和CSS拼寫出所有黑客條目？ 對于這種規模的網站，您將沒有足夠的生存期，因此，與其在每個條目頁面上鍵入一堆新材料，然后左右左右粘貼，將其提取為JSON，然后讓JavaScript填充整個內容，對于每個條目頁面！

Yeah, that’s a lot of info you wouldn’t want to re-type for every page是的，您不想在每個頁面上重新輸入很多信息

The one minor wrinkle to work out for this info-getting was how to call the right data from the JSON for each page.

需要解決的一個小問題是如何從JSON中為每個頁面調用正確的數據。

I tried a few variations (an onload in the body that passes a parameter? finding a piece of text in the DOM?) but found that setting up a bit of hidden input, and getting its value from its ID turned the trick. So with a change of one value on a page, an otherwise identical copy can have completely different content according to the corresponding JSON entry. Huzzah!

我嘗試了幾種變體(傳遞參數的主體上的負擔？在DOM中找到一段文本？)，但發現設置一些隱藏的輸入，并從其ID中獲取其值，就可以解決問題。 因此，在頁面上更改一個值后，根據相應的JSON條目，其他相同的副本可能具有完全不同的內容。 暈！

Now on to an “About” page, and a “Contribute” form, and loads of styling, and… yes, there was still plenty to do.

現在進入“關于”頁面和“貢獻”表單，以及大量的樣式，……是的，還有很多事情要做。

這樣就完成了 (Thus it was done)

So, how did this little redesign turn out?

那么，這個小小的重新設計結果如何？

Slider top, hover info boxes center, and in accordance with Hatch’s law, social media on bottom.滑塊頂部，懸停信息框居中，按照哈奇定律，社交媒體位于底部。

Well, not bad. Surely it could use some review and additional research. But for its scope, I think it addressed the issues at hand.

好吧，還不錯。 當然可以使用一些評論和其他研究。 但就其范圍而言，我認為它解決了眼前的問題。

Navigation bars were reduced to one, with five links and a search bar, and one sub menu. Add to that some slapping-good game art in a slider, and an overlay-style mobile nav, and the laws of both Hick and slick are appeased.

導航欄減少為一個，其中包含五個鏈接和一個搜索欄以及一個子菜單。 此外，還提供了一些出色的滑蓋游戲風格，以及疊加式移動導航，并遵循了希克法和光滑法則。

Oooooverlay.oooooverlay。

Three example entries are present, each programmatically generated using the aforementioned JavaScript that fetched from a JSON like a good little doggie. Each entry takes a lot of the good design cues from the original, and adds a flatter, modern touch. Adding more pages would be as simple as tacking on more JSON entries and a few pictures. Then presto copy past-o, more hacks, utilities, and translations.

存在三個示例條目，每個條目都使用從JSON像好狗狗一樣的上述JavaScript以編程方式生成。 每個條目都從原始設計中汲取了很多很好的設計線索，并增添了平淡而現代的感覺。 添加更多頁面就像添加更多JSON條目和幾張圖片一樣簡單。 然后預先復制過去的o，更多的技巧，實用程序和翻譯。

It’s not that different. And that’s actually good.沒什么不同。 這實際上很好。

To finish it off, I fill the site out with a basic form page and an About with some clip-path shapes (because why not?). Those pages that I didn’t remaster, I link to the original site to open in a new tab, so you can still sort of act like it’s a complete site.

最后，我用一個基本的表單頁面和一個帶有一些剪切路徑形狀的“關于”來填充站點(因為為什么不這樣？)。 我沒有重新整理的那些頁面，我鏈接到原始網站以在新選項卡中打開，因此您仍然可以像是一個完整的網站一樣進行操作。

It isn’t perfect, but I think it sets up well so that any nerd with a heart in his Genesis can easily get his mitts on some remastered nostalgia.

它不是完美的，但我認為它設置得很好，因此任何在Genesis中懷有一顆心的書呆子都可以輕松地擺脫一些懷舊情緒。

Full disclosure: I downloaded and patched in four game hacks in the course of this redesign. And I think I showed an excellent amount of restraint.

全面披露：在重新設計的過程中，我下載并修補了四個游戲hack。 而且我認為我表現出了極大的克制。

Adam Andreason is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The previous article relates to the Capstone project in the DGM2740 class, and is representative of the skills learned.

亞當·安德里亞森(Adam Andreason)是猶他州奧勒姆市猶他州谷大學數字媒體課程的學生，研究網絡與應用程序開發。 上一篇文章與DGM2740類中的Capstone項目有關，并且代表了所學的技能。

翻譯自: https://medium.com/adam-andreason/a-one-man-site-redesign-and-nostalgia-716d08670067

魔獸懷舊網站模塊下載

總結

以上是生活随笔為你收集整理的魔兽怀旧网站模块下载_一个人的网站重新设计和怀旧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。