173 lines
9.8 KiB
HTML
173 lines
9.8 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html><!-- InstanceBegin template="/Templates/Page Template.dwt" codeOutsideHTMLIsLocked="false" -->
|
|
<head>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="description" content="Vel's personal site!">
|
|
<meta name="keywords" content="PersonalSite,IndieWeb,Blog,Retro,ClassicWeb">
|
|
<meta name="author" content="Velveteen">
|
|
|
|
<script src="/scripts/flashcheck.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/page.css">
|
|
<!-- InstanceBeginEditable name="morecss" -->
|
|
<!-- InstanceEndEditable -->
|
|
|
|
<!-- InstanceBeginEditable name="doctitle" -->
|
|
<title>Debuting a new site design</title>
|
|
<!-- InstanceEndEditable -->
|
|
<!-- InstanceBeginEditable name="head" -->
|
|
<!-- InstanceEndEditable -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="top"></div>
|
|
<script src="/scripts/framecheck.js"></script>
|
|
<!-- InstanceBeginEditable name="Body" -->
|
|
<h1 id="page-title">Debuting a new site design</h1>
|
|
<p>Ok, it's time for the first blog post of this new site. Before I had a simple one-page site, and
|
|
actually, over the course of many years and multiple usernames I have never really had anything public
|
|
facing on my personal sites other than the simple introductory page with links out to social media, so
|
|
I decided that it's about damn time I actually used my grey matter to put words onto the screen and then
|
|
put those words onto the internet.</p>
|
|
<p>So, this first post is going to be going a little into detail of my workflow for creating this website,
|
|
which is much different from the way I've made sites in the past (that is to say, pretty much entirely
|
|
in basic text editors).</p>
|
|
<h2 class="section-heading">HTML but with tang</h2>
|
|
<p>I've been designing my website using Macromedia Dreamweaver MX 2004. I know, I know, Dreamweaver in
|
|
2025? So this is kind of the crux of why I'm doing what I'm doing. Everything on my website (or as much
|
|
as is possible) is created using older software so that my website is authentically able to do its thing
|
|
on older/less featureful browsers and older computers. When I studied IT at school we did a web design
|
|
course as part of the curriculum, and in that course we used Dreamweaver to create a multi-page website
|
|
that used Dreamweaver for templating and such. It was an interesting way to create a templated website
|
|
prior to ever learning anything like PHP or some other server-side language, but the HTML it generates
|
|
is kind of tangy and weird. Well, I decided to just go for it and embrace the tang. I always enjoyed
|
|
playing with Dreamweaver and I think it's a fun way to make a personal site, since it can connect over
|
|
FTP and automatically upload any files when you save them.</p>
|
|
|
|
<center>
|
|
<table width="200px" class="blog-image-embed">
|
|
<tr>
|
|
<td><a href="attachments/20250701-new-site-design/dreamweaver.JPG" target="_blank"><img src="attachments/20250701-new-site-design/dreamweaver.JPG" alt="A screenshot of an old web design software." width="500" border="0"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><center><em>Dreamweaver is a little bit old school but apparently Adobe still offer new versions to this day!</em></center></td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
|
|
<h2 class="section-heading">"Don't connect Windows XP to the internet!!"</h2>
|
|
<p>No! Windows XP is the version of Windows that made the biggest impression on me as a kid. I always really
|
|
wanted one of those cool futuristic looking Sony VAIO desktops but I pretty much had biege boxes, 00s
|
|
towers and an old business laptop I convinced my mom to buy me off the internet at a time when she was
|
|
scared of shopping online. Right now this blog post is being written in Lotus WordPro (more on that later)
|
|
on Windows XP in a virtual machine on my laptop, and I'm running Dreamweaver and all the other software
|
|
I'll mention in this post in the VM too. It just makes things more comfortable for me and gives me a
|
|
little more inspiration for making things that fit my tastes. At some point in the future I'm going to
|
|
get an actual Windows XP computer set up so that I can play older PC games and create blog posts and
|
|
stuff on a real computer, but for now this does the job just fine.</p>
|
|
|
|
<center>
|
|
<table width="200px" class="blog-image-embed">
|
|
<tr>
|
|
<td><a href="attachments/20250701-new-site-design/xp.JPG" target="_blank"><img src="attachments/20250701-new-site-design/xp.JPG" alt="Windows XP desktop tricked out with a very scifi futuristic oceanscape with the VAIO logo in the middle." width="500" border="0"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><center><em>I did download the VAIO theme packs to pretend I got that desktop I wanted as a teen.</em></center></td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
|
|
<h2 class="section-heading">That distinct 90s office smell</h2>
|
|
<p>Lotus WordPro is an old word processor that most people don't even consider because Microsoft Office or
|
|
LibreOffice exist, but it's what I grew up with so I'm using it for writing blog posts and such just
|
|
because it's such a little oddball piece of business software that I think it's kind of fun. The version
|
|
I have installed is actually part of an office suite called Lotus SmartSuite, which has all sorts of
|
|
insane skeumorphic 90s design for its office applications, and I'll definitely write more about that in
|
|
future.</p>
|
|
|
|
<center>
|
|
<table width="200px" class="blog-image-embed">
|
|
<tr>
|
|
<td><a href="attachments/20250701-new-site-design/lotus.JPG" target="_blank"><img src="attachments/20250701-new-site-design/lotus.JPG" alt="A very old school looking word processor." width="500" border="0"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><center><em>The tactical khaki background doesn't exactly scream 90s office-core.</em></center></td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
|
|
<h2 class="section-heading">PhotoShop this is not</h2>
|
|
<p>Ulead PhotoImpact is (was?) a competitor to PhotoShop, and growing up my family PC came with a trialware
|
|
version preinstalled that always claimed to be a trial but I'm not actually sure it ever had any
|
|
limitations. Needless to say, being software from the early 00s, it contains a tonne of presets for
|
|
creating graphics in the contemporary style which everyone now calls Frutiger Aero. There aren't that
|
|
many graphics on this website (yet) but I plan to amp up the graphic design when I have some more time
|
|
to come up with a more cohesive graphical style to match with what I have already designed and kind of
|
|
get closer to the "golden age of web design" style. I'm using PhotoImpact 11, although I think I grew
|
|
up with PI10, but it's close enough, it's fine.</p>
|
|
|
|
<center>
|
|
<table width="200px" class="blog-image-embed">
|
|
<tr>
|
|
<td><a href="attachments/20250701-new-site-design/photoimpact.JPG" target="_blank"><img src="attachments/20250701-new-site-design/photoimpact.JPG" alt="A photoshop style graphics editor." width="500" border="0"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td><center><em>As a kid I had no idea what 90% of the buttons on this screen did, and as an adult that number is around 80%.</em></center></td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
|
|
<h2 class="section-heading">Flash! Aaaaaahhhhh!</h2>
|
|
<p>Flash player is long dead now, of course, but that doesn't mean I have to stop using it! You can still
|
|
install versions of the flash player in some older browser forks, or in modern browsers you can install
|
|
the Ruffle extension to play flash content. Like it or lump it, Flash player was a HUGE part of the
|
|
internet, and I spent an extraordinary number of hours of my life playing flash games and watching
|
|
flash animations, so I don't think it's possible for me to create a website as a shrine to the time I
|
|
loved the internet and leave Flash content out of the picture. My website doesn't lean overly heavily
|
|
on Flash content, but I will be creating some myself, and using old archived flash ads and little easter
|
|
eggs and stuff, and I hope that at the very least you give some of it a shot with Ruffle enabled.</p>
|
|
|
|
<center>
|
|
<table width="200px" class="blog-image-embed">
|
|
<tr>
|
|
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">
|
|
<param name="movie" value="attachments/20250701-new-site-design/hi.swf">
|
|
<param name=quality value=high>
|
|
<embed src="attachments/20250701-new-site-design/hi.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400"></embed>
|
|
</object></td>
|
|
</tr>
|
|
<tr>
|
|
<td><center><em>If you can see this flash movie, you are teh epicz0rs xDD</em></center></td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
|
|
<h2 class="section-heading">I think that's it?</h2>
|
|
<p>I have pretty much ran out of things to say in this particular blog post, but I hope you can understand
|
|
the brand of nostalgia I'm trying to offer on my personal site. This post was a little list-y and maybe
|
|
even very slightly technical, but I don't really want to post exclusively about computers or technology.
|
|
We will have to see how it goes. If you did end up reading this far, thank you! I hope you continue to
|
|
enjoy the stuff that releases on this website, be it traditional blog posts, photo galleries, or shrines
|
|
or whatever else I feel like.</p>
|
|
<p><b>Bye!</b></p>
|
|
<p class="small-text" align="right">Written by Vel and published on July 1st 2025 at 10:15pm GMT-6.</p>
|
|
<!-- InstanceEndEditable -->
|
|
<center>
|
|
<img src="/images/hr.png">
|
|
|
|
<p><span id="share-this-page"></span> ¦¦ <a href="#top">Back to top ↑</a></p>
|
|
<script>
|
|
document.getElementById("share-this-page").innerHTML = `
|
|
Share this page: <input type="text" value="` + document.URL + `"></input>
|
|
`;
|
|
</script>
|
|
|
|
<div id="flash-banner-ad"></div>
|
|
<script src="/scripts/embed-ad.js"></script>
|
|
</center>
|
|
|
|
</body>
|
|
<!-- InstanceEnd --></html>
|