UESPA-9 finished, early warp reactors added

Well, I’ve just finished my UESPA-9 design in time for today’s update! Take a look at the development of the design:

uespa9_final
Late-August to mid-October 2017 development

I should make it clear than not everything about the design is finished. An orthographic and internal schematic is yet needed to give a complete picture, but this complete sideview will be enough to allow me to begin incorporating the design into the website fully. By the end of today, I should have most of the ship’s database entry done. By this time next week, I should also have a few paragraphs about the ship written for insertion into chapter 1. For now, you can read more about the design here!

Another significant addition to the website is a section of the (currently only UESPA) database dedicated to warp reactors. Since reactors are probably the single best way to signify technological development in starships, I decided it was time to put some attention there. Currently, information on the Cochrane-type fusion, Yoyodyne-type pulse fusion, and Cochrane II-series fusion reactors is present (which are written in chapter 1 and 2 to be the most prominent reactors in the mid-to-late 21st century). A Yoyodyne II-type pulse fusion reactor page will be done within the next few days to compliment the completion of the DY-732-class ship database entry next Thursday.

Have a good evening!

Advertisements

My first original ship

15th October.

That’s the date my Star Trek-themed website will be fully launched and online. As that day approaches, I will be continuing to refine the website’s design and adding launch content. Today, I am currently working on my first original ship design for the website. But before we get into that, I think it is about time I brief what this website is all about.

“Starfleet’s Path to 2265” is as nerdy as it sounds. It is mainly a creative written piece on the subjective fictional history of starships belonging to Earth and Federation design. It’s based around the Star Trek’s prime universe and conforms to canon (mostly). My biggest intention is to fill in the blanks in the timeline between Star Trek: First Contact and Star Trek: Enterprise. Over a year ago, I wrote a small piece about SQL and PHP (In the deep end: MySQL & PHP) that demonstrated an older project called the “Federation Starship Database”. It is kind of like a continuation of that with a refined goal and scope. Pre-TOS and TOS ships are my favourite from Star Trek, and this website is dedicated towards them.

Now, the ship design.

This first of many starship designs I am creating is an early explorer of the United Earth Space Probe Agency, SS Voyager (UESPA-9). I have designed and written the ship to be an early ambitious failure – a complex deep space explorer design in a period of Earth’s history where it is still suffering from the effects of a World War. A recipe for disaster. The design is largely based on a successful canon design from the same period, SS Conestoga (which I have given the registry of UESPA-8).

SS_Conestoga
The canon SS Conestoga, the ship my design is largely based on. Image from Memory Alpha, used under Fair Use.

In order to explain my process, I have briefly documented the design process here. The first thing I did was sketch up some small low detail forms for the ship based on a few well-known references from the same period (SS Valiant of 2065, SS Conestoga of 2067 and DY-500-class of 2076).

uespa9_stage_1

I found that the last form I did was the one I liked the most, as well as the most unique. So I took that form, refined the details, and did some basic annotations on the design.

uespa9_stage_2
Correction: the size measurements should read “145 (length) x 20 (width) x 30 (draft), 50,000 metric tonnes”. In hindsight, the width is far too small anyway and should logically be around 50 to 60 metres.

I then roughly recreated the form on a CAD software (I use TechSoft’s 2D Design V2) so that the design would be confined to a proper scale. I then made a copy of the form and revised the layout of the ship to better suit the length and draft I specified in my annotated drawing (although my specified width of 20 metres will likely cause problems and I am now presuming the width to be around 50 to 60 metres to accommodate the “wing” span of the nacelle pylons).

uespa9_stage_3

Finally, I produced a colourised detail basic render of the ship as a current progress preview for this blog post.

uespa9_stage_4

I hope to have this design completed by the end of the week, and it will be included in my next week’s blog update for the website. Have a good day!

Ironing out “Starfleet’s Path to 2265”

After an interesting birthday on the 27th where a bunch of friends and I had a debate about the merits and dangers of artificial intelligence, it is time to get back on with life. My Star Trek-themed website is nearing the point where it is polished enough to go on the interwebz. Hopefully, it should be online around the middle of next month once I have purchased the domain name I need.

I have made some considerable chances since my last post about the website (Library, Rain & ul/li menus). I rebuild the code and styling of the website in a complete mobile-first approach, implemented the ul/li menu, and generally added more content ready for launch. For this week, I am currently working on refining the style of the website. As it currently stands:

So far, creating content has been thought-provoking and fun to do! Whilst it may take years to complete everything I want to do, the motivation to do this has allowed me to create a fair bit of launch material ready for next month. Here are some examples:

(Please ignore any spelling, grammar or word flow issues. Everything will be proof read eventually before launch.)

Developing the design to suit the content has been interesting too. As shown by the example of a ship report above (and below in far more detail), I have been developing these ‘boxes’ for different types of content to give the page an LCARS-like (the interface of TNG-era Starfleet computer terminals) feel. I avoided completely copying LCARS due to the fact that this website is based around pre-TOS and TOS content (the similarities are just a ‘tip off the hat’). These boxes do collapse on mobiles and tablets in order to free up space for words.

So that’s about it for this update! Most of the changes from here on will be refinements and additions to the CSS stylesheets and adding more content. One thing to be revised is the colour scheme – the blue seems too intense on some displays. Adding more HTML (except when headings and paragraphs are needed) and PHP code is unlikely.

Library, Rain & ul/li menus

Wow. It is really wet today.

I love the rain, yet even I resorted to running into the library for cover today. Inside the PC lab area, the rain is giving its full force unto the windows. Have a look:

 

Note: it was louder in person.

It is actually being a rather nice distraction here as I have woes with redesigning the menu bar for my upcoming Star Trek-themed fan site. Although there was nothing wrong with the menu before, I am currently rebuilding it on an offline test page using lists instead of modified anchors. There are pros and cons to this approach of course, with the main pro being it will naturally suit a multi-level list in the rather likely event I implement one in the future.

Here’s an interesting read on the subject:
https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

The current issue is not being able to get the <ul> to float right. Observe the links being rendered over the logo that is floating left:
Capture

Whether you are for or against these lists, please note that currently I am only exploring my options.

Why “Mobile-First” website development is actually a good thing

Upon examining my last three websites project, I have noticed a trend in the way I develop websites.

I usually design my websites desktop first/mobile later. Which has been fine until now since these offline projects were just code practice for me, and they were database-style websites that would be ill-suited for mobiles. But now, as I prepare to launch two websites that will be on the internet for the public’s viewing, I am starting to see why the “mobile-first” philosophy is actually a good one, and why modern developers should consider adhering to it.

In the last of the three older projects (which was about Aircraft Carriers), I did start redesigning the website to be content-efficient on mobile displays using CSS media queries, but the transition was troubled. I found my myself ‘hacking’ things to make things appear correctly, rewriting entire CSS stylesheets, and adding DIV containers to manipulate groups of elements better.  On my first new websites, I have opted to start transitioning to a mobile-first development scheme (I’ll explain more about why I finally decided to adopt this approach below).

Things have worked out far better this time around. Probably the best thing about this is that the transition from mobile to desktop is an expansion, whereas the transition to desktop to mobile is a contraction. Making an element contract from an already well-calculated specification can be problematic, hence some cases of rewriting the entire CSS so that everything acts uniformly. Manipulating elements designed to be small into larger elements from my experience is far easier.

The new websites look far better than all my previous efforts. But the change was incremental. The first new website, a Star Trek fan site, was only designed at the beginning with mobile devices in mind. There is a high degree of code commonality with my aircraft carrier website, except for the way I handle content efficiency. You might notice from the screenshots of my website there are these red tile objects. These are what display hyperlinks and other data that require morphing when viewed on smaller screens. Using media queries; their width, height, padding, font-size (in em instead of pixels) and optional images’ size are modified. The rest of the website’s content, such as headings and paragraphs, only have their font-size modified. The header’s size stays the same, although the standard menu gets switched into a mobile “hamburger” menu. The website is designed to be displayed in three fixed size brackets; desktop (> 1024px), tablet (< 1024px && > 768px) and mobile (< 768px). This website is due for launch before the years’ end. I will likely make a future post explaining this project.

 

(Please note that for the mobile website, a viewport meta tag is present to ensure that a phone’s web browser displays correctly and eliminates the view of that large blue margins. That screenshot is from a desktop browser.)

My second website is eventually going to serve as my personal portfolio showcase. That was written from the ground up to be a mobile size. The default CSS code is for mobile styling, and then media queries modify it to desktop styling when needed. There are also three size brackets, however the during the mobile bracket, the wrapper that usually keeps the elements in the center of the screen is not fixed and the elements can scale to fit from 768px to 480px (before, the mobile bracket offered a fixed wrapper size of 512px). The tile styling system I used previously is currently omitted from the design as I am working on a better way of flexible size data representation. The design is still being built, so no screenshots yet.

So, why this change all of a sudden? Well, the fact is that more internet users are using mobiles these days – I personally have been using my phone to browse my favourite Star Trek websites more than ever. And the fact is, you really should not give your readers a negative point about the website’s design. I have seem some reports and statements that have talked about the woes in the eyes of the consumers when they use their phone to browse a non-mobile optimised website. People are quick to form opinions based on first impressions. And if that first impression is that the website has a poorly-optimised mobile site, then it is possible that no amount of good content will remedy the situation (it is funny, yet concerning how many things you can apply that logic to as well…). But anyway, I aim to give the best impressions I can with my first proper public websites!