A new button (again) and the first Star Trek: Discovery ship review

So,the website has a new logo (again)!

testing_tablet_20171005

I’ve also been experimenting with colours. I want the Red/Blue theme, but I want it to be easy on the eyes too.

The biggest addition is the first starship review, which is of USS Shenzhou from Star Trek: Discovery. All things considered, I gave it a weighting of 6.3/10. I should have the rest of the Federation background ships from the Battle of the Binary Stars done soon. Other than that, not much to report really.

Advertisements

Just a new button image, really

Due to starting a new semester this week, I will now be confining my time for everything in a schedule. 6PM to 10PM on Thursdays is dedicated for this website, which gives me 3 and a half hours of actual work and 30 minutes to write an update on this blog. Since I have been busy trying to quickly get back into the routine of university life, I have not done much this week.

The only noticable change is the new home button image. It’s just a plain white version of the “UFP” text from the 23rd century Federation banner. The favicon has also been updated according (albeit black instead).

testing_desktop_20170928
The size of the “UFP” button image is subject to change.

Chapter 1 is mostly complete at this stage, only requiring the addition of my UESPA-9 design. Ship information on Bonaventure is complete, and Friendship is almost complete. In preparation for Chapter 2, a DY-732 database entry will be worked on soon. Chapter 2 primarily focuses on the development of the Earth Cargo Service (hence the chapter title “Space Boomers”), but it will also include UESPA and civilian ships from roughly 2080 to 2110. Already there are database entries for some of these ships; Emmette (from the Star Trek: Enterprise title sequence), aforementioned DY-732, and Declaration (which includes Enterprise XCV-330). There will probably be more ships in the chapter as well, likely including some of the later DY series ships.

Well, that’s it for today!

Adding a basic search feature (repost)

(This is actually a repost since I made an mistake before. Whoops.)

The last three days were about considering and mastering the search feature for Starfleet’s Path to 2265. I write this blog post whilst I ponder ways to made the search feature more powerful and intuitive.

As it currently stands, it is a basic search function. When a viewer submits a search query, and SQL query is searches a database and returns an array of results. An if statement checks to see if there are any results. If there aren’t results present, a ‘no results’ message is echoed. If there are results present, the code proceeds to a while loop that iterates until there are no more results to echo out.

In pseudocode, the operation needed to make a search currently looks like this:

  1. Connect to MySQL Server
  2. Select MySQL database
  3. Create variable for the query string received from the search request
  4. Create variable for the SQL SELECT query that searches for matches within two fields of a database table.
  5. Create variable to store the raw results from the running the SELECT query, and handle possible MySQL errors
  6. If number of raw results is more than zero:
    • While able to print out raw results:
      1. Echo a tile containing the data for the result (includes a hyperlink, page name, category, description, and an optional image)
  1. Else:
    • Echo a tile containing a ‘no results’ message

FYI, a “tile” is the CSS class name I use for the layout element that contains a result or message.

Following that procedure, you can generate results like this…

testing_desktop_20170905

…from a search box like that:

I have clearly broken the statement I made on my last post about this project saying that I will not be doing any more serious non-styling code! But a search feature is something I should have had from the get-go. There are refinements that ideally need to be made before the website goes onto the internetz; a more advanced search algorithm that can intelligently display relevant results instead of echoing the results in the order they are stored in the database, a more space-efficient results page with filters, and compliant code for when I switch to PHP7 which also requires I use mysqli_* functions instead of just mysql_* or PHP Data Objects (PDO).

Now. Before I end this blog post, below is an example of an implementation of that pseudocode that should work with little modification. Starfleet’s Path to 2265 uses code that is very similar currently. It might be basic, but it works for now. I am more focused on other parts of the website. So if I run behind schedule, I at least have this to fall back on.

Example PHP code:

phpSearch

Example HTML code of a search box that works out of the box with that PHP code:

htmlSearch

Enjoy!

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!