HTML5 NFTs? Can we discuss a method to make this happen?

1

As an artist and designer. I cannot ignore the NFT marketplace. This generation and maybe another behind already value non-tangible commodities. On my art side, I made a self-portrait as my first minted piece. :slight_smile: Remember, we are still early in the market, even with all this recent growth. Reminds me of the old days of the web.

What are your thoughts on this?

For clarity and quality reasons. I want to create simple animations or static images, as Hype native as possible. My challenge is, places like opensea give you options for video, gif, png and jpgs. While that's fine. However, HTML5 NFTs can make a difference.

Unless I'm missing or there is a platform to upload code and supporting files to a single blockchain address, I've never seen a way to make this happen. There's always a solution, somehow. I asked Kevin Rose and of course no reply, lol.

Thanks everyone!

1 Like
2

Well, where's the problem exactly? Does it have to be a single file?

If that's the problem, I did some research here...

I was trying to automate the process of converting a Hype project into a single HTML file. The general theory is if the Hype Runtime, and generated JavaScript code, was cut-and-pasted into the document, and the images were converted to Base64, it might work? I don't know. I lost interest, as I was more focused on automation.

I was looking at features Hype doesn't have, but something that Flash could do — export a whole project to a single file.

However, I'm able to export an entire Hype project to an app with Wrapping. It's not clear to me if “apps” can be part of this NFT thing.

I haven't used Opensea, or NFTs / Cryptocurrency in general, but I read something about Mintable being used for ePub…

I'm not sure about this tech though. It's still quite strange and alien to me. I'm not sure of the point. People are paying money for GIFs, PNGs ands JPGs?! WHY?!

What does one do with these images? This doesn't make any sense to me. :man_shrugging:t2:

I do get that impression. Heh, it's like the Wild West. It does seem like Cryptocurrency has the potential to be one of the next big things in tech. So, instead of looking at Hype as a replacement for Flash, by comparing Hype to features of Flash, the key is to realize that Flash made it big because of the time it was released.

Websites were the 90s & 2000s,
Apps were the 2010s,
Is this the Crytpo era of the Internet? :thinking:

1 Like
3

The most common format is high resolution MP4 videos, which have a single address on IPFS (you can get very high animation fidelity with this format if your Hype content isn't interactive). There is a tutorial for creating HTML5/ single page websites on IPFS you can check here: Host a single-page website on IPFS | IPFS Docs

Here's how to embed a full webpage:

Essentially you set the animation_url to be the webpage, using https and a full URL. Which let's you do cool things like embed games :slight_smile:

https://testnets.opensea.io/assets/0xb3c3aa6e58e78a7db4c1f762686030951b30e5b0/4

(That is hosted on: https://beyondnft.io/)

I recommend hosting on IPFS for durability: Host a single-page website on IPFS | IPFS Docs

3 Likes
4

That is COOL. I'm doing simple stuff, making simple sprite sheets in Hype right now – keeping
each NFT web-native as possible. I'm fully after the niche of a single file animation that looks great at any resolution. I know it's been done now. It's my turn. Thank you for sending that link over to me.

Photics:
I didn't "get it" at first until I started digging. People will buy, sell and trade NFTs to make a profit or just have a killer portfolio. Per blockchain, they are the owners of the jpg. A better way to sum this up, say a musician mints and sells a song or beats. The musician gets royalties upon each sale AND the new owner can use it in their song build, the creator still retains royalties per blockchain agreement. Also, if it's clearly pirated, the creator and/or owner can file a lawsuit – ensuring a win in court as the transparency of the blockchain shows ownership. Delete the pirated copy?

As an artist. That excites me. I might not be sought after. But that could change. You never know.

Again, it's intangible (with the exception of a few artists shipping a physical piece.) It is a giant rabbit hole. but so fascinating what attracts people to this market.

5

Just did a test of this and it works well!

  1. Install IPFS: IPFS Desktop | IPFS Docs
  2. Signup for (optional) (Pinata | Effortless IPFS File Management) to 'pin' your files to their service. This helps guarantee the URL will always be accessible.
  3. Start your node
  4. Switch to the 'files' section of IPFS on your Mac, and drag in your files (ideally as a single HTML page). Use Hype ImageBaseEncoder (Hype Resource / Image Extension) and Question for exporting an ad for website (Inlining all JavaScript in one file) - Single HTML page - #5 by Daniel for help getting everything into a single .HTML file.
  5. Copy 'Share Link' and get your URL:
    Screenshot 2021-09-09 at 2.32.40 PM
    Screenshot 2021-09-09 at 2.32.40 PM843×323 18.6 KB

Example: https://ipfs.io/ipfs/QmaJJJtGLZ6X8th9csNKAREdDaVFuY7VT4kq2SvNiffssr?filename=LinkCollection2.html

2 Likes
6

Sweet! Can't wait to put this in practice. OpenSea has a gas-free method to mint work now, too. As always. You guys are great. Been using Hype since 2.0 days. Community here is top-notch!

7

Nice, the old grumpy frog king resurfaces. Just saw that all screen.maxziebell.de URLs broke when I was moving servers and cleaning files. I restored all* the videos linked to this forum. Regards

* If anything is still missing, DM me

8

Paging @Cescomare who has done NFTs with Hype... maybe you can chime in with your techniques?

9

Yep, just don't look at the giant carbon emission these things produce.
Fork the planet for a few dollars more.

10

Here we go! :slight_smile:

You can very easily export html/css/js from Hype and load them on https://www.hicetnunc.xyz/ without even render them!

Just do these mods:

  • modify a bit the html to link css/js in the same folder (you shouldn't have subfolders)
  • add <meta property="og:image" content="path/to/your/cover.jpg" /> and point it to what you to be the preview (I suggest to create a gif with a demo animation)
  • zip everything and mint your NFT!

Here you can find more infos and the APIs you can use:

Have fun making interactive OBJKT! :wink:

My profile:

1 Like
11

Please don't assume NFTs or even cryptos are immediately producing giant emission: the real problem is not the blockchain itself but the consensus algorithm. The main "polluters" are Bitcoin and Ethereum because they rely on PoW (mining). Ethereum is already moving to PoS (no mining). So it's a "temporary" problem, like all tech have in the beginning, think about the first engine or computer. Instead what these technology can make is huge: decentralise the financial system, which is the root of consumerism and climate change (together with marketing/advertising).

More infos:

12

I am not as sanguine as You are that waving the "decentralized" magic wand is really a fix for things as long as greed, corruption & general bad behavior exist... there are always people looking for a grift. I know "off topic" - but in its own fashion it is - as the consequences of technology can fit in to the discussion of the execution of technology - especially when it is new.

13

Fixed! :slight_smile:

Please don't take conclusions so fast: decentralisation for me means just that more people might create new and better processes in scale, building on top of what others made and improve (code is open). This breaks monopolies and creates new ones in the way, that's natural, but a deeper change takes also place inevitably: an evolution in the organisations, which never stopped to evolve (DAO). Without that we're condemned to stay in the social pyramid and follow patterns destined (and often designed) to fail. This is just a chance for the collective intelligence to manifest and thrive: it will happen? We'll see, for sure we don't have much time left to act. :wink:

1 Like
14

Thanks for chiming in! :slight_smile:

I think it is an important discussion to be had but from a forum standpoint would like to keep the topics separate so this can be a solution thread. If you want to continue the thread of power usage or underlying technology of NFTs I'd just request starting a new topic. Thanks :slight_smile:.

4 Likes
15

So i must store files on my server too ?
Can i not store them anyway without be responsable for them ?
So if i die, all gamer lost her nft html5 gamecards??

16

You can store them wherever you want. When minting an NFT you will ultimately point to the location (the URL address) of the file (or files depending on how you are minting tokens). for a collection it would be a URI in the form of a JSON that essentially calls the file or files (folder) where the data is located. that location holds the files. The idea is to put things on IPFS/Pinata so that it never goes away. and therefore your thing lives on the blockchain forever.

17

EXACT this is THE point AND problem !

So we try to build NFT for EVER
This means absolute NO external content in the html5_NFT_Game_Cards.
And Store for lifetime in IPFS was also the plan.

BUT now direct in first lines of dev docs is popping up a text with:
"Flag NFT for Important, AND hold a copy so it is NOT guaranteed that the ipfs hold it for ever"..

:thinking: :cold_face: :confounded:

i need one professional also for the game contracts ... :disappointed_relieved:

18

web3/solidity dev (or whichever chain you are writing the contract to?)

and you can also base64 the entire thing and do the conversions when calling through the contract. yeah, as far as i know… once its on chain its there but of course, if the file data disappears then the nft is kind of broken.

19

yess we have ALL as base64 IN one file :))
self our serial number is set out of svg_images in base64 .. "haha" and sure i know a single number can be coded with less code as this way ..
"okok" with font fallbacks and svgs and elements and styles and scripts and and and, on a 6-face card is then a bit more lines as normal cards have :cowboy_hat_face: so about 3.400 lines and 12M letters are in one single file :slight_smile:

but this moment we have a tiny server problem .."a VM will be bigger as the entire system" :see_no_evil: hope tomorrow its back online... under amoc.info i guess direction cards you find one card as catalog version as basic ... click at the corners and some more points ... exploring is part of gaming :wink:

oh and in this stress i forgot to answer ...
chains and contracts its a good question in a middle of the chain-wars ...
so normally sure ERC but neeever by this fees for users and a game...!
BSC is on top of my ways, so i also like to join with the project coin the binance launchpad..
TON is of sure one of my favorites for doing any wild stuff.. :wink:
poligon/matic is by the way ....
and all the web3 and sol stuff ufff we do as a game having 1155 and bep20 in one project so ii try to read and understand here this metadata stuff a bit more ...

github.....

######## server is still in copy backup foo... :confused:
but his looks not soo bad ;)))
PLEASE count seconds till loading is done and tell me seconds + line_sped_kind... TH&X
https://0000hij6tc1gf4v3c5tph21guj9l4269abn2encdvujue5riddrsnjo.siasky.net/

20

you can use https://www.4everland.org/