A quick refresher: last week, I set out to draft half of the stories, complete the interviews (if possible), research what I wanted to do with the style, and create an html template for the site.
Where am I now?
Most of the things I set out to accomplish have been achieved, with one large exception. I do not have the interviews complete due to a scheduling error and the fact that I gave myself a minor concussion and couldn’t drive to meet the interviewee. She is out of the country this weekend, but I’m hoping that next weekend works out better. In the meantime, I’ve thought of several more story “types” that I’d like to collect, and a few more people that I could interview, so in that area I’ve actually got more work now than I did last week.
Okay, on to the things I actually did do! I have drafted around half of the stories that I’ve collected at this point. They live here. I’m pretty happy with the voice and content, though I imagine it’ll change between sections and stories.
I also created an html template. I suspect it will be a living document, so as I continue to refine what, exactly, this site is, it will also grow and change. At the moment, I have home, about, fact and story category home, and story pages. I will set up a github next week, but for now, here is the home and fact category pages:
Home
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://code.jquery.com/jquery-3.4.1.min.js" | |
| integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" | |
| crossorigin="anonymous"></script> | |
| <script src="js/script.js" defer></script> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <title>Yggdrasil Home</title> | |
| </head> | |
| <body> | |
| <!– home includes logo, featured story, map if I can make one?, aside with sections and tags, top bar with home, about, featured, search if I can make one, footer with contact, sources? –> | |
| <!– But I love splash pages so much… so lets try and see how it goes. –> | |
| <div class="homeSplash"> | |
| <h1>The Yggdrasil Project</h1> | |
| <p class="headerText">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque maxime sint sequi, dicta, animi odit itaque omnis numquam dolore perspiciatis porro, ducimus laboriosam vel ipsum reprehenderit exercitationem beatae officia at?</p> | |
| <nav> | |
| <ul> | |
| <li><a href="homt.html">Home</a></li> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="featured.html">Featured</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <main> | |
| <div class="mainCols"> | |
| <div class="mainStories"> | |
| <h2>Nature Experiences</h2> | |
| <img src="" alt=""> | |
| <p></p> | |
| </div> | |
| <div class="mainFacts"> | |
| <h2>The Facts</h2> | |
| <img src="" alt=""> | |
| <p></p> | |
| </div> | |
| <div class="mainUtopias"> | |
| <h2>World Saving Tips</h2> | |
| <img src="" alt=""> | |
| <p></p> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <ul> | |
| <li><a href="">Contact Me</a> </li> | |
| <li><a href="">Sources</a></li> | |
| </ul> | |
| </footer> | |
| </body> | |
| </html> |
Fact category
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://code.jquery.com/jquery-3.4.1.min.js" | |
| integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" | |
| crossorigin="anonymous"></script> | |
| <script src="js/script.js" defer></script> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <title>Yggdrasil Facts</title> | |
| </head> | |
| <body> | |
| <!–The purpose of this page is to display a list of links that go to the articles in this category. It will primarily be generated by JS. –> | |
| <div class="storyNav"> | |
| <h1>The Yggdrasil Project</h1> | |
| <nav> | |
| <ul> | |
| <li><a href="homt.html">Home</a></li> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="featured.html">Featured</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!– maybe have an aside with a featured section? Also, I'm feeling like you should be able to view a category page from anywhere on the site. So should that be in an aside?–> | |
| <main> | |
| <h2>Articles on: The Facts of Climate Change</h2> | |
| <p>dolor sit amet, consectetur adipisicing elit. Voluptatum nulla, beatae reiciendis quia eius, harum iusto autem fugiat reprehenderit possimus ab tenetur magnam, adipisci numquam totam corporis eveniet laborum aliquam?</p> | |
| <!– article titles would be listed here. I'm thinking the best way to do this might be in the site, so add the article to the list every time you add through the form? | |
| So a static list in the JS that is just article titles and can link out to articles? Use flexbox to style?–> | |
| <ul class="articleList"> | |
| <li></li> | |
| </ul> | |
| </main> | |
| <footer> | |
| <ul> | |
| <li><a href="">Contact Me</a> </li> | |
| <li><a href="">Sources</a></li> | |
| </ul> | |
| </footer> | |
| </body> | |
| </html> |
This week, I spent a lot of time researching what I would want my style and CSS to look like. I decided that, for the sake of usability, I should go with something more modern and sleek rather than artsy. This will allow users to better nativage the site and remain focused on the content, rather than the style. Right now, I am getting a lot of inspiration from National Geographic, and I built my html template with this in mind.
Where do I want to be by next week?
Creating the html template last week made me acutely aware of the fact that a lot of my success hinges on being able to call content from Firebase and display it. This leaves me with a few questions that I absolutely need to answer before I go any further.
- Can Firebase store images? If so, how?
- How am I tagging the stories with a unique id? When does that happen?
- How challenging is it to create a search bar? Is that something I can do AND make communicate with Firebase via JavaScript?
- Is Firebase really the best database for a project like this? How does National Geographic do it? Or the Washington Post? Or any article based website?
All of these questions will require some research and testing, so that is what I will be doing next week. I will create several fake articles and make sure that I can use Firebase to call the correct article when the link is clicked. I will also research the images issue. By the next check in, I want to be 100% sure that Firebase is the right database for this project.
I’ll also continue drafting my stories—I would love to have all of the drafts written by next week. I’ll also begin collecting “facts” and determine what, exactly, that is going to look like on the site. I think it’ll probably be a blurb of text, image, and link to an external source.
My final goal for next week is to set up a github. This is both for the process blog and because my computer is essentially on its last legs. I would be so devastated if my computer died and I lost everything.
Ally's Process Blog 